jingcai/pages/index/entertainment.vue

<template>
	<view class="all">
		<view class="">
			<view
				class="echart"
				id="mychart"
				style="width: 750rpx; height: 700rpx"></view>
		</view>
		<view class="center">
			<!-- 左 -->
			<view class="le">
				<view class="tit">
					<view class="ti1">下單金額</view>
					<view class="ti2">(單筆最高200U)</view>
				</view>
				<view class="he">
					<view class="sh">
						<view class="he1">
							<view class="wen">1</view>
						</view>
						<view class="he1">
							<view class="wen">5</view>
						</view>
						<view class="he1">
							<view class="wen">10</view>
						</view>
					</view>
					<view class="sh">
						<view class="he1">
							<view class="wen">20</view>
						</view>
						<view class="he1">
							<view class="wen">50</view>
						</view>
						<view class="he1">
							<view class="wen">100</view>
						</view>
					</view>
				</view>
				<view class="yi">
					<view class="">
						<image
							class="img"
							src="../../static/icon/le.png"
							mode=""></image>
					</view>
					<view class="">
						<view class="wz">TRX</view>
					</view>
					<view class="">
						<view class="qx">10203009期</view>
					</view>
				</view>
				<view class="shu">
					<view class="">0.064489</view>
				</view>
			</view>
			<!--右 -->
			<view class="ri">
				<view class="ti">
					<view class="t1">k線類型</view>
					<view class="t2">60秒</view>
					<view class="">
						<image
							class="ima"
							src="../../static/icon/jt.png"
							mode=""></image>
					</view>
				</view>

				<view class="dh">
					<view class="te">1</view>
				</view>
				<view class="btn">
					<view class="bt">
						<view class="btnle">
							<view class="ble">
								<image
									class="imag"
									src="../../static/icon/xia.png"
									mode=""></image>
								<view class="xia">{{include_function.name}}</view>
							</view>
						</view>
						<view class="btnri">
							<view class="ble">
								<image
									class="imag"
									src="../../static/icon/shang.png"
									mode=""></image>
								<view class="xia">上</view>
							</view>
						</view>
					</view>
					<view class="bt">
						<view class="btnle">
							<view class="ble">
								<image
									class="imag"
									src="../../static/icon/xia.png"
									mode=""></image>
								<view class="xia">奇</view>
							</view>
						</view>
						<view class="btnri">
							<view class="ble">
								<image
									class="imag"
									src="../../static/icon/shang.png"
									mode=""></image>
								<view class="xia">偶</view>
							</view>
						</view>
					</view>
				</view>
				<view class="db">
					<view class="jl">距離結束</view>
					<view class="sj">
						<view class="">00</view>
					</view>
					<view class="sj">
						<view class="">00</view>
					</view>
					<view class="sj">
						<view class="">52</view>
					</view>
				</view>
			</view>
		</view>
		<view class="kb"></view>

		<view class="last">
			<view class="yi">
				<view class="dd">訂單列表</view>
				<view
					class="aa"
					@click="nav">
					<view class="ls">歷史列表</view>
					<view class="lb">
						<image
							class="lb"
							src="../../static/icon/jt.png"
							mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="bg">
			<view class="biaotou">
				<view class="biwe">幣種</view>
				<view class="biwe1">金額</view>
				<view class="biwe2">盈虧</view>
				<view class="biwe3">進度</view>
			</view>
		</view>
		<view
			class="neirong"
			v-for="item in 3"
			:key="item">
			<view class="nr1">
				<view class="tr">TRX</view>
				<view class="wf">5分線</view>
				<view class="">
					<image
						class="zz"
						src="../../static/icon/shang.png"
						mode=""></image>
				</view>
			</view>
			<view class="nr2">23.5000</view>
			<view class="nr2">23.5000</view>
			<view class="fil">
				<view class="wanc">
					<view class="wc">已完成</view>
				</view>
				<view class="xiangq">
					<view class="xq">詳情</view>
				</view>
			</view>
		</view>

		<view class="chz">
			<view class="ye">
				<view class="yue">餘額</view>
				<view class="yes">2955.3000U</view>
			</view>
			<view
				class="chong"
				@click="navC">
				<view class="quc">去充值</view>
				<view class="">
					<image
						class="choz"
						src="../../static/icon/jt.png"
						mode=""></image>
				</view>
			</view>
		</view>
		<view class="aaa"></view>
	</view>
</template>

