NFT/pages/assets/teamDetails.vue

<template>
	<view class="center">
		<view class="box">
			<view class="title flex">
				<view class="flex">
					<view class="log"><image src="../../static/img/pgTip.png" mode="scaleToFill"></image></view>
					<view class="name">{{ item.name }}</view>
					<view class="lun">{{ item.lun }}</view>
				</view>
				<view v-if="item.status == 0" class="more text-gray">未开始</view>
				<view v-if="item.status >0" class="more text-success" >已开奖</view>
			</view>
			<view class="main">
				<view class="main-info rule">每轮限购1组，每组限购1份</view>
				<view class="main-info time">
					开奖时间：
					<text>{{item.stopTime}}</text>
				</view>
				<view class="main-info new">该轮预约{{item.bingos+item.fails}}份，拼中{{item.bingos}}份，退回{{item.fails}}份</view>
			</view>
		</view>
		<view class="box">
			<view class="allTitle">
				<view class="title-left">第{{item.table_id}}组 预约份数/总份数：{{item.joins}}/{{item.join_number}}</view>
				<view class="title-right text-gray" v-if="item.status == 0">未开奖</view>
				<view class="title-right text-success" v-if="item.status == 1">已中奖</view>
				<view class="title-right text-danger" v-if="item.status == 2">未中奖</view>
				<view class="title-right text-warning" v-if="item.status == 3">未成团</view>
			</view>
			<view class="yu-main">
				<view class="img"><image src="../../static/img/bgTip2.png" mode="scaleToFill"></image></view>
				<view class="yu-info">
					<view class="info" v-if="item.status > 1">
						<view class="yu-font">回退本金</view>
						<view class="yu-num">{{item.cost+item.type}}</view>
					</view>
					<view class="info">
						<view class="yu-font">收益</view>
						<view class="yu-num">{{item.join_award+item.type}}</view>
					</view>
					<view class="info">
						<view class="yu-font">唯一凭证</view>
					</view>
					<view class="info">
						<view class="yu-num">{{item.order_id}}</view>
					</view>
				</view>
			</view>
			<view class="boom">
				<view class="boom-font">当前组爆快</view>
				<!-- <view class="boom-num">
					LALA122002552000
					<br />
					LALA122002552000
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
import { pinkLogDate } from '@/api/finance.js';
export default {
	data() {
		return {
			id: '',
			item: {}
		};
	},
	onLoad(e) {
		this.id = e.id;
		this.getDate();
	},
	methods: {
		getDate() {
			pinkLogDate({}, this.id)
				.then(e => {
					const ls = e.data;
					const lun = ls.group_num > 0 ? ls.group_num + '轮' : '';
					const time = new Date(ls.pay_time * 1000);
					let sy = ls.join_award*ls.cost/100+'';
					const num = sy.split('.')[1]
					// 判断小数点是否超过8位数标
					if(num&&num.length>8){
						sy = (+sy).toFixed(8);
					}
					this.item = {
						name: ls.activity.name,
						lun,
						fen: 1,
						money: +ls.cost,
						type: ls.cost_money_type,
						time: time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate(),
						stopTime:'',
						image: ls.activity.background_image,
						id: ls.id,
						status: ls.status,
						bingos:ls.bingos,
						fails:ls.fails,
						table_id:ls.table_id,
						joins:ls.joins.length,
						join_number:ls.activity.join_number,
						cost:+ls.cost,
						join_award:+sy,
						order_id:ls.order_id
					};
				})
				.catch(e => {
					console.log(e);
				});
		}
	}
};
</script>

<style lang="scss">
.center,
page {
	height: 100%;
	background: #f7fbfe;
}
.box {
	margin: 30rpx auto 0;
	width: 690rpx;
	background: #ffffff;
	box-shadow: 0px 0px 17rpx 0px rgba(0, 0, 0, 0.05);
	border-radius: 20rpx;
	padding: 26rpx 36rpx 30rpx 30rpx;
	.title {
		.log {
			width: 48rpx;
			height: 46rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.name {
			padding-left: 12rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #0f253a;
		}
		.lun {
			padding-left: 10rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #6d7c88;
		}
		.more {
			padding-left: 140rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #44969d;
		}
	}
	.main {
		margin-top: 26rpx;
		.main-info {
			padding-top: 16rpx;
		}
		.rule {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #0f253a;
		}
		.time {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #6d7c88;
			text {
				color: #0f253a;
			}
		}
		.new {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ff4c4c;
		}
	}
}
.allTitle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.title-left {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0f253a;
	}
	.title-right {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #6d7c88;
	}
}
.yu-main {
	margin-top: 40rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	.img {
		width: 180rpx;
		height: 155rpx;
		flex-shrink: 0;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.yu-info {
		padding-top: 14rpx;
		margin-left: 20rpx;
		width: 100%;
		.info {
			display: flex;
			justify-content: space-between;
			.yu-font {
				flex-shrink: 0;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #6d7c88;
			}
			.yu-num {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #0f253a;
			}
		}
	}
}
.boom {
	padding-left: 14rpx;
	margin-top: 28rpx;
	display: flex;
	justify-content: space-between;
	.boom-font {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #6d7c88;
	}
	.boom-num {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0f253a;
	}
}
</style>