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-40 value-box " @tap="state.showModel = true">
				<view class="all-title ss-m-r-8">#</view>
			</view>
			<view class="ss-m-b-40 ss-font-40">
				<text class="all-title ss-m-r-8">#{{ points2point(userWallet.integralDO.currentQuota) }}</text>
			</view>
			<view class="ss-m-b-40 ss-font-32 text-center">
				<view class="all-title ss-m-r-8 ss-m-b-10 ">
					当前可兑换积分:#{{ points2point(userWallet.integralDO.currentQuota) }}</view>
				<view class="all-title ss-m-r-8" style="color: var(--ui-BG-Main)" @tap="state.showQueModel = true">
					待确权积分:#{{points2point(userWallet.integralDO.freezeQuota)}}</view>
			</view>
			<view class="ss-m-b-80">
				<view class="all-title ss-m-r-8 ss-m-b-10">可兑换积分得计算规则</view>
				<view class="all-title ss-m-r-8 text-center">[点击查看说明]</view>
			</view>
			<view class="ss-m-b-40">
				<view class="all-title ss-m-r-8">
					<button class="btn ss-reset-button ui-Shadow-Main"
						@tap="sheep.$router.go('/pages/user/wallet/scoreToMoney')">
						兑换
					</button>
				</view>
			</view>
			<!-- <view class="ss-m-b-40">
				<view class="all-title ss-m-r-8">
					<button class="btn ss-reset-button ui-Shadow-Main">
						代购NFR
					</button>
				</view>
			</view> -->
		</view>
		<!-- 积分来源 -->
		<su-popup :show="state.showModel" type="center" round="10" :isMaskClick="false" showClose @close="close">
			<view class="model-box ss-flex-col">
				<scroll-view class="list-box" style="width: 600rpx;" scroll-y="true" @touchmove.stop>
					<view v-if="state.pagination.total > 0">
						<view class="list-item ss-flex ss-col-center ss-row-between "
							v-for="(item,index)  in state.pagination.list" :key="item.id" style="padding: 30rpx 0;">
							<view class="ss-flex ss-col-center" style="width: 100%;">
								<view>
									{{index+1}}
								</view>
								<!-- 头像 -->
								<view class="avatar-box ss-m-x-20">
									<image class="avatar-img" :src="
									    sheep.$url.static('/static/img/shop/default_avatar.png')" mode="aspectFill"></image>
								</view>
								<view class="ss-flex ss-m-t-10"
									style="flex-direction: column;align-items: flex-start;width: calc(100% - 5.5rem);">
									<view class="name" style="width: 100%;"> {{ item.name || '空' }} <text
											style="float: right;">#{{item.point}}</text></view>
									<view class="time " style="width: 100%;">
										{{sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM')}}
										<text style="float: right;">消费额:￥234</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<s-empty v-else text="暂无数据" paddingTop="120" icon="/static/data-empty.png" />
				</scroll-view>
			</view>
		</su-popup>
		{{state.pagination.list}}
		<!-- 积分确权 -->
		<su-popup :show="state.showQueModel" type="center" round="10" :isMaskClick="false" showClose @close="close">
			<view class="model-box ss-flex-col">
				<view class="all-title ss-p-x-30 ss-p-t-30">
					待确权积分 <text style="float: right;">共#{{points2point(userWallet.integralDO.freezeQuota)}}</text>
				</view>
				
				<scroll-view class="list-box" style="width: 600rpx;" scroll-y="true" @touchmove.stop>
					<view v-if="!(state.pagination.total > 0)">
						<view class="list-item ss-flex ss-col-center ss-row-between "
							v-for="(item,index)  in state.pagination.list" :key="item.id" style="padding: 30rpx 0;">
							<view class="ss-flex ss-col-center" style="width: 100%;">
								<view>
									{{index+1}}
								</view>
								<!-- 头像 -->
								<view class="avatar-box ss-m-x-20">
									<image class="avatar-img" :src="
									    sheep.$url.static('/static/img/shop/default_avatar.png')" mode="aspectFill"></image>
								</view>
								<view class="ss-flex ss-m-t-10"
									style="flex-direction: column;align-items: flex-start;width: calc(100% - 5.5rem);">
									<view class="name" style="width: 100%;"> {{ item.name || '空' }} <text
											style="float: right;">#{{item.point}}</text></view>
									<view class="time " style="width: 100%;">
										{{sheep.$helper.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM')}}
										<text style="float: right;">消费额:￥234</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<s-empty v-else text="暂无数据" paddingTop="80" icon="/static/data-empty.png" />
				</scroll-view>
			</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';

	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": [{
					"createTime": 1713607898000,
					"profitStatus": 6,
					"profitStatusName": "最高可以获得积分",
					"userId": 247,
					"orderId": 67,
					"orderNo": "o202404161713151",
					"id": 28,
					"amount": 93312,
					"afterAmount": 2822688,
					"freezeAmount": null,
					"afterFreezeAmount": null,
					"percentTemplate": "{\"createTime\":1712568106000,\"updateTime\":1713238272000,\"creator\":\"1\",\"updater\":\"1\",\"deleted\":false,\"id\":1,\"grossProfitPerc\":\"0.3888\",\"grossProfitUserQuotaPerc\":\"0.3500\",\"grossProfitAncestorQuotaPerc\":\"0.3500\",\"grossProfitBonusQuotaPerc\":\"0.0800\",\"grossProfitPlatformQuotaPerc\":\"0.1000\",\"divideIntoPerc\":\"0.0400\",\"status\":1}"
				},
				{
					"createTime": 1713607898000,
					"profitStatus": 4,
					"profitStatusName": "直推人额度",
					"userId": 247,
					"orderId": 73,
					"orderNo": "o202404172239581",
					"id": 33,
					"amount": 13608,
					"afterAmount": 227832,
					"freezeAmount": null,
					"afterFreezeAmount": null,
					"percentTemplate": "{\"createTime\":1712568106000,\"updateTime\":1713238272000,\"creator\":\"1\",\"updater\":\"1\",\"deleted\":false,\"id\":1,\"grossProfitPerc\":\"0.3888\",\"grossProfitUserQuotaPerc\":\"0.3500\",\"grossProfitAncestorQuotaPerc\":\"0.3500\",\"grossProfitBonusQuotaPerc\":\"0.0800\",\"grossProfitPlatformQuotaPerc\":\"0.1000\",\"divideIntoPerc\":\"0.0400\",\"status\":1}"
				},
				{
					"createTime": 1713607898000,
					"profitStatus": 6,
					"profitStatusName": "最高可以获得积分",
					"userId": 247,
					"orderId": 73,
					"orderNo": "o202404172239581",
					"id": 35,
					"amount": 116640,
					"afterAmount": 1632960,
					"freezeAmount": null,
					"afterFreezeAmount": null,
					"percentTemplate": "{\"createTime\":1712568106000,\"updateTime\":1713238272000,\"creator\":\"1\",\"updater\":\"1\",\"deleted\":false,\"id\":1,\"grossProfitPerc\":\"0.3888\",\"grossProfitUserQuotaPerc\":\"0.3500\",\"grossProfitAncestorQuotaPerc\":\"0.3500\",\"grossProfitBonusQuotaPerc\":\"0.0800\",\"grossProfitPlatformQuotaPerc\":\"0.1000\",\"divideIntoPerc\":\"0.0400\",\"status\":1}"
				}
			],

			total: 0,
			pageSize: 6,
			pageNo: 1,
		},
		loadStatus: '',

	});



	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;
		}
		state.pagination.list = data.list;
		state.pagination.total = data.total;
		state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
	}

	onLoad(() => {
		// getLogList(true);
		// getLogList(false);
	});


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

	onReachBottom(() => {
		onLoadMore();
	});
</script>

<style lang="scss" scoped>
	.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: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 50%;
		border: 2px solid #f6f6f6;
	}

	.btn {
		width: 300rpx;
		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;
			}
		}
	}

	.list-box {
		width: 500rpx;
		height: 600rpx;
		padding: 0 20rpx;
		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>