xihaigou/pages/game/gameDetail.vue

<template>
	<view class="content">
		<view class="game-top-bg">
			<image :src="'../../static/game/game2'+(index+1)+'.png'" mode=""></image>
			<view class="game-top-time">
				第{{getGuaishou ||0}}轮

				<view class="yueyue" v-if="isGb">
					&nbsp;&nbsp;距离种植
					<span>{{state==0?'开始':'结束'}}</span>
					仅剩
					<span
						v-if="state==0"><span>{{kai.day||0}}</span>天<span>{{kai.hours||0}}</span>时<span>{{kai.minutes||0}}</span>分<span>{{kai.seconds||0}}</span>秒</span>
					<span
						v-else><span>{{hour.day||0}}</span>天<span>{{hour.hours||0}}</span>时<span>{{hour.minutes||0}}</span>分<span>{{hour.seconds ||0}}</span>秒</span>
				</view>
				<view class="yueyue" style="margin-left: 200rpx;" v-else>
					已结束
				</view>

			</view>
			<view class="game-top-xl">
			<!-- 	<view class="xl">
					 血量值:&nbsp;{{guaishouList.number}}/{{guaishouList.money*1}}
			 </view> --> 
				<view class="xl" v-if="guaishouList.number!=guaishouList.money*1">
					<!-- 祝您打怪成功! -->
					<!-- 种植成功! -->
				</view>

				<view class="xl" v-else>
					种植成功!
				</view>
				<view class="xl-t">
					<!-- 血量进度条 暂未开发! -->
					<!-- <prog value= "80"></prog> -->
					<!-- change进度条变化时候触发 -->
					<bing-progress change="change" :value="getJd" width="474rpx" noActiveColor="#D0F8DF"
						infoColor="#5f51b1" :isActiveCircular="false" barBorderRadius="20px" :disabled="true"
						infoContent="value" infoEndText="%" handleWidth="0" infoFontSize="26px" strokeWidth="34rpx"
						:continuous="true" :subContinuous="true" infoAlign="center" activeColor="#08D29B ">
					</bing-progress>
				</view>
			</view>
			<!-- <view class="xgs">
				<image :src="'../../static/game/reb0'+(index%5+1)+'.png'" mode=""></image>
			</view> -->
			<view class="id">
				种植人参:{{guaishouList.name }}&nbsp&nbsp&nbsp第{{getGuaishou ||0}}轮
			</view>
			<view class="gl">
				<image src="../../static/game/game8.png" mode="" style="width:120rpx; height:130rpx" @click="dian">
				</image>
			</view>
			<view class="gl" style="margin-left: 590rpx;" @click="getJl">
				<image src="../../static/game/game11.png" mode=""></image>
			</view>
		</view>
		<view class="edu">
			本次参与额度:{{guaishouList.lower_limit*1 ||0}}~{{guaishouList.upper_limit*1 ||0}}
		</view>
		<view class="button">
			<image v-if="isGoumai==false" src="../../static/game/game6.png" mode="" @click="yue"></image>
			<image v-else src="../../static/game/game10.png" mode=""></image>
		</view>
		<view class="u-table">
			<view class="column">
				<view class="table-box" @click="navTo('../user/whiteJf')">
					<view class="table-img">
						<image src="../../static/game/game4.png" mode=""></image>
					</view>
					<view class="table-title">
						<view class="table-top">
							{{userInfo.white_integral*1}}
						</view>
						<view class="table-top">
							红积分
						</view>
					</view>
				</view>
				<view class="table-box" @click="navTo('../user/purpleJf')">
					<view class="table-img">
						<image src="../../static/game/game3.png" mode=""></image>
					</view>
					<view class="table-title">
						<view class="table-top">
							{{userInfo.purple_integral*1}}
						</view>
						<view class="table-top">
							阳光积分
						</view>
					</view>
				</view>
			</view>
			<view class="aa">
			</view>
			<view class="bb">
			</view>
			<view class="column">
				<view class="table-box" @click="navTo('../user/myGreenCard')">
					<view class="table-img">
						<image src="../../static/game/game1.png" mode=""></image>
					</view>
					<view class="table-title">
						<view class="table-top">
							{{greenDe}}
						</view>
						<view class="table-top">
							绿卡
						</view>
					</view>
				</view>
				<view class="table-box" @click="navTo('../money/wallet')">
					<view class="table-img">
						<image src="../../static/game/game2.png" mode=""></image>
					</view>
					<view class="table-title">
						<view class="table-top">
							{{userInfo.now_money*1}}
						</view>
						<view class="table-top">
							余额
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <uni-popup ref="popup" type="center">
			<view class="yue-box">
				<view class="yue-tit">
					抢购
				</view>
				<view class="yue-content">
					您有{{number}}张绿卡可直接抢购,要使用吗?
				</view>
				<view class="comfirm-box">
					<view class="cancel" @click="kfClose()">不使用</view>
					<view class="comfirm" @click="comfirm()">使用</view>
				</view>
			</view>
		</uni-popup> -->
		<uni-popup ref="popupYue" type="center">
			<view class="yue-box">
				<!-- <view class="yue-tit">
					抢购数量
				</view> -->
				<!-- numberChange购买数量变化   goodsNumberMax最大可购买数 -->
				<!-- 		<uni-number-box class="step" :isMin="true" :value="goodsNumber" :min="1" :max="goodsNumberMax"
					@eventChange="numberChange"></uni-number-box> -->
				<view class="yue-cont">


					<input type="number" class="yue-content" placeholder="请输入种植数量" v-model="goodsNumber">
				</view>
				<view class="comfirm-box">
					<view class="cancel" @click="quxiao()">取消</view>
					<view class="comfirm" @click="quire()">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- <uni-popup ref="popupButton" type="bottom">
			<view class="zhifu-box">
				<view class="zhifu-title">
					请选择支付方式
				</view>
				<view>
					<radio-group name="" @change="radioChange">
						<label class="zhifu-content">
							<view class="bai">
								<image src="../../static/game/game04.png" mode=""></image>
								<text>白积分支付</text>
							</view>
							<radio style="transform:scale(0.7); color: #ff0000;" v-model="bai" checked="true" />
						</label>
						<label class="zhifu-content">
							<view class="bai">


								<image src="../../static/game/game02.png" mode=""></image>
								<text>红积分支付</text>
							</view>
							<radio style="transform:scale(0.7); color:#ff0000" v-model="hong" />
						</label>
						<label class="zhifu-content">
							<view class="bai">
								<image src="../../static/game/game05.png" mode=""></image>
								<text>紫积分支付</text>
							</view>
							<radio style="transform:scale(0.7);color: #ff0000;" v-model="zi" />
						</label>
					</radio-group>
				</view>
				<view class="zhifu-bottom">
					<view class="zhifu-left">
						<text>合计:&nbsp;</text><text>{{goodsNumber}}</text>
					</view>
					<view class="zhifu-right" @click="buy">
						立即支付
					</view>

				</view>
			</view>
		</uni-popup> -->
		<!-- 		<uni-popup ref="popupPass" type="center">
			<!-- <view class="yue-box">
				<view class="yue-tit">
					请输入交易密码
				</view>
				<view class="password">
					<input type="password" v-model="passWord" focus placeholder="请填写交易密码">
				</view>
				<!-- numberChange购买数量变化   goodsNumberMax最大可购买数 -->
		<!-- <uni-number-box class="step" :isMin="true" :value="goodsNumber" :min="1" :max="goodsNumberMax"
					@eventChange="numberChange"></uni-number-box> -->
		<!-- <view class="yue-content">
					请填写积分数量
				</view> -->
		<!-- <view class="comfirm-box">
					<view class="cancel" @click="quxiaoPass()">取消</view>
					<view class="comfirm" @click="quirePass(passWord)">确定</view>
				</view>
			</view> -->
		<!-- 	</uni-popup> -->
	</view>
