PKR/pages/index/entertainment.vue

<template>
	<view class="all">
		<view class="padding-t-30"></view>
		<view class="top-content">
			<view class="top-one flex">
				<view class="action-title">
					<text v-if="history.next">{{$t('indexenter.第')}}{{history.next.no}}{{$t('indexenter.期')}}</text>
					<text v-else>loading...</text>
				</view>
				<view class="end-time">
					<text>{{$t('indexenter.距离结束')}}</text>
					<text class="time">
						<text v-if="time.H<10">0</text>
						{{time.H}}:
						<text v-if="time.M<10">0</text>
						{{time.M}}:
						<text v-if="time.S<10">0</text>
						{{time.S}}
					</text>
				</view>
			</view>
			<view class="top-two flex" v-if="history.list.length>0">
				<view class="old-title flex-start">
					<text>{{$t('indexenter.第')}}{{history.list[0].no}}{{$t('indexenter.期')}}</text>
					<image v-for="ls in history.list[0].result_info" class="dice"
						:src="`../../static/img/dice${ls}.png`" mode="scaleToFill"></image>
				</view>
				<view class="old-num">
					<!-- {{$t('indexenter.竞猜数')}}:10 -->
					{{$t('indexenter.结果')}}:
					<text class="margin-l-10"
						v-for="ll in history.list[0].typelist">{{$t(`indexenter.${ll.type}`)}}</text>
				</view>
			</view>
		</view>

		<view class="number flex">
			<view class="item-num" :class="{action:ind==actiontype}" v-for="(item,ind) in history.base.include_function"
				@click="actiontype=ind">
				<view class="type">
					{{$t(`indexenter.${item.name}`)}}
				</view>
				<view class="percentage">
					{{item.bfb}}%
				</view>
			</view>
		</view>
		<view class="money-list flex">
			<view class="list-ls flex" @click="upOnBtnData.value=item.value" v-for="(item,ind) in moneyList">
				<view class="image">
					<image class="img" :src="item.url" mode="widthFix"></image>
				</view>
				<view class="list">
					{{item.value}}
				</view>
			</view>
		</view>
		<view class="pay-title padding-l-30">
			{{$t('indexenter.竞猜总额')}}(USDT)：
		</view>
		<view class="pay-money-box flex padding-c-30 padding-v-10">
			<input class="pay-money" type="number" v-model="upOnBtnData.value" />
			<view class="buttom-del" @click="upOnBtnData.value=0">
				{{$t('indexenter.清空')}}
			</view>
		</view>
		<view class="pay-title padding-c-30 flex padding-v-20">
			<view>
				{{$t('indexenter.竞猜总额')}}：
			</view>
			<view class="font-color-yellow">
				0
				USDT
			</view>
		</view>
		<view class="push-buttom" @click="onPayBet">
			{{$t('indexenter.确认')}}
		</view>

		<view class="chz flex" @click="nav('/pages/user/money/recharge')">
			<view>
				<view class="yue padding-b-10">{{$t('enter.u15')}}</view>
				<view class="yes">{{userWallet}}USDT</view>
			</view>
			<view class="flex-start">
				<view class="quc">{{$t('enter.u16')}}</view>
				<image class="choz" src="../../static/img/img39.png" mode="scaleToFill"></image>
			</view>
		</view>

		<view class="history-title padding-l-30 margin-t-30 flex-start">
			<view :class="{action:historyType==0}" @click="historyType=0">
				{{$t('indexenter.押注记录')}}
			</view>
			<view class="margin-l-30" :class="{action:historyType==1}" @click="historyType=1">
				{{$t('indexenter.近期记录')}}
			</view>
		</view>

		<view class="history-list">
			<view class="history-title-type flex">
				<view class="history-item">
					{{$t('indexenter.期号')}}
				</view>
				<view class="history-item" v-if="historyType==0">
					{{$t('indexenter.竞猜值')}}
				</view>
				<view class="history-item">
					{{$t('indexenter.竞猜数')}}
				</view>
				<view class="history-item">
					{{$t('indexenter.结果')}}
				</view>
			</view>
			<view class="history-title-type flex margin-t-30" v-for="(item,ind) in betList.list" :key="ind"
				v-if="historyType==0">
				<view class="history-item font-color-yellow"
					:class="{'font-color-gray':item.result==0,'font-color-red':item.result==1}">
					{{item.room.no}}
				</view>
				<view class="history-item font-color-red">
					<text class="margin-l-10" v-for="(ll,ind) in history.base.include_function"
						v-if="item.bet==ll.id">{{$t(`indexenter.${ll.name}`)}}</text>
				</view>
				<view class="history-item font-color-red">
					{{item.room.result_info||$t('enter.a2')}}
				</view>
				<view class="history-item font-color-yellow" v-if="item.typelist.length>0">
					<text class="margin-l-10" v-for="ll in item.typelist">{{$t(`indexenter.${ll.type}`)}}</text>
				</view>
				<view class="history-item font-color-yellow" v-else>
					{{$t('enter.a2')}}
				</view>
			</view>
			<view class="history-title-type flex margin-t-30" v-for="(item,ind) in history.list" :key="ind"
				v-if="historyType==1">
				<view class="history-item font-color-yellow"
					:class="{'font-color-gray':item.result==0,'font-color-red':item.result==1}">
					{{item.no}}
				</view>
				<!-- <view class="history-item font-color-red">
					<text class="margin-l-10"
						 v-for="(ll,ind) in history.base.include_function" v-if="item.bet==ll.id">{{$t(`indexenter.${ll.name}`)}}</text>
				</view> -->
				<view class="history-item font-color-red flex">
					<image v-for="ls in item.result_info" class="dice-number" :src="`../../static/img/dice${ls}.png`"
						mode="scaleToFill"></image>
				</view>
				<view class="history-item font-color-yellow" v-if="item.typelist.length>0">
					<text class="margin-l-10" v-for="ll in item.typelist">{{$t(`indexenter.${ll.type}`)}}</text>
				</view>
				<view class="history-item font-color-yellow" v-else>
					{{$t('enter.a2')}}
				</view>
			</view>
		</view>


		<uni-popup type="bottom" ref="popup" :mask-click="false" @maskClick='colsePayPassword'>
			<inputPassword @commit='KeyInfo' @colse='colsePayPassword'></inputPassword>
		</uni-popup>
	</view>
