jingcai/pages/index/entertainment.vue

<template>
	<view class="all">
		<template v-if="!upOnBtnData.show">
			<view class="padding-t-30"></view>
			<view class="tab">
				<view class="flex">
					<view class="tab-item " @click="changeTab(item,ind)" :class="{action:actionIndex==ind}"
						v-for="(item,ind) in gameList">
						{{item.name}}
					</view>
				</view>
				<l-echart class="top" ref="chart"></l-echart>
			</view>

			<view class="center flex">
				<!-- 左 -->
				<view class="le">
					<view class="tit flex-start">
						<view class="ti1">{{$t('enter.u1')}}</view>
						<view class="ti2">({{$t('enter.u2')}})</view>
					</view>
					<view class="he">
						<view class="numbox flex-start">
							<view class="he1 flex" @click="gameMoneyValue=it" v-for="it in arMoneyList">
								<view class="wen">{{it}}</view>
							</view>
						</view>
					</view>
					<view class="yi flex-start">
						<image class="img" src="../../static/icon/le.png" mode=""></image>
						<view class="wz padding-l-10">{{history.base.token}}</view>
						<view class="qx padding-l-10" v-if="history.next.id">{{history.next.no}}</view>
					</view>
					<view class="shu">
						0.064489
					</view>
				</view>
				<!--右 -->
				<view class="ri">
					<view class="ti flex-center">
						<view class="t1">{{$t('enter.u3')}}</view>
						<view class="t2 padding-l-10">{{history.base.timebar}}</view>
					</view>

					<view class="dh">
						<input class="input" type="number" v-model="gameMoneyValue">
					</view>
					<view class="btn">
						<view class="bt flex">
							<view class="btnItem btnle" @click="onbet(2)">
								<image class="imag" src="../../static/icon/xia.png" mode=""></image>
								<text class="xia">{{$t('enter.u4')}}</text>
							</view>
							<view class="btnItem btnri" @click="onbet(1)">
								<image class="imag" src="../../static/icon/shang.png" mode=""></image>
								<text class="xia">{{$t('enter.u6')}}</text>
							</view>
						</view>
						<view class="bt flex">
							<view class="btnItem btnle" @click="onbet(3)">
								<view class="xia">{{$t('enter.u5')}}</view>
							</view>
							<view class="btnItem btnri" @click="onbet(4)">
								<view class="xia">{{$t('enter.u7')}}</view>
							</view>
						</view>
					</view>

					<view class="db flex">
						<view class="jl">{{$t('enter.u8')}}</view>
						<view class="sj">
							<text v-if="time.H<10">0</text>
							{{time.H}}
						</view>
						<view class="sj">
							<text v-if="time.M<10">0</text>
							{{time.M}}
						</view>
						<view class="sj">
							<text v-if="time.S<10">0</text>
							{{time.S}}
						</view>
					</view>
				</view>
			</view>
			<view class="kb"></view>

			<view class="last">
				<view class="flex">
					<text>{{$t('enter.u9')}}</text>
					<view class="flex" @click="nav">
						<text>{{$t('enter.u10')}}</text>
						<image class="lb" src="../../static/icon/jt.png" mode=""></image>
					</view>
				</view>
			</view>

			<view class="bg">
				<view class="biaotou flex">
					<view class="biwe">{{$t('enter.u11')}}</view>
					<view class="biwe">{{$t('enter.u12')}}</view>
					<view class="biwe">{{$t('enter.u13')}}</view>
					<view class="biwe">{{$t('enter.u14')}}</view>
				</view>
				<view class="list flex" v-for="(item,ind) in betList.list" :key="ind">
					<view class="biwe flex-start">
						<view class="tr">{{history.base.token}}</view>
						<view class="nametip">{{history.base.timebar}}</view>
						<image class="zz" src="../../static/icon/shang.png" mode=""></image>
					</view>
					<view class="biwe">23.5000</view>
					<view class="biwe">23.5000</view>
					<view class="biwe flex">
						<view class="list-buttom success margin-r-10">
							{{$t('enter.u17')}}
						</view>
						<view class="list-buttom primary">
							{{$t('enter.u18')}}
						</view>
					</view>
				</view>
			</view>


			<view class="chz flex">
				<view>
					<view class="yue padding-b-10">{{$t('enter.u15')}}</view>
					<view class="yes">{{userWallet}}U</view>
				</view>
				<view class="flex-start" @click="navC">
					<view class="quc">{{$t('enter.u16')}}</view>
					<image class="choz" src="../../static/icon/jt.png" mode=""></image>
				</view>
			</view>
			<taber tab='entertainment'></taber>
		</template>
		<template v-if="upOnBtnData.show">
			<view class="page">

				<view>
					<view class="pay-title">
						<text v-show="AffirmStatus === 1">请输入6位支付密码</text>
						<text v-show="AffirmStatus === 2">请设置6位支付密码</text>
						<text v-show="AffirmStatus === 3">请确认6位支付密码</text>
					</view>
					<view class="pay-password" @click="onPayUp">
						<view class="list">
							<text v-show="passwordArr.length >= 1">●</text>
						</view>
						<view class="list">
							<text v-show="passwordArr.length >= 2">●</text>
						</view>
						<view class="list">
							<text v-show="passwordArr.length >= 3">●</text>
						</view>
						<view class="list">
							<text v-show="passwordArr.length >= 4">●</text>
						</view>
						<view class="list">
							<text v-show="passwordArr.length >= 5">●</text>
						</view>
						<view class="list">
							<text v-show="passwordArr.length >= 6">●</text>
						</view>
					</view>
					<view class="hint">
						<text>忘记支付密码？</text>
					</view>
				</view>
				<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>
			</view>
		</template>
	</view>
