frontend-app/pages/rwa_package/dongjian/jia.vue

<template>
	<view class="content">
		<TopSafe bgColor="#fff"></TopSafe>
		<Header title="数字积分" bgColor="#fff" />
		<view class="contract-view">
			<image src="/static/new/jia_bg.png" class="jia-img">
			</image>
			<view class="box-panel">
				<view class="box-top">
					<view class="flex-c-lr" style="align-items: center;">
						<text class="text-40 text-bold text-zu1">{{lockedData ? lockedData.selfBuyLocked : 0}}</text>
						<text class="text-fu1 text-24 text-w-400">自购锁定量(数字积分)</text>
					</view>
					<view class="flex-c-lr" style="align-items: center;">
						<text class="text-40 text-bold text-zu1">{{lockedData ? lockedData.spreadLocked : 0}}</text>
						<text class="text-fu1 text-24 text-w-400">推广锁定量(数字积分)</text>
					</view>
				</view>
				<view class="box-list" style="margin-top:40rpx;">
					<view class="head-box">
						<text class="text-zu1 text-28 text-bold">推广解锁</text>
						<text class="text-fu1 text-24 text-w-400">获得2贡献值解锁1贡献值对应的数字积分直推奖励。</text>
						<image src="/static/new/jia_icon.png" class="icon-img" mode=""></image>
					</view>
					<view class="box-li">
						<view class="box-biao">
							<view class="box-head">
								<view class="box-head-view" v-for="(item,index) in topHead" :key="item" :style="{
									borderRightWidth:index == 2 ? 0 : '1rpx'
								}">
									<text class="text-fu text-24">{{item}}</text>
								</view>
							</view>
							<view class="list-all-view">
								<view class="list-view" v-for="(item,index) in topList" :key="index">
									<view class="list-view-box">
										<text class="text-fu text-24 text-bold">{{item.amount}}</text>
									</view>
									<view class="list-view-box">
										<text class="text-fu text-24 text-bold">{{item.time}}</text>
									</view>
									<view class="list-view-box" style="borderRightWidth:0">
										<text class="text-fu text-24 text-bold">{{item.source}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
				</view>
				<view class="box-list" style="margin-top:24rpx;">
					<view class="head-box">
						<text class="text-zu1 text-28 text-bold">自购解锁</text>
						<text class="text-fu1 text-24 text-w-400">您的数字积分奖励将随着推广业绩的提升逐步解锁。</text>
						<image src="/static/new/jia_icon.png" class="icon-img" mode=""></image>
					</view>
					<view class="box-li">
						<view class="box-biao">
							<view class="box-head">
								<view class="box-head-view" v-for="(item,index) in bottomHead" :key="item" :style="{
									borderRightWidth:index == 1 ? 0 : '1rpx'
								}">
									<text class="text-fu text-24">{{item}}</text>
								</view>
							</view>
							<view class="list-all-view">
								<view class="list-view" v-for="(item,index) in bottomList" :key="index">
									<view class="list-view-box">
										<text class="text-fu text-24 text-bold">{{item.amount}}</text>
									</view>
									<view class="list-view-box" style="borderRightWidth:0">
										<text class="text-fu text-24 text-bold">{{item.time}}</text>
									</view>
								</view>
							</view>
							
						</view>
						
					</view>
					
				</view>
			</view>
			<view class="box-panel mt-32 mb-32">
				<text class="text-zu1 text-28 text-bold" style="font-weight: bold;">数字积分获取说明</text>
				<text class="text-fu text-24" style="margin-top:24rpx">1.商城优选区消费1:1获得贡献值，每消费1元获得1贡献值，次日根据当日商城营收占比获得数字积分。</text>
				<text class="text-fu text-24 " style="margin-top:24rpx">2.直推用户消费10:1获得贡献值，直推用户优选区每消费10元您将获得1积分。</text>
				<text class="text-fu text-24 " style="margin-top:24rpx">3.积分获得后均为锁定状态。</text>
				<text class="text-zu1 text-28 text-bold" style="margin-top:48rpx">数字积分解锁说明</text>
				<text class="text-fu text-24 " style="margin-top:24rpx">1.您本人在商城消费获得的积分，每日按1‰自然解锁。</text>
				<text class="text-fu text-24 " style="margin-top:24rpx">2.直推用户消费获得的贡献值5：1解锁您本人消费获得的数字积分。</text>
				<text class="text-fu text-24 " style="margin-top:24rpx">3.直推获得的奖励，根据您在商城的消费获得的贡献值2:1进行解锁，每获得2贡献值解锁1积分。</text>
				<text class="text-fu text-24 " style="margin-top:24rpx">4.若发生退货退款等因素，信任桥将回收各部分奖励，若数字积分已兑换，则不符合7天无理由退货。</text>
				<text class="text-fu text-24 " style="margin-top:24rpx">5.最终解释权归信任桥所有。</text>
			</view>
			<!-- (2)转盘抽奖获得 -->

		</view>
		<!-- <DownPopup :show="true"></DownPopup> -->
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
import { getUserInfo } from '@/api/auth.js';
import { getVcoinLocked,getVcoinReleaseLog } from '@/api/finance.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 Decimal from 'decimal.js';
import func from '@/utils/func.js'


