完成积分锁客模块

pageMarket/points/userPointDetail.vue

@@ -0,0 +1,178 @@
+<template>
+	<view>
+		<view class="header-wrap">
+			<view class="item">
+				<text class="t">用户昵称 {{ listData.nickName }}</text>
+			</view>
+			<view class="item">
+				<text class="t">当前积分 {{ listData.phone }}</text>
+			</view>
+		</view>
+		<view class="list">
+			<view class="item" v-for="item in listData.list" :key="item.id">
+				<view class="top">
+					<text class="t">{{ item.content }}</text>
+				</view>
+				<view class="user-info">
+					<view class="left">
+						<view class="info">
+							<text class="t1">{{ item.shopName }}</text>
+							<text class="t2">{{ item.createTime }}</text>
+						</view>
+					</view>
+					<view class="right">
+						<text class="t1">{{ item.floatPoints }}</text>
+						<text class="t2">变动后积分：{{ item.balancePoints }}</text>
+					</view>
+				</view>
+			</view>
+			<u-loadmore :status="listData.status"></u-loadmore>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+import { onLoad, onReachBottom } from '@dcloudio/uni-app';
+import { pointUserRecord } from '@/http/api/market/point.js';
+
+const listData = reactive({
+	nickName: '',
+	phone: '',
+	id: '',
+	page: 1,
+	size: 10,
+	status: 'loading',
+	list: []
+});
+
+onReachBottom(() => {
+	if (listData.status != 'nomore') {
+		listData.page++;
+		pointUserRecordAjax();
+	}
+});
+
+// 获取用户所有门店下积分列表
+async function pointUserRecordAjax() {
+	try {
+		const res = await pointUserRecord({
+			page: listData.page,
+			size: listData.size,
+			id: listData.id
+		});
+
+		if (listData.page == 1) {
+			listData.list = res.records;
+		} else {
+			listData.list.push(...res.records);
+		}
+
+		if (res.pageNumber >= res.totalPage) {
+			listData.status = 'nomore';
+		}
+	} catch (error) {
+		console.log(error);
+	}
+}
+
+onLoad((options) => {
+	listData.id = options.id;
+	listData.nickName = options.nickName;
+	listData.phone = options.phone;
+	pointUserRecordAjax();
+});
+</script>
+
+<style>
+page {
+	background-color: #f8f8f8;
+}
+</style>
+<style scoped lang="scss">
+.header-wrap {
+	width: 100%;
+	height: 53px;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 999;
+	background-color: #fff;
+	padding: 0 28upx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	.item {
+		flex: 1;
+		&:last-child {
+			display: flex;
+			justify-content: flex-end;
+		}
+		.t {
+			font-size: 28upx;
+			color: #333;
+		}
+	}
+}
+.list {
+	padding: calc(53px + 28upx) 28upx 28upx;
+	.item {
+		background-color: #fff;
+		border-radius: 20upx;
+		padding: 28upx;
+		&:not(:first-child) {
+			margin-top: 28upx;
+		}
+		.top {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			.t {
+				font-size: 32upx;
+				color: #333;
+			}
+		}
+		.user-info {
+			display: flex;
+			padding: 28upx 0;
+			.left {
+				flex: 1;
+				display: flex;
+				.info {
+					flex: 1;
+					display: flex;
+					justify-content: center;
+					flex-direction: column;
+					.t1 {
+						font-size: 28upx;
+						color: #333;
+					}
+					.t2 {
+						font-size: 24upx;
+						color: #666;
+					}
+				}
+			}
+			.right {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				.t1 {
+					font-size: 32upx;
+					color: #333;
+					font-weight: bold;
+				}
+				.t2 {
+					color: #666;
+					font-size: 24upx;
+				}
+			}
+		}
+		.footer-wrap {
+			display: flex;
+			justify-content: flex-end;
+		}
+	}
+}
+</style>