</template>

<script>
	import {} from "@/api/game.js";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getGame,
		getGameList,
		gameWallet,
		gameBetList,
		gameBetIn,
		// gameTest
	} from "@/api/game.js";
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import {
		getTime
	} from '@/utils/rocessor.js';
	import inputPassword from "@/components/input-password/input-password.vue";
	export default {
		components: {
			inputPassword
		},
		computed: {
			...mapState("user", ["hasLogin"]),
		},
		data() {
			return {
				historyType: 0, //记录类型
				// 当前选中的大小奇偶
				actiontype: 0,
				id: '',
				moneyList: [{
						url: '/static/img/money_pay_1.png',
						value: 5
					}, {
						url: '/static/img/money_pay_2.png',
						value: 10
					},
					{
						url: '/static/img/money_pay_3.png',
						value: 30
					},
					{
						url: '/static/img/money_pay_4.png',
						value: 50
					}
				],
				// 游戏信息
				time: {
					H: 0,
					M: 0,
					S: 0,
					// 保存倒计时对象
					t: ''
				},
				// 游戏信息
				history: {
					list: [], //游戏进行记录
					page: 1,
					limit: 10,
					// 基础数据
					base: {},
					next: "",
					now: {}
				},
				// 游戏押注记录
				betList: {
					list: [], //游戏进行记录
					page: 1,
					limit: 5,
				},
				userWallet: 0,
				upOnBtnData: {
					type: '',
					// 当前输入的密码
					passwordArr: '',
					value: 0,
				},
				// 保存获取下次游戏对象
				getNextTimeObj: '',
				loadPage:true,
			};
		},
		onLoad(option) {
			this.id = option.id;
			uni.setNavigationBarTitle({
				title: option.title
			});
		},
		onShow() {
			if (!this.hasLogin) {
				uni.showModal({
					title: this.$t('enter.c4'),
					content: this.$t('enter.b5'),
					cancelText: this.$t('indexenter.取消'),
					confirmText: this.$t('indexenter.确定'),
					success: (e) => {
						// 判断是否点击确认按钮
						if (e.confirm) {
							// 保存当前页面地址
							saveUrl()
							// 跳转页面
							interceptor()
						}
					}
				})
				return
			}
			this.getUserWallet();
			this.gameInit(this.id);
		},
		// 关闭循环
		onHide() {
			const that = this;
			// 倒计时清理
			that.initData();
		},
		onUnload() {
			const that = this;
			that.initData();
		},
		methods: {
			getTime,
			// 初始化
			gameInit(id) {
				console.log('id', id);
				// await gameTest();
				// 获取基础信息
				this.getGame(id);
			},
			// 获取游戏信息
			getGame(id) {
				const that = this;
				getGame({
					page: that.history.page,
					limit: that.history.limit
				}, id).then(({
					data
				}) => {
					that.history.base = data.game || {};
					that.history.base.include_function = that.history.base.include_function.map((res) => {
						res.bfb = res.ratio * 1 * that.history.base.success_ratio / 100;
						return res
					})
					that.history.next = data.now_game || '';
					that.history.now = data.now_game || '';

					if (data.list) {
						that.history.list = data.list.map((res) => {
							res.result_info = res.result_info.split(",");
							res.typelist = that.resultLottery(res.result);
							return res
						});
						console.log(that.history.list, 'that.history.list');
					} else {
						that.history.list = [];
					}
					// 判断是否不存在游戏，并且没有倒计时对象，且在当前页面
					if (that.loadPage && !that.history.next) {
						that.getNextTimeObj = setTimeout(() => {
							that.getGame(id)
						}, 1000)
						return
					}
					if (that.history.next && that.getNextTimeObj) {
						clearTimeout(that.getNextTimeObj);
						// 清空倒计时对象
						that.getNextTimeObj = '';
					}
					// 判断是否有活动并且正在进行中
					if (that.history.next && !that.getNextTimeObj) {
						that.opTiem();
						that.gameBetList()
					}
				})
			},
			// 处理中奖信息数据
			resultLottery(st) {
				const that = this;
				let typelist = [];
				if (st) {
					st.split(",").forEach((r) => {
						const ar = r.split(':');
						if (ar[1] == '1') {
							for (let i = 0; i < that.history.base.include_function.length; i++) {
								if (that.history.base.include_function[i].id == ar[0] * 1) {
									typelist.push({
										type: that.history.base.include_function[i].name
									})
									break
								}
							}
						}
					});
				}
				return typelist
			},
			// 游戏押注记录
			gameBetList() {
				const that = this;
				if (that.historyType == 0) {
					const lineNum = that.history.base.decimal;
					gameBetList({
						page: 1,
						limit: 10,
						id: that.history.base.id,
					}).then(({
						data
					}) => {
						that.betList.list = data.bet_log.map((res) => {
							res.typelist = that.resultLottery(res.room.result);
							return res
						});
					})
				}

			},
			// 开始倒计时
			async opTiem() {
				const that = this;
				try {
					// 判斷是否有游戲信息并且有正在進行中游戏
					if (that.history.base.id && that.history.next) {
						// console.log(that.history.base.id, that.history.next,
						// 	'that.history.base.id && that.history.next');
						that.time.t = setInterval(() => {
							that.getOutTime();
						}, 1000)
					}
				} catch (e) {
					console.log(e, '定时');
				}
			},
			// 清除加载
			initData() {
				const that = this;
				that.loadPage = false;
				// 关闭倒计时
				clearTimeout(that.getNextTimeObj);
				clearInterval(that.time.t);
				// 清空倒计时对象
				that.getNextTimeObj = '';
				that.time = {
					H: 0,
					M: 0,
					S: 0,
					t: ''
				};
			},
			// 点击触发支付事件
			onPayBet() {
				if (!this.upOnBtnData.value) {
					uni.showToast({
						title: this.$t('enter.a9'),
						icon: "error"
					})
					return
				}
				if (!this.history.next) {
					uni.showModal({
						title: this.$t('enter.c4'),
						content: this.$t('enter.a3'),
						showCancel: false,
						confirmText: this.$t('indexenter.确定'),
					});
					return
				}
				this.upOnBtnData.type = this.history.base.include_function[this.actiontype].id;
				this.openPayPassword();
			},
			// 打开支付弹窗
			openPayPassword() {
				this.upOnBtnData.show = true;
				this.$refs.popup.open();
			},
			// 关闭支付弹窗
			colsePayPassword() {
				this.upOnBtnData.show = false;
				this.$refs.popup.close();
			},
			// 密码输入完成后调用下注
			KeyInfo(val) {
				const that = this;
				that.upOnBtnData.passwordArr = val;
				const name = that.$t(`indexenter.${that.history.base.include_function[that.actiontype].name}`)
				that.colsePayPassword();
				uni.showModal({
					title: that.$t('enter.c4'),
					content: `${that.$t('enter.a8')}${that.upOnBtnData.value}USDT${that.$t('enter.a10')}${that.history.next.no}${name}`,
					cancelText: that.$t('indexenter.取消'),
					confirmText: that.$t('indexenter.确定'),
					success: res => {
						if (res.confirm) {
							that.gameBetIn();
						}
					},
				});
			},
			// 参与压住
			gameBetIn(type) {
				const that = this;
				const upData = {
					id: that.history.next.id,
					bet: that.upOnBtnData.type,
					num: that.upOnBtnData.value,
					trade_password: that.upOnBtnData.passwordArr
				};
				uni.showLoading({
					mask: true
				})
				that.upOnBtnData.value = '';
				gameBetIn(upData).then((res) => {
					uni.hideLoading()
					uni.showToast({
						title: res.msg
					});
					that.gameBetList();
					that.getUserWallet();
				}).catch((res) => {
					uni.hideLoading();
					uni.showToast({
						title: res.msg
					});
				})
			},
			// 获取用户余额信息
			getUserWallet() {
				gameWallet().then((res) => {
					const balance = Number(res.data.back.USDT.money.money);
					this.userWallet = balance.toFixed(2);
					// this.userWallet = +res.data.back.USDT.money.money
				})
			},
			// 获取倒计时时间
			getOutTime() {
				const that = this;
				const da = (new Date()).getTime();
				const timenum = that.history.next.close_time * 1000 - da;
				// console.log(timenum, that.history.next.open_time, da, '计算');
				if (timenum > 0) {
					that.time.H = Math.floor(timenum / 1000 / 60 / 60);
					that.time.S = Math.floor(timenum / 1000 % 60)
					that.time.M = Math.floor(timenum / 1000 / 60 % 60);
				}
				if (that.time.H == 0 && that.time.M == 0 && that.time.S == 0) {
					console.log('归0');
					clearInterval(that.time.t);
					// 延时调用防止数据重复加载
					setTimeout(() => {
						that.getGame(that.history.base.id);
					}, 2000)
				}

			},
			// 页面跳转
			nav(url) {
				console.log('tz');
				if (!this.hasLogin) {
					uni.showModal({
						title: this.$t('enter.c4'),
						content: this.$t('enter.b5'),
						cancelText: this.$t('indexenter.取消'),
						confirmText: this.$t('indexenter.确定'),
						success: (e) => {
							// 判断是否点击确认按钮
							if (e.confirm) {
								// 保存当前页面地址
								saveUrl()
								// 跳转页面
								interceptor()
							}
						}
					})
					return
				}
				uni.navigateTo({
					url,
					fail(err) {
						console.log(err);
					}
				});
			},
		},
	};
