wlg/pages/game/gameDetail.vue

<template>
	<view class="content">
		<view class="game-top-bg">
			<image src="../../static/game/game06.png" mode=""></image>
			<view class="hl"><image src="../../static/game/game3.gif" mode=""></image></view>
			<view class="tz"><image src="../../static/game/game2.gif" mode=""></image></view>
			<view class="game-top-time">
				第{{ guaishouList.stage }}期

				<view class="yueyue" v-if="isGb">
					&nbsp;&nbsp;距离种茶
					<span>{{ state == 0 ? '开始' : '结束' }}</span>
					仅剩
					<span v-if="state == 0">
						<span>{{ kai.day }}</span>
						天
						<span>{{ kai.hours }}</span>
						时
						<span>{{ kai.minutes }}</span>
						分
						<span>{{ kai.seconds }}</span>
						秒
					</span>
					<span v-else>
						<span>{{ hour.day }}</span>
						天
						<span>{{ hour.hours }}</span>
						时
						<span>{{ hour.minutes }}</span>
						分
						<span>{{ hour.seconds }}</span>
						秒
					</span>
				</view>
				<view class="yueyue" style="margin-left: 200rpx;" v-else>已结束</view>
			</view>
			<view class="game-top-xl">
				<view class="xl" v-if="guaishouList.number != guaishouList.money * 1">血量值:&nbsp;{{ 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="#08D29B"
						infoColor="#fff"
						:isActiveCircular="false"
						barBorderRadius="20px"
						:disabled="true"
						infoContent="value"
						infoEndText="%"
						handleWidth="0"
						infoFontSize="24px"
						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期数Id:{{ guaishouList.stage }}</view>
			<!-- <view class="gl"><image src="../../static/game/game08.png" mode=""></image></view> -->
		</view>
		<view class="edu">本次参与额度:1~{{ guaishouList.upper_limit * 1 }},单次投注最高额度{{ guaishouList.single * 1 }}</view>
		<view class="bottom-box flex">
			<image class="gl" @click="navTo('/pages/game/gl')" src="../../static/game/game08.png" mode=""></image>
			<view class="button">
				<image v-if="isGoumai == false" src="../../static/game/game07.png" mode="" @click="yue"></image>
				<image v-else src="../../static/game/game10.png" mode=""></image>
			</view>
			<image class="ssh" @click="navTo('/pages/game/jlDetil')" src="../../static/game/game14.png" mode=""></image>
		</view>
		<view class="u-table">
			<view class="column">
				<view class="table-box" @click="navTo('../user/purpleJf')">
					<view class="table-img"><image src="../../static/game/game04.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 class="table-box" @click="navTo('../user/shopJf')">
					<view class="table-img2"><image src="../../static/game/game05.png" mode=""></image></view>
					<view class="table-title">
						<view class="table-top">{{ userInfo.business_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/whiteJf')">
					<view class="table-img3"><image src="../../static/game/game03.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('/pages/user/greenJf')">
					<view class="table-img4"><image src="../../static/game/game02.png" mode=""></image></view>
					<view class="table-title">
						<view class="table-top">{{ greenDe }}</view>
						<view class="table-top">我的水滴</view>
					</view>
				</view>
			</view>
		</view>
		<view class="daoj-box">
			<view class="daoj-title">道具专区</view>
			<view class="daoj-main flex" @click="navTo('/pages/user/greenChange')">
				<view class="daoj-item flex">
					<image class="daoj-bg" src="../../static/game/game12.png" mode=""></image>
					<view class="daoj-info">
						<view class="daoj-font">洒水桶*1</view>
						<view class="daoj-font">70水滴</view>
						<view class="btn">立即兑换</view>
					</view>
				</view>
				<view class="daoj-item flex daoj-item2">
					<image class="daoj-bg" src="../../static/game/game13.png" mode=""></image>
					<view class="daoj-info">
						<view class="daoj-font">洒水桶*5</view>
						<view class="daoj-font">350水滴</view>
						<view class="btn2">立即兑换</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="input-box"><input class="input" type="text" v-model="goodsNumber" placeholder-class="placeholder" placeholder="请填写积分数量" /></view>
				<!-- <view class="yue-content">请填写积分数量</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 } 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 {
			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']),
		getJd() {
			return (this.guaishouList.number / this.guaishouList.money) * 1 * 100;
		}
	},
	// 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;
		this.getDTime();
		let obj = this;
		const time = setInterval(function() {
			obj.bianhua++;
			if (obj.bianhua == 2) {
				clearInterval(time);
			}
		}, 6);
	},
	onShow() {
		// 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();
	},
	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, '率积分');
			});
		},
		getDetail() {
			getGameDetail({
				id: this.uid
			}).then(res => {
				this.guaishouList = res.data;
				console.log(res.data, 'res.data');
			});
		},
		//计算倒计时
		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.$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 => {});
					if (obj.hour.day == 0 && obj.hour.hours == 0 && obj.hour.minutes == 0 && obj.hour.seconds == 0) {
						obj.isGb = false;
					}
				}
			});
		},
		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();
		},
		//抢购数量确认
		quire() {
			console.log(this.goodsNumber, 'this.goodsNumber');

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

				uni.showToast({
					title: '投注成功',
					duration: 2000
				});
				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: #f2ffec;
	width: 750rpx;
	height: 100%;
	padding: 0;
	margin: 0;
}
.content {
	padding-bottom: 50rpx;
}

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

