frontend-app/pages/user/jia.vue

<template>
	<view class="content">
		<TopSafe></TopSafe>
		<Header title="加速次数" />
		<view class="contract-view">
			<image src="https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/mine-purse/jia_bg.png" class="jia-img">
			</image>
			<view class="box-panel" style="margin-top:384rpx">
				<view class="box-top flex-r-lr" style="margin-bottom:48rpx;">
					<view class="flex-c-lr" v-for="(item, index) in tList" :key="index" style="align-items: center;width:40%;">
						<text class="text-48 text-zu1 text-bold">{{ item.text }}</text>
						<text class="text-28 text-zu1">{{ item.value }}</text>
					</view>
				</view>
				<view class="box-list flex-r-lr" style="align-items: center;" v-for="(item, index) in topList" :key="item.text">
					<text class="text-28 text-zu1">{{ item.text }}</text>
					<text class="text-32 text-bold text-zu1">{{ item.value }}</text>
				</view>
				<text class="text-zu txt-28 mt-24">加速明细</text>
				<view class="mt-12 table-view">
					<view class="table-head ">
						<view class="head-box flex-c" :class="{ 'border-lr': index == 1 }" v-for="(item, index) in tableHead"
							:key="index">
							<text class="text-20 text-zu1">{{ item }}</text>
						</view>

					</view>
					<view class="table-list" v-for="(item, index) in tableList" :key="index">
						<view class="list-box flex-c" v-for="(key, indexT) in 3" :key="indexT"
							:style="{ 'border-bottom-right-radius': index == tableList.length - 1 && indexT == 2 ? '16rpx' : 0 }" :class="{
								'border-lr': indexT != 1,
								'border-left-1': index == tableList.length - 1 && indexT == 0
							}">
							<text class="text-20 text-zu text-bold" v-if="indexT == 0">{{ item.one }}</text>
							<text class="text-20 text-zu text-bold" v-if="indexT == 1">{{ item.two }}</text>
							<text class="text-20 text-zu text-bold" v-if="indexT == 2">{{ item.three }}</text>
						</view>

					</view>

				</view>
			</view>
			<view class="box-panel mt-32 mb-32">
				<text class="text-zu text-32">加速说明</text>
				<text class="text-zu1 text-28 mt-24">获取方式: </text>
				<text class="text-zu1 text-28">(1)通过购买报单区和好物区商品的直推和间推奖励获得</text>
				<text class="text-zu1 text-28">(2)转盘抽奖获得</text>

				<text class="text-zu1 text-28 mt-24">逻辑说明: </text>
				<text class="text-zu1 text-28">(1)通过内购购买商品获得的是抽奖次数，并不能直接用于抽奖，能够抽奖的次数需要每天进行释放，或者直推间推下线的奖励获得可抽奖的次数</text>
				<text class="text-zu1 text-28">(2)当可抽奖次数大于抽奖次数时，可抽奖次数将会被冻结24个小时，内购商品解冻，否则冻结的抽奖次数会消失。最终解释权归商城所有!!!</text>
			</view>
			<!-- (2)转盘抽奖获得 -->
		</view>
		<!-- <DownPopup :show="true"></DownPopup> -->
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
import { getUserInfo } from '@/api/auth.js';
import Header from '@/components/common/header.vue';
import TopSafe from '@/components/common/top-safe.nvue'
import DownPopup from '@/components/common/down-popup.vue';
import { quickens } from '@/api/contract.js'

import func from '@/utils/func.js';

export default {
	components: { Header, TopSafe, DownPopup },
	data() {
		return {
			tList: [
				{ text: '100', value: '锁仓TBC' },
				{ text: '100', value: '剩余加速包' }
			],
			topList: [
				{ text: '已获得加速包次数', value: '100' },
				{ text: '已释放TBC数量', value: '20000' },
				{ text: '剩余未使用加速包次数', value: '200' },
			],
			tableHead: ['加速比例', '释放TBC数量', '时间'],
			tableList: [

			]
		};
	},
	onLoad() {
		this.init();
	},
	methods: {
		init() {
			// this.isSignContract()
			this.getQuichens()
		},
		getQuichens() {
			quickens().then(res => {
				if (res.bizcode == 100) {
					// this.type = res.data;
					this.tList[0].text = res.data.vcoinsLock;
					this.tList[1].text = res.data.quickenBalance;
					this.topList[0].value = res.data.quickenTotal;
					this.topList[1].value = res.data.quickenValue;
					this.topList[2].value = res.data.quickenBalance;
					this.tableList = res.data.quickenDetail;
					this.tableList.forEach(item => {
						item.one = item.quickenRate * 100 + '%';
						item.two = item.quickenValue;
						item.three = func.formatDate(new Date(item.ctdate), 3)
					})
				} else {
					this.$refs.uToastRef.show({
						type: 'error',
						message: res.msg,
					});
				}
			})
		},

		onBtn() {
			if (this.type) {
				//查看
				uni.navigateTo({
					url: `/pages/contract/check`
				})
			} else {
				//去签署

			}
		}
	}
}
</script>

<style lang="scss" scoped>
.contract-view {
	width: 100%;
	height: calc(100% - 88rpx - var(--status-bar-height));
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	padding: 0 32rpx;
	box-sizing: border-box;
	background: linear-gradient(315deg, #AF39C4 0%, #7732FF 100%);
	position: relative;

	.jia-img {
		width: 724rpx;
		height: 400rpx;
		position: absolute;
		z-index: 0;
		margin-top: calc(var(--status-bar-height) + 52rpx);
	}

	.box-panel {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		padding: 50rpx 32rpx;
		width: 690rpx;
		border-radius: 36rpx;
		background-color: #fff;
		box-sizing: border-box;

		.box-top {
			width: 100%;
			height: 86rpx;
			min-height: 86rpx;
		}

		.box-list {
			width: 100%;
			min-height: 84rpx;
			border-bottom: 1rpx solid #ececec;
		}

		.table-view {
			width: 100%;
			display: flex;
			flex-direction: column;
			border-radius: 16rpx;
			overflow: hidden;

			.table-list {
				width: 100%;
				height: 64rpx;
				min-height: 64rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				border-bottom: 1rpx solid #EAEAEA;

				.list-box {
					flex: 1;
					height: 100%;
					box-sizing: border-box;
				}
			}

			.table-head {
				width: 100%;
				height: 80rpx;
				min-height: 80rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.head-box {
					flex: 1;
					height: 100%;
					background-color: #FAF8FE;
					box-sizing: border-box;
				}


			}
		}

		.border-lr {
			border-left: 1rpx solid #EAEAEA;
			border-right: 1rpx solid #EAEAEA;
		}

		.border-left-1 {
			border-bottom-left-radius: 16rpx;
		}


	}
}
</style>