<script>
	import * as echarts from "echarts";
	import { getGame, SZlineData } from "@/api/game.js";

	export default {
		data() {
			return {
				data: [
					[20, 34, 10, 38], //今开、当前价格、最低价格、最高价
					[40, 35, 30, 50],
					[31, 38, 33, 44],
					[38, 15, 5, 42],
					[28, 20, 15, 40],
					[18, 15, 25, 52],
					[48, 15, 45, 12],
					[28, 20, 15, 40],
					[28, 20, 15, 40],
					[28, 20, 15, 40],
				],
				include_function: {
					id: '',
					name: '',
					
				}
			};
		},
		onLoad() {
			// this.SZlineData()
			this.getGame();
		},
		mounted() {
			this.initEcharts();
		},

		methods: {
			async getGame() {
				try {
					const res = await getGame();
					this.include_function = res.data.game
					console.log('123',this.include_function);

					console.log("12312", res);
				} catch (error) {
					// console.error("请求出错", error);
				}
			},
			// async SZlineData() {
			//   try {
			//     const res = await SZlineData();
			//     console.log('123', res);
			// 	// this.kline =
			//   } catch (error) {
			//     console.error('请求出错', error);
			//   }
			// },

			// 均值计算
			calculateMA(dayCount, data) {
				const result = [];
				for (let i = 0, len = data.length; i < len; i++) {
					if (i < dayCount) {
						result.push("-");
						continue;
					}
					let sum = 0;
					for (let j = 0; j < dayCount; j++) {
						sum += data[i - j][1];
					}
					// 保留两位小数
					result.push((sum / dayCount).toFixed(2));
				}
				return result;
			},

			initEcharts() {
				const option = {
					tooltip: {},
					legend: {
						top: 30,
						data: ["MA5", "MA10", "MA20"],
					},
					xAxis: {
						data: [
							"2017-10-24",
							"2017-10-25",
							"2017-10-26",
							"2017-10-27",
							"2017-10-28",
							"2017-10-29",
							"2017-10-30",
							"2017-10-30",
							"2017-10-30",
							"2017-10-30",
							"2017-10-30",
						],
					},
					yAxis: {},

					series: [
						{
							type: "candlestick",
							data: this.data,
						},
						{
							name: "MA5",
							type: "line",
							data: this.calculateMA(5, this.data),
							smooth: true,
							showSymbol: false,
							lineStyle: {
								normal: {
									width: 1,
								},
							},
						},
						{
							name: "MA10",
							type: "line",
							data: this.calculateMA(10, this.data),
							smooth: true,
							showSymbol: false,
							lineStyle: {
								normal: {
									width: 1,
								},
							},
						},
						{
							name: "MA20",
							type: "line",
							data: this.calculateMA(20, this.data),
							smooth: true,
							showSymbol: false,
							lineStyle: {
								normal: {
									width: 1,
								},
							},
						},
					],
				};
				const myChart = echarts.init(
					document.getElementById("mychart")
				);
				myChart.setOption(option);
				//随着屏幕大小调节图表
				window.addEventListener("resize", () => {
					myChart.resize();
				});
			},

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

<style>
	.all {
		width: 750rpx;
		/* height: 2500rpx; */
		height: 100%;
		background-color: #000000;
	}
	.echart {
		background-color: #191a1f;
	}
	.center {
		width: 680rpx;
		height: 470rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
	}
	.tit {
		display: flex;
		justify-content: start;
	}
	.ti1 {
		/* width: 256rpx; */
		height: 24rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}
	.ti2 {
		/* width: 256rpx; */
		height: 24rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #999999;
	}
	.he1 {
		width: 83rpx;
		height: 83rpx;
		background: #fdaf41;
		border-radius: 10rpx;
		margin-top: 36rpx;
		margin-right: 21rpx;
	}
	.wen {
		/* padding-top: 25rpx;
		margin-left: 30rpx; */
		height: 22rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 70rpx;
		text-align: center;
	}
	.sh {
		display: flex;
		justify-content: start;
		/* margin: 21rpx; */
		/* margin-right: 21rpx; */
	}
	.yi {
		display: flex;
		justify-content: start;
		margin-top: 53rpx;
	}
	.img {
		width: 41rpx;
		height: 42rpx;
	}
	.wz {
		height: 22rpx;
		font-size: 29rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		margin-left: 7rpx;
	}
	.qx {
		height: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		margin-left: 10rpx;
	}
	.shu {
		height: 39rpx;
		font-size: 51rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #fdb242;
	}
	.ti {
		display: flex;
		justify-content: start;
	}
	.t1 {
		height: 24rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		margin-left: 90rpx;
	}
	.t2 {
		height: 24rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #fdaf41;
		margin-left: 19rpx;
	}
	.ima {
		width: 16rpx;
		height: 10rpx;
		margin-left: 15rpx;
	}
	.dh {
		width: 322rpx;
		height: 83rpx;
		background: #efefef;
		border-radius: 10rpx;
		margin-top: 25rpx;
	}
	.te {
		text-align: center;
		/* padding-top: 25rpx; */
		height: 32rpx;
		font-size: 44rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 70rpx;
	}

	.btn {
		width: 322rpx;
		height: 160rpx;
		margin-top: 30rpx;
	}
	.bt {
		display: flex;
		justify-content: start;
	}
	.btnle {
		width: 157rpx;
		height: 72rpx;
		border: 1rpx solid;
		border-radius: 50rpx 0 0 50rpx;
		background-color: #df5660;
		margin-top: 10rpx;
	}
	.ble {
		display: flex;
		justify-content: center;
	}
	.imag {
		width: 32rpx;
		height: 20rpx;
		/* margin-left: 44rpx; */
		margin-top: 25rpx;
	}
	.xia {
		height: 25rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #ffffff;
		line-height: 70rpx;
	}
	.btnri {
		width: 157rpx;
		height: 72rpx;
		border: 1rpx solid;
		border-radius: 0 50rpx 50rpx 0;
		background-color: #5bb786;
		margin-left: 10rpx;
		margin-top: 10rpx;
	}
	.db {
		display: flex;
		justify-content: start;
	}
	.jl {
		height: 23rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-top: 45rpx;
	}
	.sj {
		width: 41rpx;
		height: 39rpx;
		background: #bfbfbf;
		border-radius: 3rpx;
		margin-left: 15rpx;
		margin-top: 42rpx;
	}
	.kb {
		width: 750rpx;
		height: 20rpx;
		background-color: #191a1f;
	}
	.last {
		width: 680rpx;
		height: 40rpx;
		background-color: #000000;
		display: flex;
		justify-content: start;
		margin-left: 32rpx;
	}
	.dd {
		height: 23rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		line-height: 30rpx;
	}
	.aa {
		display: flex;
		justify-content: start;
	}
	.ls {
		height: 23rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		line-height: 30rpx;
		margin-left: 460rpx;
	}
	.lb image {
		width: 14rpx;
		height: 20rpx;
		color: #fff;
		margin-left: 10rpx;
	}
	.biaotou {
		display: flex;
		justify-content: start;
		margin-top: 40rpx;
	}
	.bg {
		width: 680rpx;
		height: 120rpx;
		background-color: #000000;
		display: flex;
		justify-content: start;
		margin-left: 32rpx;
		margin-top: 30rpx;
	}
	.biwe {
		height: 27rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		line-height: 30rpx;
	}
	.biwe1 {
		height: 27rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		line-height: 30rpx;
		margin-left: 162rpx;
	}
	.biwe2 {
		height: 27rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		line-height: 30rpx;
		margin-left: 100rpx;
	}
	.biwe3 {
		height: 27rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fff;
		line-height: 30rpx;
		margin-left: 103rpx;
	}
	.neirong {
		display: flex;
		justify-content: start;
		width: 700rpx;
		height: 70rpx;
		margin-left: 32rpx;
	}
	.nr1 {
		display: flex;
		justify-content: start;
	}
	.tr {
		height: 21rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #ffffff;
		line-height: 30rpx;
	}
	.wf {
		height: 17rpx;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #999999;
		line-height: 30rpx;
		margin-left: 8rpx;
	}
	.zz {
		width: 22rpx;
		height: 14rpx;
		color: #5bb786;
		margin-left: 8rpx;
	}
	.nr2 {
		height: 20rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		line-height: 30rpx;
		margin-left: 45rpx;
	}
	.wanc {
		width: 111rpx;
		height: 31rpx;
		background: #25b287;
		border-radius: 16rpx;
		margin-left: 20rpx;
	}
	.wc {
		height: 16rpx;
		font-size: 16rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		line-height: 30rpx;
		text-align: center;
	}
	.fil {
		display: flex;
		justify-content: start;
	}
	.xiangq {
		width: 103rpx;
		height: 31rpx;
		background: #01ebf6;
		border-radius: 16rpx;
		margin-left: 10rpx;
	}
	.xq {
		height: 16rpx;
		font-size: 16rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 30rpx;
		text-align: center;
	}
	.chz {
		width: 687rpx;
		height: 126rpx;
		background: #191a1f;
		border-radius: 20rpx;
		margin-left: 32rpx;
		margin-top: 40rpx;
		display: flex;
		justify-content: start;
	}
	.yue {
		height: 27rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		margin-left: 31rpx;
		padding-top: 27rpx;
	}
	.yes {
		height: 27rpx;
		font-size: 35rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #fdaf41;
		margin-left: 32rpx;
		margin-top: 40rpx;
	}
	.chong {
		display: flex;
		justify-content: start;
	}
	.quc {
		height: 24rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
		margin-top: 51rpx;
		margin-left: 326rpx;
	}
	.choz {
		width: 22rpx;
		height: 14rpx;
		margin-top: 62rpx;
		/* color: #5bb786; */
	}
	.aaa {
		width: 750rpx;
		height: 30rpx;
		background-color: #000000;
	}
</style>