</template>

<script>
	import {
		greenList,
		userinfo,
		getJl
	} from '@/api/user.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getTime,
		timeComputed,

	} from '@/utils/rocessor.js'
	import {
		getGameDetail,
		getPurchase
	} from '@/api/game.js'
	import bingProgress from '@/components/bing-progress/bing-progress.vue'
	import uniNumberBox from '@/components/uni-number-box.vue'
	export default {
		components: {
			uniNumberBox
		},
		data() {
			return {
				loadingType: 'more',
				kai: {},
				state: 0, //活动状态
				xuhaolan: 1690,
				name: '',
				isGb: true,
				goodsNumberMin: 1,
				greenDe: 0, //绿积分
				index: 0,
				timer: '',
				hour: {},
				guaishouList: [], //怪兽详情
				id: 0, //详情id
				isGoumai: false, //是否购买
				passWord: "", //交易密码
				bai: 0,
				hong: 0,
				zi: 0,
				goodsNumberMax: 1000, //最大可购买数
				goodsNumber: '', //购买数量
				number: 8,
				bianhua: 0, //变化
				xiaoguaishou: '',
				imageList: [{
						image: "../../static/game/game01.png",
						// color: '#7F69D8'
					},
					{
						image: "../../static/game/reb02.png"
					},
					{
						image: "../../static/game/reb03.png"
					},
					{
						image: "../../static/game/reb01.png"
					},
					{
						image: "../../static/game/reb04.png"
					}
				] //小怪兽图片
			};
		},
		computed: {
			...mapState('user', ['hasLogin', 'userInfo']),
			getGuaishou() {
				if (this.guaishouList.stage <= 7) {
					return 1
				} else if (this.guaishouList.stage > 7) {
					let a = this.guaishouList.stage / 7
					return Math.ceil(a)
				}
			},
			getJd() {
				return ((this.guaishouList.number / this.guaishouList.money * 1) * 100)
				// return "99.4"
			}
		},
		// beforeDestroy() {
		// 	clearInterval(this.timer)
		// },
		onLoad(option) {
			console.log(this.userInfo, 'userInfo');
			// this.xiaoguaishou = this.imageList[option.id].image
			this.uid = option.id
			this.index = option.index * 1
			console.log(this.index, 'eeeeeee');
			this.getDTime()
			let obj = this
			const time = setInterval(function() {
				obj.bianhua++;
				if (obj.bianhua == 2) {
					clearInterval(time)
				}

			}, 6)
		},
		onShow() {
			this.loadingType = 'more'
			// this.getDTime()
			this.jtDg()
			// this.getDetail()
			if (this.timer) {
				clearInterval(this.timer)
			}
			// let getTimes = uni.getStorageSync('time')
			// this.isGb !=getTimes
			// // uni.clearStorage('time')
			// console.log(getTimes, 'uni.setStorageSync');


			this.getGreen()
			this.getUerInfo()

		},
		onHide() {
			this.loadingType = 'loading'
			console.log(this.loadingType, 'this.loadingType------onhidee')
		},
		onUnload() {
			this.loadingType = 'loading'
			console.log(this.loadingType, 'this.loadingType------onUnload')
		},
		methods: {
			//监听打怪状态
			jtDg() {
				console.log(this.xuhaolan == this.guaishouList.money * 1, '2323');

			},
			...mapMutations('user', ['setUserInfo']),
			getUerInfo() {
				userinfo({})
					.then(({
						data
					}) => {
						this.setUserInfo(data);
					})
					.catch(e => {
						console.log(e);
					});
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			getGreen() {
				greenList().then(res => {
					this.greenDe = res.data.count
					// console.log(res, '率积分');
				})
			},
			dian() {
				this.$api.msg('敬请期待!')
			},
			getDetail() {
				if (this.loadingType == 'loading') {
					return
				}
				this.loadingType = 'loading'
				getGameDetail({
					id: this.uid
				}).then(res => {
					this.loadingType = 'more'
					this.guaishouList = res.data
					console.log(res.data, '打怪血量');
				}).catch(err => {
					clearInterval(this.timer)
				})
			},
			//计算倒计时
			getDTime() {
				let obj = this
				getGameDetail({
					id: this.uid
				}).then(res => {
					this.guaishouList = res.data
					console.log(res, 'res');
					if (this.guaishouList.number == this.guaishouList.money * 1 && this.guaishouList.suc == 1) {
						this.$api.msg('种植成功!')
					}
					if (this.guaishouList.suc == 2) {
						this.$api.msg('种植失败!')
					}

					this.bianhua = 3000
					//当前时间
					let dqTime = Math.round(new Date().getTime() / 1000).toString();

					console.log(dqTime, 'if()');
					//开始事件
					let add_time = res.data.add_time
					if (dqTime >= add_time) {
						this.state = 1
					}
					// this.getDTime()
					//获取结束时间
					let endTime = res.data.end_time
					// console.log(endTime, 'this.guaishouList.end_time');
					//开启倒计时
					obj.timer = setInterval(getShijian, 1000)

					function getShijian() {
						let kai = timeComputed(add_time * 1000)
						obj.kai = kai
						// console.log(obj.kai,'kai');
						let da = timeComputed(endTime * 1000)
						obj.hour = da
						Object.values(obj.hour).forEach(e => {})
						// obj.getDetail()
						if (obj.hour.day == 0 && obj.hour.hours == 0 && obj.hour.minutes == 0 && obj.hour
							.seconds == 0) {
							obj.isGb = false
						}
					}

				})


			},
			//获取投注记录
			getJl() {
				uni.navigateTo({
					url: '../user/jlDetil'
				})
			},
			radioChange() {},
			//购买积分
			buy() {
				this.$refs.popupButton.close()
				this.$refs.popupPass.open()

			},
			//交易密码取消
			quxiaoPass() {
				this.$refs.popupPass.close()
			},
			//交易密码确认
			quirePass() {
				console.log(this.passWord, 'passWord');
				this.$refs.popupPass.close()
				this.isGoumai = true

			},
			//购买数量
			// numberChange(e) {
			// 	this.goodsNumber = e.number
			// 	// console.log(this.goodsNumber, 'e');
			// 	// this.$refs.popupButton.open()
			// },
			//抢购数量取消
			quxiao() {
				this.$refs.popupYue.close()
				this.goodsNumber = "请输入种植数量"


			},
			//抢购数量确认
			quire() {
				console.log(this.goodsNumber, 'this.goodsNumber');

				this.$refs.popupYue.close()
				// this.$refs.popupButton.open()
				//投注
				if (this.goodsNumber < 10) {
					this.$api.msg('种植数量不低于10')
					this.goodsNumber = ''

				}
				getPurchase({
					//众筹场次id
					id: this.uid,
					price: this.goodsNumber
					//投注额度
				}).then(res => {
					console.log(res, '投注信息');

					uni.showToast({
						title: '投注成功',
						duration: 2000
					});
					this.goodsNumber = "请输入种植数量"
					this.getUerInfo()
					this.getDetail()
				})

			},
			//预约界面使用
			comfirm() {
				this.$refs.popup.close()
				this.$refs.popupYue.open()
			},
			//预约界面不使用
			kfClose() {
				this.$refs.popup.close()
			},

			//点击抢购
			yue() {
				console.log('asda');
				if (this.isGb == false) {
					this.$refs.popupYue.close()
					// uni.showModal({
					// 	title:"活动已结束！"
					// })
					// uni.showLoading({
					// 	title:"活动已结束!"
					// })
					this.$api.msg("活动已结束!")
				} else {
					this.$refs.popupYue.open()
				}
				// this.$refs.popupYue.open()


			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #ECE7F8;
		width: 750rpx;
		height: 100%;
		padding: 0;
		margin: 0;

	}

	.popup {
		width: 100rpx;
		height: 100rpx;
	}

	.game-top-bg {
		position: relative;
		display: flex;
		justify-content: center;
		width: 750rpx;
		height: 550rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.game-top-time {
		line-height: 50rpx;
		padding-left: 70rpx;
		position: absolute;
		top: 30rpx;
		left: 20rpx;
		width: 710rpx;
		height: 50rpx;
		background: #000000;
		opacity: 0.61;
		border-radius: 25rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;

		.yueyue {
			margin-left: 10rpx;
			display: inline-block;
		}

		span {
			width: 42rpx;
			height: 42rpx;
			background: #08D29B;
			border-radius: 10rpx;
		}
	}

	.game-top-xl {
		position: absolute;
		text-align: center;
		z-index: 9999;
		// left: 140rpx;
		top: 90rpx;

		// line-height: 75rpx;
		.xl {
			// border: 1rpx solid  #5f51b1;
			text-shadow: 3rpx 3rpx #999999;
			width: 750rpx;
			border-radius: 20rpx;
			padding: 30rpx;
			padding: 5rpx 10rpx;
			text-align: center;
			font-size: 40rpx;
			font-weight: 500;
			color: #08D29B;
		}

		.xl-t {
			position: absolute;
			width: 750rpx;
			left: 140rpx;

			// width: 474rpx;
			// height: 31rpx;
			// background: #A38CF4;
			// border: 3rpx solid #FFFFFF;
			// border-radius: 13rpx;
		}
	}

	.xgs {
		position: absolute;
		top: 200rpx;
		left: 210rpx;
		width: 330rpx;
		height: 260rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.id {

		text-align: center;
		position: absolute;
		top: 475rpx;
		padding: 0 30rpx;
		height: 60rpx;
		background: #000000;
		opacity: 0.64;
		border-radius: 20rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 60rpx;
	}

	.gl {
		top: 360rpx;
		left: 25rpx;
		position: absolute;
		width: 100rpx;
		height: 110rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.edu {
		margin: 20rpx 190rpx;
		width: 370rpx;
		height: 50rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		background: #1B1E2F;
		opacity: 0.57;
		border-radius: 25rpx;
		line-height: 50rpx;
		text-align: center;
	}

	.button {
		margin: 0 160rpx;
		width: 430rpx;
		height: 120rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.u-table {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin: 20rpx 30rpx;
		width: 688rpx;
		height: 309rpx;
		background: #FFFFFF;
		border: 3rpx solid #08D29B;
		box-shadow: 0px 0px 20rpx 0rpx rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;
		position: relative;

		.aa {
			width: 685rpx;
			top: 152rpx;
			position: absolute;
			height: 2rpx;
			background: #08D29B;
		}

		.bb {
			width: 2rpx;
			height: 305rpx;
			background: #08D29B;
			margin-left: 343rpx;
			top: 0;
			position: absolute;
		}

		.column {

			display: flex;
			align-items: center;
			justify-content: space-around;

		}

		.table-box {
			margin-left: 70rpx;
			width: 50%;
			display: flex;
			align-items: center;

			.table-img {
				width: 65rpx;
				height: 65rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.table-title {

				padding-left: 15rpx;
				display: flex;
				flex-direction: column;

				.table-top {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					width: 180rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
					// line-height: 75px;
				}
			}

			;
		}
	}

	.yue-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;


		width: 582rpx;
		height: 377rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.yue-tit {
			align-items: center;
			font-size: 42rpx;
			font-weight: 500;
			color: #0C1732;
			line-height: 56rpx;
		}

		.password {
			text-align: center;
			align-items: center;
		}

		// .yue-cont{
		// 	border-color: #5655EF;
		// 	width: 400rpx;
		// 	height: 80rpx;
		// }
		.yue-content {
			text-align: center;
			// width: 300rpx;
			height: 80rpx;
			border-radius: 20rpx;
			border: 2rpx solid gray;

			font-size: 36rpx;
			font-weight: 500;
			// color: red;
		}

		.comfirm-box {
			width: 90%;
			display: flex;
			justify-content: space-between;

			.cancel {
				text-align: center;
				line-height: 78rpx;
				width: 248rpx;
				height: 78rpx;
				border: 2rpx solid #999999;
				border-radius: 10rpx;
				font-size: 34rpx;
				font-weight: 500;
				color: #333333;
			}

			.comfirm {
				text-align: center;
				width: 248rpx;
				height: 78rpx;
				background: #FF5454;
				border-radius: 10rpx;
				font-size: 34rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 78rpx;
			}
		}
	}

	.zhifu-box {
		padding: 25rpx 0 0 25rpx;
		width: 750rpx;
		height: 495rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 0rpx 0rpx;

		.zhifu-title {
			display: flex;
			flex-direction: left;
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
		}

		.zhifu-content {
			display: flex;
			justify-content: space-between;

			.bai {
				margin: 30rpx 0;
				display: flex;

				align-items: center;

				image {
					width: 45rpx;
					height: 45rpx;
				}

				text {
					margin-left: 20rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #3F454B;
				}
			}
		}

		.zhifu-bottom {
			width: 750rpx;
			position: absolute;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.zhifu-left {
				display: flex;
				align-items: center;

				text:nth-child(1) {
					font-size: 28rpx;
					font-weight: 400;
					color: #3F454B;
				}

				text {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF4C4C;
					line-height: 55px;
				}
			}

			.zhifu-right {
				line-height: 98rpx;
				text-align: center;
				width: 360rpx;
				height: 98rpx;
				background: #FF4C4C;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

	}
</style>