</script>

<style lang="scss">
	$yellow: #FDAF41;

	.all {
		width: 750rpx;
		/* height: 2500rpx; */
		height: 100%;
		padding-top: var(--status-bar-height);
		padding-bottom: 30rpx;
		color: #FFFFFF;
	}

	.chz {
		background: #191a1f;
		border-radius: 20rpx;
		margin: 0 30rpx;
		color: #ffffff;
		font-weight: bold;
		padding: 20rpx 30rpx;

		.yue {
			font-size: 28rpx;
		}

		.yes {
			color: $color-yellow;
		}

		.quc {
			font-size: 26rpx;
			font-weight: 500;
		}

		.choz {
			width: 22rpx;
			height: 14rpx;
		}
	}

	.number {
		flex-wrap: wrap;
		padding: 70rpx;
		padding-bottom: 0;

		.item-num {
			line-height: 1;
			text-align: center;
			font-weight: bold;
			width: 260rpx;
			border-radius: 20rpx;
			margin-bottom: 70rpx;
			padding: 30rpx;
			background: linear-gradient(-74deg, rgba(206, 156, 109, 0.4), rgba(255, 236, 214, 0.4));

			&.action {
				background: linear-gradient(-74deg, #CE9C6D, #FFECD6);
			}

			.type {
				font-size: 72rpx;
			}

			.percentage {
				padding-top: 20rpx;
				font-size: $font-base;
			}
		}
	}

	.money-list {
		padding: 0 30rpx;
		color: #FFF;
		text-align: center;
		align-items: stretch;
		padding-bottom: 50rpx;

		.list-ls {
			width: 23%;
			flex-direction: column;
			align-items: stretch;
			font-size: 35rpx;
			font-weight: bold;

			.image {
				.img {
					width: 100%;
				}
			}
		}
	}

	.pay-title {
		font-size: 26rpx;
	}

	.pay-money-box {
		.pay-money {
			flex-grow: 1;
			font-size: 38rpx;
			font-weight: bold;
			color: $yellow;
		}

		.buttom-del {
			background-color: $yellow;
			border-radius: 6rpx;
			color: #000000;
			font-size: 26rpx;
			padding: 14rpx 26rpx;
			line-height: 1;
		}
	}

	.push-buttom {
		text-align: center;
		line-height: 1;
		color: #000000;
		background-color: $yellow;
		padding: 30rpx;
		margin: 30rpx;
		border-radius: 10rpx;
		margin-bottom: 40rpx;
	}

	.history-title {
		font-size: $font-lg;

		.action {
			color: $yellow;
		}
	}

	.history-list {
		line-height: 1;
		background-color: #1E1E1F;
		border-radius: 10rpx;
		padding: 30rpx;
		margin: 30rpx;

		.history-title-type {
			font-size: 24rpx;

			.history-item {
				text-align: center;
				width: 25%;

				.dice-number {
					width: 40rpx;
					height: 40rpx;
				}

				&:nth-child(1) {
					text-align: left;
					width: 30%;
				}

				&:nth-child(2) {
					width: 30%;
				}

				&:nth-child(3) {
					width: 20%;
				}

				&:nth-child(4) {
					text-align: right;
					width: 20%;
				}
			}
		}
	}

	.top-content {
		padding: 30rpx;
		color: #FFF;
		background-color: #1E1E1F;
		line-height: 1;

		.top-one {
			font-size: $font-lg;

			.time {
				padding-left: 10rpx;
				color: $color-red;
			}
		}

		.top-two {
			font-size: 26rpx;
			padding-top: 20rpx;

			.old-title {
				.dice {
					width: 54rpx;
					height: 54rpx;
					margin-left: 10rpx;
				}
			}

			.old-num {
				color: $color-yellow;
			}
		}
	}
</style>