Onlife/pages/game/accountnumberdetails.vue

<template>
	<view class="">
		<view class="container">
			<view class="s_top">
				<view class="img">
					<image :src="BASE_URL + detail.img"></image>
				</view>
				<view class="nametime">
					<view class="name">
						{{detail.title_cn}}
					</view>
					<view class="time">
						{{ timeOptions(detail.createtime * 1000) }}
					</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 {
		_accountdetail
	} from "@/request/api.js"
	export default {
		data() {
			return {
				BASE_URL,
				id: null,
				detail: {},
			};
		},
		onLoad(e) {
			if(e.id){
				this.id = e.id;
			}
		},
		mounted() {
			this.getAccountDetail();
		},
		methods: {
			async getAccountDetail(){
				const res = await _accountdetail({id: this.id});
				if(res.code === 1){
					this.detail = res.data
				}
			},
			timeOptions(timestamp){
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
				const day = String(date.getDate()).padStart(2, '0');
				
				return `${year}-${month}-${day}`;
			},
			purchase() {
				uni.navigateTo({
					url: `/pages/game/payment?name=account&id=${this.detail.id}`
				})
			}
		}
	}
</script>

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

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

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

			.s_title {
				padding: 20rpx;
				color: #fff;
			}

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

			.nametime {
				color: #fff;
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				align-items: center;

				.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>