mall-front-app/pages/user/wallet/score.vue

<!-- 我的数字权益 -->
<template>
	<s-layout class="wallet-wrap" :bgStyle="{'backgroundColor':'#ffffff'}" title="我的数字权益" navbar="normal">
		<view class="score-box bg-white ss-flex-col ss-row-center ss-col-center">
			<view class="ss-m-b-10  circle value-box ss-flex ss-row-center" :style="circleStyle">
				<view >数字 <br> 权益</view>
			</view>

			<view class="ss-m-b-30 ss-font-40"  :style="{color:percentageColor}">
				<text class="all-title ss-m-r-8">{{ points2point(userWallet.integralDO.currentQuota) }}</text>
			</view>
			<view class="ss-m-b-40">
				<view class="all-title ss-m-r-8">
					<!-- @tap="sheep.$router.go('/pages/user/wallet/scoreToMoney')" -->
					<button class="btn ss-reset-button ui-Shadow-Main" @tap="sheep.$helper.toast('功能待开放')">
						兑换
					</button>
				</view>
			</view>
			<!-- 分割线 -->
			<view style="width: 100%;height: 20rpx;background-color: #ececec;"></view>
			<uni-list :border="false" class="ss-p-t-10 ss-w-100">
				<uni-list-item clickable @tap="sheep.$router.go('/pages/user/wallet/maxScoreLog')"
					title="当前可获得峰值" showArrow :border="false">
					<template v-slot:body>
						<p style="width: 100%">
							当前可获得峰值：{{ points2point(userWallet.integralDO.currentQuota) }}/{{ points2point(userWallet.integralDO.highQuota) }}
						</p>
					</template>
				</uni-list-item>
				<uni-list-item clickable @tap="sheep.$router.go('/pages/user/wallet/ScoreLog', {isFreeze: true})"
					title="待确权" showArrow :border="false">
					<template v-slot:body>
						<p style="width: 100%">待确权：{{points2point(userWallet.integralDO.freezeQuota)}}</p>
					</template>
				</uni-list-item>
				<uni-list-item clickable @tap="sheep.$router.go('/pages/user/wallet/ScoreLog',{isFreeze: false})"
					title="数字权益来源记录" showArrow :border="false">
					<template v-slot:body>
						<p style="width: 100%">数字权益来源记录</p>
					</template>
				</uni-list-item>
				<uni-list-item clickable @tap="state.showModel = true" title="数字权益计算规则" :border="false">
					<template v-slot:body>
						<p style="width: 100%">数字权益计算规则</p>
					</template>
				</uni-list-item>
			</uni-list>

		</view>
		<!-- 数字权益计算规则 -->
		<su-popup :show="state.showModel" type="center" round="10" :isMaskClick="false" showClose @close="close">
			<view class="head-nav">
				<view :class="state.navIndex==0?'activite':''" class="ss-m-l-20" @click="checkIndex(0)">
					数字权益计算规则
				</view>
			</view>
			<scroll-view class="scroll-view_H" scroll-y="true">

				<richtext title="数字权益计算规则" type='tab' />
			</scroll-view>
		</su-popup>

	</s-layout>

</template>

<script setup>
	import sheep from '@/sheep';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive
	} from 'vue';
	import {
		points2point
	} from '@/sheep/hooks/useGoods';
	import _ from 'lodash';
	import dayjs from 'dayjs';
	import PointApi from '@/sheep/api/member/point';
	import {
		resetPagination
	} from '@/sheep/util';
	import ScoreApi from '@/sheep/api/distri/score';
	
	import ScoreLog from './ScoreLog'
	import richtext from '@/pages/public/richtext'
	
	const userWallet = computed(() => sheep.$store('user').userWallet);
	const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
	const userInfo = computed(() => sheep.$store('user').userInfo);
	const sys_navBar = sheep.$platform.navbar;

	const state = reactive({
		currentTab: 0,
		pagination: {
			list: [],
			total: 0,
			pageSize: 10,
			pageNo: 1,
		},
		loadStatus: '',
		showModel: false,

	});

	function close() {
		state.showModel = false;
	}
	const pointsPercentage = computed(() => {
		const currentQuota = parseFloat(points2point(userWallet.value.integralDO.currentQuota))
		const highQuota =parseFloat(points2point(userWallet.value.integralDO.highQuota))
		if (currentQuota > highQuota) {
			return 100;
		} else {
			const percentage = (currentQuota / highQuota) * 100;
			
			return Math.min(percentage, 100); // 确保百分比不会超过100
		}
	});
	const percentageColor = computed(() => {
		if (pointsPercentage.value>=90) {
			return '#fe0000';
		} else if(pointsPercentage.value>=75){
			return '#d8b800';
		} else {
			return '#0c912f';
		}
	});
	const circleStyle = computed(() => {
	      return {
	        background: `conic-gradient(${percentageColor.value} ${pointsPercentage.value}%, #ddd ${pointsPercentage.value}%)`
	      };
	    });
	async function getLogList(isFreeze) {
		state.loadStatus = 'loading';
		// isFreeze为true是冻结数字权益 isFreeze为false是已拿到的数字权益
		let {
			code,
			data
		} = await ScoreApi.getScoreApi({
			pageNo: state.pagination.pageNo,
			pageSize: state.pagination.pageSize,
			isFreeze: isFreeze
		});
		if (code !== 0) {
			return;
		}
		let list = _.concat(state.pagination.list, data.list);
		state.pagination.list = list;
		state.pagination.total = data.total;
		state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
	}
	function onLoadMore(isFreeze) {

		if (state.loadStatus === 'noMore') {
			return;
		}
		state.pagination.pageNo++;
		getLogList(isFreeze);
	}

	onReachBottom(() => {

		onLoadMore();
	});
