优化积分兑换记录

pageMarket/points/components/record.vue

@@ -6,10 +6,11 @@
 			</view>
 		</view>
 		<view class="list">
+			<view class="loader"></view>
 			<view class="item" v-for="item in listData.list" :key="item.id">
 				<view class="top">
 					<text class="t">{{ item.orderNo }}</text>
-					<u-tag :type="statusFilter(item.status).type" plain plainFill>{{ item.status }}</u-tag>
+					<u-tag :type="statusFilter(item.status).type" plain plainFill :text="item.status"></u-tag>
 				</view>
 				<view class="row">
 					<text class="name">用户：{{ item.nickName }} {{ item.phone }}</text>
@@ -248,7 +249,7 @@ async function returnCostConfirmHandle() {
 }
 
 // 积分:积分商品:兑换记录
-async function goodsRecordPageAjax(page = listData.page) {
+async function goodsRecordPageAjax(page = listData.page, isPull = false) {
 	try {
 		const res = await goodsRecordPage({
 			page: page,
@@ -268,6 +269,15 @@ async function goodsRecordPageAjax(page = listData.page) {
 	} catch (error) {
 		console.log(error);
 	}
+	if (isPull) {
+		setTimeout(() => {
+			uni.showToast({
+				title: '刷新成功',
+				icon: 'none'
+			});
+			uni.stopPullDownRefresh();
+		}, 300);
+	}
 }
 
 defineExpose({
@@ -282,8 +292,36 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+.loader {
+	width: 5px;
+	aspect-ratio: 1;
+	border-radius: 50%;
+	animation: l5 1s infinite linear alternate;
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%) translateY(-80upx);
+}
+@keyframes l5 {
+	0% {
+		box-shadow: 20px 0 #000, -20px 0 #0002;
+		background: #000;
+	}
+	33% {
+		box-shadow: 20px 0 #000, -20px 0 #0002;
+		background: #0002;
+	}
+	66% {
+		box-shadow: 20px 0 #0002, -20px 0 #000;
+		background: #0002;
+	}
+	100% {
+		box-shadow: 20px 0 #0002, -20px 0 #000;
+		background: #000;
+	}
+}
 .container {
-	padding-top: 50px;
+	padding-top: 40px;
 }
 .tab-wrap {
 	$color: #318afe;
@@ -315,6 +353,7 @@ onMounted(() => {
 }
 .list {
 	padding-bottom: 28upx;
+	position: relative;
 	.item {
 		background-color: #fff;
 		border-radius: 20upx;

pageMarket/points/components/userRecord.vue

@@ -72,12 +72,13 @@ async function pointUserPageAjax(page = listData.page) {
 // 去积分详情
 function toDetail(item) {
 	uni.navigateTo({
-		url: `/pageMarket/points/userPointDetail?id=${item.id}&nickName=${item.nickName}&phone=${item.phone}`
+		url: `/pageMarket/points/userPointDetail?id=${item.id}&nickName=${item.nickName}&phone=${item.phone}&point=${item.pointBalance}`
 	});
 }
 
 defineExpose({
-	reachBottom
+	reachBottom,
+	pointUserPageAjax
 });
 
 onMounted(() => {

pageMarket/points/index.vue

@@ -29,7 +29,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue';
-import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
+import { onLoad, onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
 import setting from './components/setting.vue';
 import productPage from './components/productPage.vue';
 import record from './components/record.vue';
@@ -85,6 +85,25 @@ function scanHandle() {
 	});
 }
 
+// 下拉刷新
+onPullDownRefresh(() => {
+	switch (tabsActive.value) {
+		case 0:
+			break;
+		case 1:
+			// productPageRef.value.reachBottom();
+			break;
+		case 2:
+			recordRef.value.goodsRecordPageAjax(1, true);
+			break;
+		case 3:
+			// userRecordRef.value.reachBottom();
+			break;
+		default:
+			break;
+	}
+});
+
 onReachBottom(() => {
 	switch (tabsActive.value) {
 		case 0:

pageMarket/points/userPointDetail.vue

@@ -2,10 +2,10 @@
 	<view>
 		<view class="header-wrap">
 			<view class="item">
-				<text class="t">用户昵称 {{ listData.nickName }}</text>
+				<text class="t">{{ listData.nickName }} {{ listData.phone }}</text>
 			</view>
 			<view class="item">
-				<text class="t">当前积分 {{ listData.phone }}</text>
+				<text class="t">当前积分 {{ listData.point }}</text>
 			</view>
 		</view>
 		<view class="list">
@@ -40,6 +40,7 @@ const listData = reactive({
 	nickName: '',
 	phone: '',
 	id: '',
+	point: '',
 	page: 1,
 	size: 10,
 	status: 'loading',
@@ -80,6 +81,7 @@ onLoad((options) => {
 	listData.id = options.id;
 	listData.nickName = options.nickName;
 	listData.phone = options.phone;
+	listData.point = options.point;
 	pointUserRecordAjax();
 });
 </script>