From dccdd43e3ac04d4460630c019291b14609585d53 Mon Sep 17 00:00:00 2001
From: Waiting <waitinghc@foxmail.com>
Date: Thu, 9 May 2024 23:51:16 +0800
Subject: [PATCH] =?UTF-8?q?bug=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../subs/coupon/components/coupon-item.vue    |  8 ++---
 src/pages/mine/subs/coupon/index.vue          | 34 +++++++++++++------
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/pages/mine/subs/coupon/components/coupon-item.vue b/src/pages/mine/subs/coupon/components/coupon-item.vue
index 93a2b64..548f64e 100644
--- a/src/pages/mine/subs/coupon/components/coupon-item.vue
+++ b/src/pages/mine/subs/coupon/components/coupon-item.vue
@@ -1,16 +1,16 @@
 <template>
   <view class='coupon-content'>
     <image v-if='item?.status==0' :src='assetsUrl("bg_coupon.png")' />
-    <image v-else-if='item?.status==1' :src='assetsUrl("bg_coupon_expired.png")' />
-    <view class='left-content accent-text-color' :class='{"left-content-disabled": item?.status==1}'>
+    <image v-else-if='item?.status==1||item?.status==2' :src='assetsUrl("bg_coupon_expired.png")' />
+    <view class='left-content accent-text-color' :class='{"left-content-disabled": item?.status!=0}'>
       <text>{{ item?.reduce }}</text>
       <text>满{{ item?.threshold }}元可用</text>
     </view>
 
-    <view class='right-content accent-text-color' :class='{"right-content-disabled": item?.status==1}'>
+    <view class='right-content accent-text-color' :class='{"right-content-disabled": item?.status!=0}'>
       <text>{{ item?.name }}</text>
       <text>有效期至{{ dayjs(item?.startTime).format('YYYY-MM-DD') }}</text>
-      <text class='btn-text' :class='{"btn-text-disabled": item?.status==1}' @click.stop='goPath("/pages/mall/index")'>
+      <text class='btn-text' :class='{"btn-text-disabled": item?.status!=0}' @click.stop='goPath("/pages/mall/index")'>
         立即使用
       </text>
     </view>
diff --git a/src/pages/mine/subs/coupon/index.vue b/src/pages/mine/subs/coupon/index.vue
index 8520f71..c09b9b2 100644
--- a/src/pages/mine/subs/coupon/index.vue
+++ b/src/pages/mine/subs/coupon/index.vue
@@ -1,12 +1,14 @@
 <template>
   <tabbar :titles='["全部","未使用","已使用"]' :indicator-color='"#D95554"' @change='tabChange' />
-  <u-list>
-    <coupon-item v-for='item in coupons' :item='item' :key='item.id' />
-    <u-empty v-if='coupons.length === 0' text='暂无优惠券' marginTop='100' />
+  <u-list @scrolltolower='onLoadMore'>
+    <coupon-item v-for='item in couponList' :item='item' :key='item.id' />
+    <u-loadmore v-if='couponList.length>0' :status='loadingStatus' />
+    <u-empty v-if='couponList.length === 0' text='暂无优惠券' marginTop='100' />
   </u-list>
 </template>
 
 <script lang='ts' setup>
+import { ref } from 'vue';
 
 import CouponItem from './components/coupon-item.vue';
 import { getCouponList } from '@/api/user';
@@ -18,7 +20,9 @@ const store = useUserStore();
 const { userInfo } = storeToRefs(store);
 
 const couponStatus = ref<number | any>(undefined);
-const coupons = ref<CouponBean[]>([]);
+const couponList = ref<CouponBean[]>([]);
+const currentPageNum = ref(1);
+const loadingStatus = ref('loading');
 
 onLoad(async () => {
   await fetchData();
@@ -36,25 +40,33 @@ const tabChange = (index: number) => {
       couponStatus.value = 1;
       break;
   }
+  currentPageNum.value = 1;
   fetchData();
 };
 
-const fetchData = async () => {
+const fetchData = async (refresh: boolean = true) => {
+  loadingStatus.value = 'loading';
+  if(!refresh) {
+    currentPageNum.value += 1;
+  }
+
   const { list } = await getCouponList({
     companyId: getCompanyId(),
     memberId: userInfo.value?.id,
     status: couponStatus.value,
-    pageNum: 1,
+    pageNum: currentPageNum.value,
     pageSize: 20
   });
-  coupons.value = list;
+  if(refresh) {
+    couponList.value = list;
+  } else {
+    couponList.value = couponList.value.concat(list);
+  }
+  loadingStatus.value = 'no';
 };
 
 const onLoadMore = () => {
-  if(coupons.value.length >= 20) {
-    return;
-  }
-  fetchData();
+  fetchData(false);
 };
 </script>