</script>

<style lang="scss" scoped>
	.circle {
		position: relative;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		
	}

	.circle::before {
		content: '';
		position: absolute;
		top: 10px;
		left: 10px;
		right: 10px;
		bottom: 10px;
		border-radius: 50%;
		background-color: #fff;
	}

	.circle view {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 14px;
		font-weight: bold;
	}



	.scroll-view_H {
		width: 600rpx;
		height: 700rpx;
		padding: 20rpx;
	}

	.head-nav {
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		color: rgb(14, 147, 46);

	}

	.head-nav>view {
		padding-bottom: 10rpx;
		border-bottom: 4rpx solid rgb(14, 147, 46);
	}

	.uni-list-item {
		margin: 0 20rpx;
		padding: 10rpx 0;
		border-bottom: 1px solid #d8d8d9;
	}

	.color-red {
		color: red;
	}

	.color-green {
		color: green;
	}

	.score-box {
		// margin: 20rpx;
		border-radius: 20rpx;
		padding-top: 100rpx;
	}

	.avatar-box {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;

		.avatar-img {
			width: 100%;
			height: 100%;
		}
	}

	.value-box {
		width: 150rpx;
		height: 150rpx;
		// line-height: 100rpx;
		text-align: center;
		border-radius: 50%;
		// border: 8px solid #fe0000;
		font-weight: bold;
	}

	.btn {
		width: 250rpx;
		background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
		border-radius: 20rpx;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 80rpx;
		color: $white;
		position: relative;
		z-index: 1;
	}

	.header-box {
		width: 100%;
		background: linear-gradient(180deg, var(--ui-BG-Main) 0%, var(--ui-BG-Main-gradient) 100%) no-repeat;
		background-size: 750rpx 100%;
		padding: 0 0 120rpx 0;
		box-sizing: border-box;

		.score-box {
			height: 100%;

			.all-num {
				font-size: 50rpx;
				font-weight: bold;
				color: #fff;
				font-family: OPPOSANS;
			}

			.all-title {
				font-size: 26rpx;
				font-weight: 500;
				color: #fff;
			}

			.cicon-help-o {
				color: #fff;
				font-size: 28rpx;
			}
		}
	}

	// 筛选
	.filter-box {
		height: 114rpx;
		background-color: $bg-page;

		.total-box {
			font-size: 24rpx;
			font-weight: 500;
			color: $dark-9;
		}

		.date-btn {
			background-color: $white;
			line-height: 54rpx;
			border-radius: 27rpx;
			padding: 0 20rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: $dark-6;

			.ss-seldate-icon {
				font-size: 50rpx;
				color: $dark-9;
			}
		}
	}

	.model-box {
		height: 50vh;
	}

	.list-box {
		width: 500rpx;
		padding: 0 30rpx;
		overflow-y: auto;

		.list-item {

			background: #fff;
			// border-bottom: 1rpx solid #dfdfdf;
			padding: 30rpx;

			.name {
				font-size: 28rpx;

				font-weight: 500;
				color: rgba(102, 102, 102, 1);
				line-height: 28rpx;
				// margin-bottom: 20rpx;
			}

			.time {
				font-size: 24rpx;

				font-weight: 500;
				color: rgba(196, 196, 196, 1);
				line-height: 24px;
			}

			.add {
				font-size: 30rpx;

				font-weight: 500;
				color: #e6b873;
			}

			.minus {
				font-size: 30rpx;

				font-weight: 500;
				color: $dark-3;
			}
		}
	}
</style>