export default {
	components: { Header, TopSafe, DownPopup },
	data() {
		return {
			lockedData:null,
			topHead:['解锁数量','解锁时间','触发解锁订单'],
			bottomHead:['解锁数量','解锁时间'],
			topList:[],
			bottomList:[]
		};
	},
	onLoad() {
		this.init();
	},
	methods: {
		onJump(item){
			uni.navigateTo({
				url:`/pages/other_package/productInfo/productInfo?id=${item.refId}`
			})
		},
		init() {
			// this.isSignContract()
			this.vcoinLocked();
			this.vcoinReleaseLog(1);
			this.vcoinReleaseLog(2);
			// this.getQuichens()
		},
		vcoinLocked(){
			getVcoinLocked().then(res=>{
				if (res.bizcode == 100) {
					this.lockedData = res.data;
				}
				
			})
		},
		vcoinReleaseLog(val){
			let params = {
				page:1,
				pageSize:10000,
				type:val
			}
			getVcoinReleaseLog(params).then(res=>{
				if (res.bizcode == 100) {
					if(val == 1){
						this.topList = res.data.entitys || [];
					}else{
						this.bottomList = res.data.entitys || [];
					}
					this.topList.forEach(item=>{
						item.time = func.formatDate(new Date(item.ctdate), 4);
					})
					this.bottomList.forEach(item=>{
						item.time = func.formatDate(new Date(item.ctdate), 4);
					})
				}
			})
		},
		getQuichens() {
			let params  ={
				page:1,
				pageSize:1000
			}
			quickens(params).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 => {
						const ratio = new Decimal(item.quickenRate);
						item.one = ratio.times(100).toNumber() + '%';
						item.two = new Decimal(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/rwa_package/dongjian/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;
	position: relative;
	background-color: #fff;

	.jia-img {
		width: 100%;
		height: 240rpx;
		display: flex;
		min-height:240rpx;
		margin-bottom:40rpx;
	
	}

	.box-panel {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;

		.box-top {
			width: 100%;
			height: 90rpx;
			min-height: 90rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.box-list {
			width:100%;
			display: flex;
			padding:24rpx 0 4rpx;
			box-sizing: border-box;
			background: rgba(121,52,246,0.08);
			border-radius: 12rpx;
			flex-direction: column;
			align-items: center;
			.box-li{
				width:calc(100% - 8rpx);
				height:386rpx;
				min-height:396rpx;
				border-radius: 12rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 16rpx 24rpx;
				box-sizing: border-box;
				.box-biao{
					width:100%;
					height:100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					border:1rpx solid #eaeaea;
					border-radius: 16rpx;
					.list-all-view{
						flex:1;
						display: flex;
						overflow-y: auto;
						width:100%;
						flex-direction: column;
						.list-view{
							width:100%;
							height:64rpx;
							display: flex;
							flex-direction: row;
							min-height:64rpx;
							.list-view-box{
								flex:1;
								height:100%;
								display: flex;
								align-items: center;
								justify-content: center;
								border-right:1rpx solid #EAEAEA;
								box-sizing: border-box;
								border-bottom:1rpx solid #EAEAEA;
							}
							
						}
					}
					
					.box-head{
						width:100%;
						height:80rpx;
						min-heihgt:80rpx;
						display: flex;
						flex-direction: row;
						.box-head-view{
							flex:1;
							height:100%;
							display: flex;
							align-items: center;
							justify-content: center;
							border-right:1rpx solid #EAEAEA;
							box-sizing: border-box;
							border-bottom:1rpx solid #EAEAEA;
							background-color: #F8F8F8;
						}
					}
				}
			}
			
			.head-box{
				width:100%;
				height:88rpx;
				min-height:88rpx;
				position: relative;
				display: flex;
				flex-direction: column;
				padding: 0 24rpx;
				box-sizing: border-box;
				.icon-img{
					width:104rpx;
					height:88rpx;
					position: absolute;
					right:24rpx;
					bottom:0;
				}
			}
		}

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