.game-top-bg {
	position: relative;
	width: 750rpx;
	height: 650rpx;

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

.hl {
	position: absolute;
	top: 320rpx;
	left: 30rpx;
	width: 225rpx;
	height: 218rpx;
}

.tz {
	position: absolute;
	top: 400rpx;
	left: 0;
	width: 100%;
	height: 360rpx;
}

.game-top-time {
	line-height: 50rpx;
	padding-left: 100rpx;
	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;
		font-size: 28rpx;
	}

	span {
		width: 42rpx;
		height: 42rpx;
		background: #5655ef;
		border-radius: 10rpx;
	}
}

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

	// line-height: 75rpx;
	.xl {
		font-size: 34rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.xl-t {
		margin-top: 10rpx;
		// 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: 575rpx;
	left: 210rpx;
	width: 340rpx;
	height: 60rpx;
	background: #000000;
	opacity: 0.64;
	border-radius: 20rpx;
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
	line-height: 60rpx;
}

.edu {
	margin: 20rpx auto;
	width: 700rpx;
	height: 50rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #ffffff;
	background: #1b1e2f;
	opacity: 0.57;
	border-radius: 25rpx;
	line-height: 50rpx;
	text-align: center;
}

.bottom-box {
	padding: 0 20rpx;
	.gl {
		width: 140rpx;
		height: 166rpx;
	}
	.button {
		width: 430rpx;
		height: 120rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.ssh {
		width: 110rpx;
		height: 136rpx;
	}
}
.u-table {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin: 20rpx 30rpx;
	width: 688rpx;
	height: 488rpx;
	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: 244rpx;
		position: absolute;
		height: 2rpx;
		background: #08d29b;
	}

	.bb {
		width: 2rpx;
		height: 488rpx;
		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: 130rpx;
			height: 130rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
		.table-img2 {
			width: 108rpx;
			height: 106rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
		.table-img3 {
			width: 100rpx;
			height: 110rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
		.table-img4 {
			width: 72rpx;
			height: 110rpx;

			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;
			}
		}
	}
}

.daoj-box {
	margin: 20rpx auto 0;
	width: 688rpx;
	background: #ffffff;
	border: 4rpx solid #08d29b;
	box-shadow: 0px 0px 29rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 29rpx;
	.daoj-title {
		width: 250rpx;
		height: 80rpx;
		line-height: 90rpx;
		background: #08d29b;
		border-radius: 14rpx 0px 86rpx 0px;
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		line-height: 80rpx;
		text-align: center;
	}
	.daoj-main {
		padding: 30rpx 20rpx 50rpx;
		.daoj-item2 {
			background: linear-gradient(90deg, #7679ef, #5255c4) !important;
		}
		.daoj-item {
			justify-content: flex-start;
			width: 314rpx;
			background: linear-gradient(90deg, #ffc65e, #fca315);
			border-radius: 14rpx;
			padding: 10rpx 14rpx 20rpx 10rpx;
			.daoj-bg {
				width: 140rpx;
				height: 140rpx;
			}
			.daoj-info {
				margin-left: 10rpx;
				.daoj-font {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
				}
				.btn {
					width: 150rpx;
					height: 40rpx;
					background: #ffffff;
					border-radius: 35rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #fca315;
					line-height: 40rpx;
					text-align: center;
				}
				.btn2 {
					width: 150rpx;
					height: 40rpx;
					background: #ffffff;
					border-radius: 35rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #5557c7;
					line-height: 40rpx;
					text-align: center;
				}
			}
		}
	}
}

.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;
	}
	.input-box {
		padding: 10rpx;
		border: 1px #000 solid;
		border-radius: 10rpx;
	}
	.input {
		width: 400rpx;
		height: 60rpx;
		font-size: 40rpx;
	}

	.placeholder {
		font-size: 40rpx;
	}

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

	.yue-content {
		font-size: 30rpx;
		font-weight: 500;
		color: #0c1732;
	}

	.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>