frontend-app/pages/rwa_package/insights/acceleration.vue

<template>
	<view class="content">
		<TopSafe bgColor="#fff"></TopSafe>
		<Header title="数字积分" bgColor="#fff" />
		<view class="contract-view" :style="{
			'overflow-y': curTab == 0 ? 'auto' : 'hidden'
		}">
			<image src="https://static.tbmall.xin/static/new/jia_bg.png" class="jia-img">
			</image>
			<view class="box-panel" style="padding:0;margin-bottom:30rpx;">
				<view class="box-top">
					<view class="flex-c-lr" style="align-items: center;">
						<text class="text-40 text-bold text-gray">{{ 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-gray">{{ lockedData ? lockedData.spreadLocked : 0 }}</text>
						<text class="text-fu1 text-24 text-w-400">推广锁定量(数字积分)</text>
					</view>
				</view>
				<view class="tab-view">
					<view class="tab-list" @click="onTab(index)" v-for="(item, index) in tabList" :key="index">
						<text class="text-32" :style="{ color: index == curTab ? '#7934F6' : '#666666' }">{{ item }}</text>
						<view class="tab-line" v-if="index == curTab"></view>
					</view>
				</view>
			</view>
			<view class="box-panel" v-if="curTab == 0">
				<view class="box-list">
					<view class="head-box">
						<text class="text-gray text-28 text-bold">推广解锁</text>
						<text class="text-fu1 text-24 text-w-400">获得2贡献值解锁1贡献值对应的数字积分直推奖励。</text>
						<image src="https://static.tbmall.xin/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-gray text-28 text-bold">自购解锁</text>
						<text class="text-fu1 text-24 text-w-400">您的数字积分奖励将随着推广业绩的提升逐步解锁。</text>
						<image src="https://static.tbmall.xin/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" v-if="curTab == 0">
				<text class="text-gray 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-gray 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日，7日未解锁的部分将自动归属于上级，上级获得该奖励后也为锁定状态有效期7日，7日未解锁的部分将自动销毁</text>
				<text class="text-fu text-24 "
					style="margin-top:24rpx">5.若发生退货退款等因素，信任桥将回收各部分奖励，若数字积分已兑换，则不符合7天无理由退货。</text>
				<text class="text-fu text-24 " style="margin-top:24rpx">6.最终解释权归信任桥所有。</text>
			</view>
			<!-- (2)转盘抽奖获得 -->
			<view class="tab-two-panel" v-if="curTab == 1">
				<mescroll-uni ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption"
					@init="mescrollInit" :fixed="false">
					<view class="mescrollUniView">
						<view class="dai-list-view" v-for="(item, index) in daiList" :key="index">
							<view class="dai-top">
								<view class="time-view">
									<text class="text-zu text-24" style="margin-right:12rpx">距销毁</text>
									<u-count-down :time="item.time" format="HH:mm:ss" autoStart millisecond
										@finish="onFinish" :ref="'time' + item.refId" @change="onChange($event, index)">
										<view class="time-panel">
											<view class="time__custom">
												<text class="text-24" style="color:#FE2E2E">{{
													item.timeData.days > 10 ? item.timeData.days : '0' + item.timeData.days}}</text>
											</view>
											<text class="text-zu text-24" style="margin:0 10rpx">天</text>
											<view class="time__custom">
												<text class="text-24" style="color:#FE2E2E">{{
													item.timeData.hours > 10 ? item.timeData.hours : '0' + item.timeData.hours}}</text>
											</view>
											<text class="text-24" style="margin:0 10rpx">:</text>
											<view class="time__custom">
												<text class="text-24" style="color:#FE2E2E">{{ item.timeData.minutes
													}}</text>
											</view>
											<text class="text-24" style="margin:0 10rpx">:</text>
											<view class="time__custom">
												<text class="text-24" style="color:#FE2E2E">{{ item.timeData.seconds
													}}</text>
											</view>
										</view>
									</u-count-down>
								</view>

							</view>
							<view class="dai-mid" style="margin-top:40rpx;">
								<text class="text-32 text-fu1">下级:</text>
								<text class="text-32 text-gray">{{ item.lowerLevelPhone }}</text>
							</view>
							<view class="dai-mid" style="margin-top:32rpx;">
								<text class="text-32 text-fu1">积分奖励总量:</text>
								<text class="text-32 text-gray">{{ item.expendAmount }}</text>
							</view>
							<view class="dai-progress" style="margin-top:40rpx;">
								<u-line-progress :percentage="item.unlockRatio" activeColor="#7934F6" height="16rpx"
									:showText="true"></u-line-progress>
							</view>
							<view class="dai-bottom">
								<text class="text-24 text-fu1">0</text>
								<text class="text-24 text-fu1">{{ item.Tbclockacmont }}</text>
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
		<!-- <DownPopup :show="true"></DownPopup> -->
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

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

import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";


export default {
	mixins: [MescrollMixin],
	components: { Header, TopSafe, DownPopup, MescrollUni },
	data() {
		return {
			lockedData: null,
			topHead: ['解锁数量', '解锁时间', '触发解锁订单'],
			bottomHead: ['解锁数量', '解锁时间'],
			topList: [],
			bottomList: [],
			tabList: ['已解锁', '待解锁'],
			curTab: 0,
			daiList: [],
			upOption: {
				auto: false,
				page: {
					size: 10, // 每页数据的数量,默认10
				},
				noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					tip: `空空如也`,
				},
				textColor: "#333",
				bgColor: "rgba(0,0,0,0)",
			},
			downOption: {
				auto: false,
				textColor: "#333",
				bgColor: "rgba(0,0,0,0)",
			},
		};
	},
	onLoad() {
		this.init();
	},
	methods: {
		onChange(e, index) {
			this.daiList[index].timeData = e;

			console.log('e', e)

		},
		onFinish() {
			this.downCallback();
		},
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		upCallback(page) {
			let pageNum = page.num;
			let pageSize = page.size;

			let params = {
				status: 0,
				page: page.num,
				pageSize: page.size,
			};
			getUserExpendTbcList(params).then(res => {
				let curPageLen = '';
				if (res.data.entitys) {
					curPageLen = res.data.entitys.length;
					if (page.num === 1) this.daiList = [];
					this.daiList = this.daiList.concat(res.data.entitys);
					this.daiList.forEach(item => {
						item.time = item.endDate - item.date;
						item.timeData = {};
					})
					console.log('daiList', this.daiList)
				} else {
					curPageLen = 0;
				}

				this.mescroll.endBySize(curPageLen, res.data.totalCount);
			})

		},
		downCallback() {
			this.$nextTick(function () {
				this.mescroll && this.mescroll.resetUpScroll();
			});
		},
		onTab(index) {
			if (this.curTab != index) {
				this.curTab = index;
				if (this.curTab == 0) {
					this.daiList = [];
				} else {
					this.downCallback();
				}
			}
		},
		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/insights/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;
	position: relative;
	background-color: #fff;

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

		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.tab-two-panel {
		width: 100%;
		height: calc(100% - 240rpx - 40rpx - 120rpx - 80rpx - 48rpx);
		min-height: calc(100% - 240rpx - 40rpx - 120rpx - 80rpx - 48rpx);
		display: flex;
		flex-direction: column;
		padding: 0 32rpx;
		box-sizing: border-box;

		.mescrollUniView {
			width: calc(100vw - 64rpx);
			height: calc(100% - 240rpx - 40rpx - 120rpx - 80rpx - 48rpx);
			min-height: calc(100% - 240rpx - 40rpx - 120rpx - 80rpx - 48rpx);
			display: flex;
			flex-direction: column;

			.dai-list-view {
				width: 100%;
				height: 344rpx;
				min-height: 344rpx;
				margin-bottom: 24rpx;
				display: flex;
				flex-direction: column;
				padding: 32rpx;
				box-sizing: border-box;
				border-radius: 16rpx;
				border: 2rpx solid #EAEAEA;

				.dai-bottom {
					width: 100%;
					margin-top: 12rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}

				.dai-progress {
					width: 100%;
					height: 16rpx;
					min-height: 16rpx;
					display: flex;
				}

				.time-view {
					width: 100%;
					height: 40rpx;
					min-height: 40rpx;
					display: flex;
					flex-direction: row;
					align-items: center;

					.time-panel {
						height: 40rpx;
						display: flex;
						flex: 1;
						flex-direction: row;
						align-items: center;

						.time__custom {
							width: 48rpx;
							height: 40rpx;
							background-color: rgba(254, 46, 46, 0.10);
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 8rpx;
						}
					}
				}

				.dai-mid {
					width: 100%;
					height: 32rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
				}

				.dai-top {
					width: 100%;
					height: 40rpx;
					display: flex;
					flex-direction: row;
					align-items: cneter;
				}
			}
		}
	}

	.box-panel {

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

		padding: 0 32rpx;
		box-sizing: border-box;

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

		.tab-view {
			width: 100%;
			height: 80rpx;
			min-height: 80rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #D0D7DE;
			box-sizing: border-box;
			margin-top: 48rpx;

			.tab-list {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				.tab-line {
					width: 48rpx;
					background-color: #7934F6;
					height: 4rpx;
					position: absolute;
					bottom: 0;
				}
			}

		}

		.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-height: 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: 42rpx;
					height: 42rpx;
					position: absolute;
					right: 24rpx;
					top: -8rpx;
				}
			}
		}

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