jingcai/pages/index/entertainment.vue

<template>
	<view class="all">
		<view class="padding-t-30"></view>
		<view class="tab">
			<view class="flex-start">
				<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="upOnBtnData.value=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" :placeholder="$t('enter.a9')" type="number" v-model="upOnBtnData.value">
				</view>
				<view class="btn">
					<view class="bt flex">
						<view class="btnItem btnle" @click="onPayBet(2)">
							<image class="imag" src="../../static/icon/xia.png" mode=""></image>
							<text class="xia">{{$t('enter.u4')}}</text>
						</view>
						<view class="btnItem btnri" @click="onPayBet(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="onPayBet(3)">
							<view class="xia">{{$t('enter.u5')}}</view>
						</view>
						<view class="btnItem btnri" @click="onPayBet(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>
		<uni-popup type="bottom" ref="popup" :mask-click="false" @maskClick='colsePayPassword'>
			<view class="page">
				<view>
					<view class="pay-title">
						<text>{{$t('enter.b3')}}</text>
					</view>
					<view class="pay-password" @click="onPayUp">
						<view class="list" v-for="item in 6">
							<text v-show="upOnBtnData.passwordArr.length >= item">●</text>
						</view>
					</view>
					<view class="hint">
						<text>忘记支付密码？</text>
					</view>
				</view>
				<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"
					:viewShow="true"></cc-defineKeyboard>
			</view>
		</uni-popup>
		<taber tab='entertainment' v-if="!upOnBtnData.show"></taber>
	</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
				],
				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: '',
					// 当前输入的密码
					passwordArr: [],
					value: '',
				},
			};
		},
		onLoad() {},
		onShow() {
			if (!this.hasLogin) {
				uni.showModal({
					title: this.$t('enter.c4'),
					content: this.$t('enter.b5'),
					success: (e) => {
						// 判断是否点击确认按钮
						if (e.confirm) {
							// 保存当前页面地址
							saveUrl()
							// 跳转页面
							interceptor()
						}
					}
				})
				return
			}
			this.getUserWallet();

		},
		// 关闭循环
		onHide() {
			clearInterval(this.time.t)
		},
		methods: {
			// 点击触发支付事件
			onPayBet(type) {
				if (!this.upOnBtnData.value) {
					uni.showToast({
						title: this.$t('enter.a9'),
						icon: "error"

					})
					return
				}
				this.upOnBtnData.type = type;
				this.openPayPassword();
			},
			// 打开支付弹窗
			openPayPassword() {
				this.upOnBtnData.show = true;
				this.$refs.popup.open();
			},
			// 关闭支付弹窗
			colsePayPassword() {
				this.upOnBtnData.show = false;
				this.$refs.popup.close();
			},

			KeyInfo(val) {
				console.log(val);
				let arr = this.upOnBtnData.passwordArr;
				if (val.index >= 6) {
					return;
				}
				// 判断是否输入的是删除键
				if (val.keyCode === 8) {
					// 删除最后一位
					arr.splice(val.index + 1, 1)
				}
				// 判断是否输入的是取消案件
				else if (val.keyCode == 190) {
					this.colsePayPassword();
					// 输入.无效
				} else {
					arr.push(val.key);
				}
				// 开始交易
				if (arr.length == 6) {
					this.colsePayPassword();
					this.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.join("")
				};
				uni.showLoading({
					mask: true
				})
				gameBetIn(upData).then((res) => {
					uni.hideLoading()
				}).catch((res) => {
					uni.hideLoading();
					console.log(res)
				})
			},
			// 获取用户余额信息
			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;
					clearInterval(this.time.t)
					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, reload = true) {
				// 获取基础信息
				await this.getGame(id);
				//获取K线
				this.getGameKline(reload);
				// 获取游戏压住记录
				this.gameBetList();
			},
			// 获取游戏压住记录
			gameBetList() {
				gameBetList({
					page: 1,
					limit: 10,
					id: this.history.base.id
				}).then((res) => {
					this.betList.list = res.data.bet_log;
				})
			},
			// 获取游戏K线信息
			getGameKline(reload = true) {
				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
						}, reload)
					})
				})
			},
			// 获取当前项目信息
			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;
			},
			// 重载K线
			async initKline(data, reload = true) {
				const that = this;
				try {
					const chart = await this.$refs.chart.init(echarts);
					if (reload) {
						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
						)
					} else {
						chart.setOption({
							xAxis: [{
								type: 'category',
								data: data.xarr,
							}],
							series: [{
									name: that.history.base.token + '-USDT',
									data: data.linearr,
								},
								{
									name: "MA5",
									data: that.calculateMA(5, data),
								},
								{
									name: "MA10",
									data: that.calculateMA(10, data),
								},
								{
									name: "MA20",
									data: that.calculateMA(20, data),
								},
							]
						})
					}


				} 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 {
		width: 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>