</template>

<script>
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import {
		getGame,
		gameKline,
		getGameList,
		test,
		gameWallet,
		gameBetList,
		gameBetIn
	} from "@/api/game.js";
	import {
		qianBao,
	} from "@/api/wallet.js";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import taber from "@/components/footer/footer.vue";

	export default {
		components: {
			taber,
			LEchart
		},
		computed: {
			...mapState("user", ["hasLogin"])
		},
		data() {
			return {
				arMoneyList: [
					1, 5, 10, 20, 50, 100
				],
				gameMoneyValue: 0,
				actionIndex: 0,
				// 当前游戏列表
				gameList: [],
				// 游戏信息
				history: {
					list: [], //游戏进行记录
					page: 1,
					limit: 10,
					// 基础数据
					base: {},
					next: {},
					now: {}
				},
				time: {
					H: 0,
					M: 0,
					S: 0,
					// 保存倒计时对象
					t: ''
				},
				// 游戏押注记录
				betList: {
					list: [], //游戏进行记录
					page: 1,
					limit: 10,
				},
				userWallet: 0,
				upOnBtnData: {
					show: false,
					type: ''
				},
				AffirmStatus: 1,
				passwordArr: [],
				oldPasswordArr: [],
				newPasswordArr: [],
				afPasswordArr: [],
			};
		},
		onLoad() {

		},
		onShow() {
			if (!this.hasLogin) {
				uni.showModal({
					title: "登陆",
					content: '您未登录！是否马上登录？',
					success: (e) => {
						// 判断是否点击确认按钮
						if (e.confirm) {
							// 保存当前页面地址
							saveUrl()
							// 跳转页面
							interceptor()
						}
					}
				})
				return
			}
			this.getUserWallet();

		},
		// 关闭循环
		onHide() {
			clearInterval(this.time.t)
		},
		methods: {
			onbet(type) {
				this.upOnBtnData.type = type;
				this.upOnBtnData.show = true;
				this.$refs.CodeKeyboard.show();
			},

			KeyInfo(val) {
				if (val.index >= 6) {
					return;
				}
				// 判断是否输入的是删除键
				if (val.keyCode === 8) {
					// 删除最后一位
					this.passwordArr.splice(val.index + 1, 1)
				}
				// 判断是否输入的是.
				else if (val.keyCode == 190) {
					// 输入.无效
				} else {
					this.passwordArr.push(val.key);
				}

				uni.showModal({
					title: '温馨提示',
					content: '输入密码是 = ' + JSON.stringify(this.passwordArr)
				})
			},
			// 参与压住
			gameBetIn(type) {

			},
			// 获取用户余额信息
			getUserWallet() {
				gameWallet().then((res) => {
					this.userWallet = res.data.back.USDT.money.money
				})
				if (this.history.next.id) {
					this.opTiem();
				} else {
					this.gameInit();
				}
			},
			// 开始倒计时
			async opTiem() {
				const that = this;
				try {
					// 关闭循环
					clearInterval(that.time.t);
					if (that.history.base.id) {
						that.time.t = setInterval(() => {
							const da = (new Date()).getTime();
							const timenum = that.history.next.open_time * 1000 - da;
							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) {
								clearInterval(that.time.t);
								setTimeout(() => {
									test();
									setTimeout(() => {
										this.gameDataInit(that.gameList[that.actionIndex].id)
									}, 1000)
								}, 3000)

							}
						}, 1000)
					}
				} catch (e) {
					console.log(e, '定时');
				}

			},
			changeTab(item, ind) {
				if (ind != this.actionIndex) {
					this.actionIndex = ind;
					this.gameDataInit(item.id);
				}
			},
			async gameInit() {
				try {
					await test();
					// 获取游戏列表
					await this.getGameList();
					// 加载游戏数据
					this.gameDataInit(this.history.next.id || this.gameList[0].id)

				} catch (e) {
					console.log(e, 'cuowu');
				}
			},
			// 加载游戏列表
			getGameList() {
				return getGameList().then((res) => {
					this.gameList = res.data.list;
				})
			},
			// 加载基础游戏信息
			async gameDataInit(id) {
				// 获取基础信息
				await this.getGame(id);
				//获取K线
				this.getGameKline();
				// 获取游戏压住记录
				this.gameBetList();
			},
			// 获取游戏压住记录
			gameBetList() {
				gameBetList({
					page: 1,
					limit: 10,
					id: this.history.base.id
				}).then((res) => {
					this.betList.list = res.data.bet_log;
				})
			},
			// 获取游戏K线信息
			getGameKline() {
				const that = this;
				gameKline({
					page: 1,
					limit: 60
				}, that.history.base.id).then((res) => {
					let list = res.data.list.reverse();
					// x轴记录
					let xarr = [];
					// 打点数据
					let linearr = [];
					for (let i = 0; i < list.length; i++) {
						const ll = list[i];
						const time = new Date(+ll.ts);
						const addar = [+(+ll.o).toFixed(5), +(+ll.c).toFixed(5), +(+ll.l).toFixed(5), +(+ll.h)
							.toFixed(5)
						];
						xarr.push(`${time.getHours()}:${time.getMinutes()}`)
						linearr.push(addar)
					}
					that.$nextTick(() => {
						that.initKline({
							xarr,
							linearr
						})
					})
				})
			},
			// 获取当前项目信息
			getGame(type) {
				const that = this;
				return getGame({
					page: that.history.page,
					limit: that.history.limit
				}, type).then(({
					data
				}) => {
					that.history.list = data.list || [];
					that.history.base = data.game || {};
					that.history.next = data.next_game || {};
					that.history.now = data.now_game || {};
					if (that.history.next) {
						that.opTiem();
					}
				})
			},
			// 均值计算
			calculateMA(dayCount, data) {
				var result = [];
				for (var i = 0, len = data.linearr.length; i < len; i++) {
					if (i < dayCount) {
						result.push('-');
						continue;
					}
					var sum = 0;
					for (var j = 0; j < dayCount; j++) {
						sum += data.linearr[i - j][1];
					}
					result.push(+(sum / dayCount).toFixed(5));
				}
				return result;
			},

			async initKline(data) {
				const that = this;
				try {
					const chart = await this.$refs.chart.init(echarts);
					const upColor = '#00da3c';
					const downColor = '#ec0000';
					chart.setOption(
						(this.option = {
							animation: false,
							legend: {
								top: 10,
								left: 10,
								data: ['MA5', 'MA10', 'MA20'],
								textStyle: {
									color: '#999999'
								}
							},
							tooltip: {
								trigger: 'axis',
								axisPointer: {
									type: 'cross'
								},
								borderWidth: 1,
								borderColor: '#ccc',
								padding: 10,
								textStyle: {
									color: '#000'
								},
								position: function(pos, params, el, elRect, size) {
									const obj = {
										top: 10
									};
									obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 40;

									return obj;
								}
							},
							dataZoom: [{
								type: 'inside',
								xAxisIndex: 0,
								start: 50,
								end: 100
							}],
							grid: [{
								left: 10,
								right: 55,
								bottom: 20,
								top: 45
							}],
							xAxis: [{
								type: 'category',
								data: data.xarr,
								axisLine: {
									onZero: false
								},
								splitLine: {
									show: false
								},
								min: 'dataMin',
								max: 'dataMax',
								axisPointer: {
									z: 100
								}
							}],
							yAxis: [{
								scale: true,
								splitNumber: 4,
								position: 'right',
								axisTick: {
									show: false
								},
								splitLine: {
									show: false,
									lineStyle: {
										color: '#e3e3e3'
									}
								},
								axisLabel: {
									inside: false,
									formatter: '{value}\n',
									color: '#999999'
								}
							}],
							series: [{
									name: that.history.base.token + '-USDT',
									type: 'candlestick',
									data: data.linearr,
									itemStyle: {
										color: upColor,
										color0: downColor,
										borderColor: undefined,
										borderColor0: undefined
									}
								},
								{
									name: "MA5",
									smooth: true,
									type: 'line',
									data: that.calculateMA(5, data),
									showSymbol: false,
									lineStyle: {
										width: 1
									}
								},
								{
									name: "MA10",
									smooth: true,
									type: 'line',
									data: that.calculateMA(10, data),
									showSymbol: false,
									lineStyle: {
										width: 1
									}
								},
								{
									name: "MA20",
									smooth: true,
									type: 'line',
									data: that.calculateMA(20, data),
									showSymbol: false,
									lineStyle: {
										width: 1
									}
								},
							]
						}),
						true
					)

				} catch (e) {
					console.log(e, 'cuowu');
					//TODO handle the exception
				}

			},

			// 页面逻辑
			nav() {
				uni.navigateTo({
					url: "/pages/history/history",
				});
			},
			navC() {
				uni.navigateTo({
					url: "/pages/recharge/recharge",
				});
			},
		},
	};
