<template>
	<view class="">
		<view class="container_games">
			<view class="s_top">
				<view class="img">
					<image :src="BASE_URL + detail.img" mode=""></image>
				</view>
				<view class="nametime">
					<view class="name">
						{{detail.title_cn}}
					</view>
				</view>
			</view>
			<!-- cont -->
			<view class="introduction">
				<view class="tit">
					遊戲介紹
				</view>
				<view class="i_text">
					{{detail.desc_cn}}
				</view>
			</view>
			<view class="introduction">
				<view class="tit">
					使用指南
				</view>
				<view class="i_text">
					{{detail.context_cn}}
				</view>
			</view>
			<view class="introduction">
				<view class="tit">
					链接
				</view>
				<view class="i_text">
					{{detail.reflink}}
				</view>
			</view>

		</view>
		<!-- 購買 -->
		<view class="buy" v-if="!detail.payed">
			<view class="money">
				<view class="title">
					金額:
				</view>
				<view class="number">{{detail.usdt}}</view>
			</view>
			<view class="purchase" @click="purchase">
				購買
			</view>
		</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '@/request/config.js'
	import {
		_guidedetail
	} from "@/request/api.js"
	export default {
		data() {
			return {
				BASE_URL,
				id: 1,
				detail: {},
			};
		},
		onLoad(options) {
			// 获取传递的参数
			if(options.id){
				this.id = options.id;
			}
		},
		mounted() {
			this.getpayDetail();
		},
		methods: {
			async getpayDetail(){
				let res = await _guidedetail({id: this.id || '1'});
				if(res.code === 1){
					this.detail = res.data
				}
				console.log(this.detail,'xiangxi');
			},
			purchase() {
				uni.navigateTo({
					url: `/pages/game/payment?name=guide&id=${this.detail.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.container_games {
		border-top: 1px solid dimgrey;
		width: 100vw;
		height: 100vh;
		padding: 20px;
		box-sizing: border-box;
		background-color: #2c305e;

		image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}

		.s_top {
			width: 100%;
			height: 400rpx;
			background-color: #383d84;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.img {
				width: 100%;
				height: 300rpx;
				border-radius: 20rpx;
			}

			.nametime {
				color: #fff;
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				padding: 20rpx;

				.time {
					color: #D7D8E6;
					font-size: 24rpx;
				}
			}
		}

		.introduction {
			width: 100%;
			background-color: #383d84;
			border-radius: 20rpx;
			color: #D7D8E6;
			padding: 20rpx;
			box-sizing: border-box;
			margin-bottom: 30rpx;

			.tit {
				width: 100%;
				display: flex;
				justify-content: center;
			}

			.i_text {
				margin: 20rpx 0;
			}
		}
	}

	.buy {
		width: 100vw;
		background-color: #fff;
		height: 140rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 30rpx;
		box-sizing: border-box;

		.money {
			display: flex;
			align-items: center;

			.title {
				margin-right: 10rpx;
				font-size: 22rpx;
				color: #D7D8E6;
			}

			.number {
				color: #FD5C5C;
				font-weight: 600;
			}
		}

		.purchase {
			width: 420rpx;
			height: 80rpx;
			background-color: #4f5ad8;
			border-radius: 20rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}
</style>