frontend-app/pages/user/jia.vue

<template>
	<view class="content">
		<TopSafe></TopSafe>
		<Header title="加速次数"  />
		<view class="contract-view">
			<image src="@/static/new/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>