</script>

<style lang="scss">
	.all {
		width: 750rpx;
		/* height: 2500rpx; */
		height: 100%;
		padding-top: var(--status-bar-height);
		padding-bottom: 30rpx;
	}

	$base: orangered; // 基础颜色

	.page {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;

		.pay-title {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 200rpx;

			text {
				font-size: 28rpx;
				color: #555555;
			}
		}

		.pay-password {
			display: flex;
			align-items: center;
			width: 90%;
			height: 80rpx;
			margin: 20rpx auto;
			border: 2rpx solid $base;

			.list {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 16.666%;
				height: 100%;
				border-right: 2rpx solid #EEEEEE;

				text {
					font-size: 32rpx;
				}
			}

			.list:nth-child(6) {
				border-right: none;
			}
		}

		.hint {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100rpx;

			text {
				font-size: 28rpx;
				color: $base;
			}
		}
	}


	.tab {
		padding: 30rpx 20rpx;
		margin: 0 30rpx;
		background-color: #191A1F;
		border-radius: 20px;

		.tab-item {
			color: #FFF;
			font-size: $font-sm;
			padding: 0 20rpx;
			padding-bottom: 10rpx;

			&.action {
				color: #F5A944;
				border-bottom: 1px solid #F5A944;
			}
		}

		.top {
			height: 530rpx;
			width: 100%;
		}
	}

	.center {
		padding: 30rpx;
		line-height: 1;
		align-items: flex-start;

		.le,
		.ri {
			width: 50%;
		}

		.le {
			.tit {
				font-weight: bold;

				.ti1 {
					font-size: 26rpx;
					color: #ffffff;
				}

				.ti2 {
					font-size: 22rpx;
					padding-left: 10rpx;
					color: #999999;
				}
			}

			.he {
				padding-top: 40rpx;

				.numbox {
					flex-wrap: wrap;

					.he1 {
						background: #fdaf41;
						border-radius: 10rpx;
						margin-bottom: 40rpx;
						margin-right: 20rpx;
						width: 84rpx;
						height: 84rpx;
						justify-content: center;

						.wen {
							font-size: 30rpx;
							font-weight: bold;
							color: #000000;
						}
					}
				}
			}

			.yi {
				color: #ffffff;
				font-size: $font-base;

				.img {
					width: 41rpx;
					height: 42rpx;
				}

				.wz {
					font-weight: bold;
				}
			}

			.shu {
				padding-top: 10rpx;
				font-size: 51rpx;
				font-weight: bold;
				color: #fdb242;
			}

		}

		.ri {
			.ti {
				font-size: 26rpx;
				font-weight: bold;

				.t1 {
					color: #ffffff;
				}

				.t2 {
					color: #fdaf41;
				}
			}

			.dh {
				width: 100%;
				padding: 20rpx 30rpx;
				margin-top: 30rpx;
				background: #efefef;
				border-radius: 10rpx;

				.te {
					font-size: 44rpx;
					font-weight: 800;
					color: #000000;
				}
			}

			.btn {
				padding-top: 30rpx;

				.bt {
					padding-bottom: 10rpx;

					.btnItem {
						width: 49%;
						height: 70rpx;
						line-height: 70rpx;
						text-align: center;

						.imag {
							width: 32rpx;
							height: 20rpx;
						}

						.xia {
							font-size: 28rpx;
							font-weight: 800;
							color: #ffffff;
						}

					}

					.btnle {
						border-radius: 50rpx 0 0 50rpx;
						background-color: #df5660;

					}

					.btnri {
						border-radius: 0 50rpx 50rpx 0;
						background-color: #5bb786;
					}
				}
			}

			.db {
				justify-content: flex-end;
				padding-top: 30rpx;

				.jl {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}

				.sj {
					width: 40rpx;
					height: 40rpx;
					background: #bfbfbf;
					border-radius: 3rpx;
					text-align: center;
					line-height: 40rpx;
					margin-left: 10rpx;
				}

			}
		}
	}

	.kb {
		width: 750rpx;
		height: 20rpx;
		background-color: #191a1f;
	}

	.last {
		padding: 30rpx;
		line-height: 1;
		font-size: 24rpx;
		font-weight: 800;
		color: #fff;

		.lb {
			width: 14rpx;
			height: 20rpx;
			margin-left: 10rpx;
		}

	}





	.bg {
		padding: 0 30rpx;
		background-color: #000000;
		color: #fff;
		text-align: center;
		font-size: 28rpx;
		padding-bottom: 30rpx;

		.biaotou {
			font-weight: 800;
			padding-bottom: 10rpx;
		}

		.biwe {
			width: 25%;

			.zz {
				width: 22rpx;
				height: 14rpx;
				margin-left: 8rpx;
			}

			.nametip {
				font-size: 18rpx;
				color: #999999;
				padding-left: 8rpx;
			}
		}

		.biwe:nth-child(1) {
			flex-shrink: 0;
			text-align: left;
			align-items: flex-end;
		}

		.biwe:nth-child(4) {
			flex-shrink: 0;
			width: 200rpx;
		}

		.list {
			font-weight: bold;
			padding: 20rpx 0;
			border-bottom: 1px solid rgba(43, 42, 38, 0.52);
		}

		.list-buttom {
			width: 100rpx;
			border-radius: 30rpx;
			font-size: 16rpx;
			padding: 10rpx 0;

			&.success {
				background: #25b287;
			}

			&.primary {
				background: #01ebf6;
				color: #000000;
			}
		}
	}

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

		.yue {
			font-size: 28rpx;
		}

		.yes {
			color: #fdaf41;
		}

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

		.choz {
			width: 22rpx;
			height: 14rpx;
		}
	}
</style>