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')}} {{history.base.max_bet*1}}U)</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">
					{{KlineList.c*1}}
				</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="'USDT'+$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(`/pages/game/history?id=${history.base.id}`)">
					<text>{{$t('enter.u10')}}</text>
					<image class="lb" src="../../static/icon/jt.png" mode="scaleToFill"></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 v-if="item.bet==1" class="zz" src="../../static/icon/shang.png" mode="scaleToFill"></image>
					<image v-if="item.bet==2" class="zz" src="../../static/icon/xia.png" mode="scaleToFill"></image>
					<view v-if="item.bet==3" class="nametip red">{{$t('enter.u5')}}</view>
					<view v-if="item.bet==4" class="nametip green">{{$t('enter.u7')}}</view>
				</view>
				<view class="biwe">{{item.num*1}}</view>
				<view class="biwe">{{item.get-item.num}}</view>
				<view class="biwe flex-center">
					<view v-if="item.status==0" class="list-buttom primary margin-r-10">
						{{$t('enter.a4')}}
					</view>
					<view v-else class="list-buttom red margin-r-10">
						{{$t("enter.a2")}}
					</view>
					<view class="list-buttom primary"  v-if="item.result==1">

					<view class="list-buttom red"  v-if="item.result===1">
						{{$t('enter.a5')}}
					</view>
					<view class="list-buttom success" v-if="item.result===0">
						{{$t('enter.a6')}}
					</view>
				</view>
			</view>
		</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}}U</view>
			</view>
			<view class="flex-start">
				<view class="quc">{{$t('enter.u16')}}</view>
				<image class="choz" src="../../static/icon/jt.png" mode="scaleToFill"></image>
			</view>
		</view>
		<uni-popup type="bottom" ref="popup" :mask-click="false" @maskClick='colsePayPassword'>
			<inputPassword @commit='KeyInfo'></inputPassword>
		</uni-popup>
		<uni-popup type="center" ref="popupDetail">
			<view class="alert-detail">
				<view class="padding-c-30 padding-t-30 padding-b-30">
					<view class="flex">
						<view class="type">
							{{$t('gameList.a5')}}
						</view>
						<view class="num" v-if="alertDetail.ts">
							{{getTime(alertDetail.ts)}}
						</view>
					</view>
					<view class="flex">
						<view class="type">
							open
						</view>
						<view class="num">
							{{alertDetail.o*1}}
						</view>
					</view>
					<view class="flex">
						<view class="type">
							close
						</view>
						<view class="num">
							{{alertDetail.c*1}}
						</view>
					</view>
					<view class="flex">
						<view class="type">
							lowest
						</view>
						<view class="num">
							{{alertDetail.l*1}}
						</view>
					</view>
					<view class="flex">
						<view class="type">
							highest
						</view>
						<view class="num">
							{{alertDetail.h*1}}
						</view>
					</view>
				</view>
				<button class="button" type="default" @click="$refs.popupDetail.close()"><text
						class="button-text">{{$t("safe.d7")}}</text></button>
			</view>
		</uni-popup>
		<taber tab='entertainment' v-if="!upOnBtnData.show"></taber>
	</view>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import {
		getGame,
		gameKline,
		getGameList,
		gameWallet,
		gameBetList,
		gameBetIn
	} from "@/api/game.js";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	import taber from "@/components/footer/footer.vue";
	import {
		getTime
	} from '@/utils/rocessor.js';
	import inputPassword from "@/components/input-password/input-password.vue";
	export default {
		components: {
			taber,
			inputPassword
		},
		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,
				// 当前最新K线数据
				KlineList: {
					c: ''
				},
				upOnBtnData: {
					// 是否显示底部导航栏
					show: false,
					type: '',
					// 当前输入的密码
					passwordArr: '',
					value: '',
				},
				// 弹窗数据像晴
				alertDetail: {

				},
				// 保存获取下次游戏对象
				getNextTimeObj: ''
			};
		},
		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();
			this.gameInit();
		},
		// 关闭循环
		onHide() {
			// 倒计时清理
			this.initData();
		},
		methods: {
			getTime,
			// 弹窗详情
			alertDetailOpen(item) {
				console.log(item);
				this.alertDetail = item.room.result_info;
				this.$refs.popupDetail.open();
			},
			// 倒计时清理
			initData() {
				const that = this
				// 关闭倒计时
				clearInterval(that.getNextTimeObj);
				clearInterval(that.time.t);
				// 清空倒计时对象
				that.getNextTimeObj = '';
				this.time = {
					H: 0,
					M: 0,
					S: 0,
					t: ''
				};
			},
			// 点击触发支付事件
			onPayBet(type) {
				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,
					});
					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) {
				this.upOnBtnData.passwordArr = val;
				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
				};
				uni.showLoading({
					mask: true
				})
				that.upOnBtnData.value = '';
				gameBetIn(upData).then((res) => {
					uni.hideLoading()
					uni.showToast({
						title: res.msg
					});
					that.gameBetList();
				}).catch((res) => {
					uni.hideLoading();
					uni.showToast({
						title: res.msg
					});
				})
			},
			// 获取用户余额信息
			getUserWallet() {
				gameWallet().then((res) => {
					this.userWallet = +res.data.back.USDT.money.money
				})
			},
			// 开始倒计时
			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, '定时');
				}
			},
			// 获取倒计时时间
			getOutTime() {
				const that = this;
				const da = (new Date()).getTime();
				const timenum = that.history.next.open_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)
						that.getGameKline();
					}, 2000)
				}

			},
			// 游戏tab切换
			changeTab(item, ind) {
				const that = this;
				if (ind != this.actionIndex) {
					that.actionIndex = ind;
					// 清理倒计时
					that.initData();
					// 重新加载数据
					that.gameDataInit(item.id);
				}
			},
			// 初始化
			async gameInit() {
				// 获取游戏列表
				await this.getGameList();
				// 加载游戏数据
				this.gameDataInit(this.history.base.id || this.gameList[0].id)

			},
			// 加载游戏列表
			getGameList() {
				return getGameList().then((res) => {
					this.gameList = res.data.list;
					// console.log('1111111111',this.gameList);
				})
			},
			// 重新加载基础游戏信息
			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) => {
					that.KlineList = res.data.list[0];
					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(id) {
				const that = this;
				return getGame({
					page: that.history.page,
					limit: that.history.limit
				}, id).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.getNextTimeObj) {
						that.getNextTimeObj = setInterval(() => {
							that.getGame(id)
						}, 1000)
						return
					}
					if (that.history.next && that.getNextTimeObj) {
						clearInterval(that.getNextTimeObj);
						// 清空倒计时对象
						that.getNextTimeObj = '';
					}
					// 判断是否有活动并且正在进行中
					if (that.history.next && !that.getNextTimeObj) {
						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(url) {
				console.log('tz');
				if (!this.hasLogin) {
					uni.showModal({
						title: this.$t('enter.c4'),
						content: this.$t('enter.b5'),
						success: (e) => {
							// 判断是否点击确认按钮
							if (e.confirm) {
								// 保存当前页面地址
								saveUrl()
								// 跳转页面
								interceptor()
							}
						}
					})
					return
				}
				uni.navigateTo({
					url,
					fail(err) {
						console.log(err);
					}
				});
			},
		},
	};
</script>

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

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

		.tab-item {
			color: #FFF;
			font-size: $font-lg;
			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;

				&.green {
					color: #5bb786;
				}

				&.red {
					color: #df5660;
				}
			}
		}

		.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: $color-green;
			}
			&.red{
				background: $color-yellow;
			}
			&.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;
		}
	}

	.alert-detail {
		background-color: #FFF;
		border-radius: 10rpx;
		width: 500rpx;

		.flex {
			padding: 10rpx 0;
		}
	}
</style>