浏览代码

feat: 优化优惠券审核列表,增加加载更多功能,重构数据加载逻辑以支持分页

laiqi 9 月之前
父节点
当前提交
10928fb917
共有 2 个文件被更改,包括 140 次插入53 次删除
  1. 136 46
      src/pages/coupon/audit-list.vue
  2. 4 7
      src/store/coupon.ts

+ 136 - 46
src/pages/coupon/audit-list.vue

@@ -41,7 +41,7 @@
 
     <!-- 列表 -->
     <view class="px-4">
-      <view v-if="loading" class="flex justify-center py-8">
+      <view v-if="initialLoading" class="flex justify-center py-8">
         <wd-loading />
       </view>
 
@@ -110,13 +110,28 @@
           </view>
         </view>
       </view>
+
+      <!-- 加载更多组件 -->
+      <wd-loadmore
+        v-if="shouldShowLoadMore"
+        :state="loadMoreState"
+        loading-text="点击加载更多"
+        @reload="loadMoreData"
+      />
+
+      <!-- 手动加载更多按钮 -->
+      <view v-else-if="hasMoreData" class="text-center py-4">
+        <wd-button type="primary" size="small" @click="loadMoreData">
+          加载更多 ({{ couponList.length }}/{{ totalCount }})
+        </wd-button>
+      </view>
     </view>
   </view>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { onLoad, onShow } from '@dcloudio/uni-app'
+import { ref, computed } from 'vue'
+import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app'
 import { useCouponStore } from '@/store/coupon'
 import { useUserStore } from '@/store/user'
 import { useMessage } from 'wot-design-uni'
@@ -143,14 +158,32 @@ const filterTypeOptions = ref([
 const statusOptions = ref([
   { label: '全部', value: '' },
   { label: '待审核', value: '0' },
-  { label: '已通过', value: '1' },
-  { label: '已驳回', value: '2' },
+  // { label: '已通过', value: '1' },
+  // { label: '已驳回', value: '2' },
 ])
 
 // 列表数据
 const couponList = ref([])
-const originalCouponList = ref([])
-const loading = ref(false)
+const initialLoading = ref(false)
+
+// 分页相关
+const currentPage = ref(1)
+const pageSize = ref(10)
+const totalCount = ref(0)
+const loadMoreState = ref<'loading' | 'finished' | 'error' | undefined>(undefined)
+
+// 计算属性
+const hasMoreData = computed(() => {
+  return couponList.value.length < totalCount.value && totalCount.value > 0
+})
+
+const shouldShowLoadMore = computed(() => {
+  return (
+    loadMoreState.value === 'loading' ||
+    loadMoreState.value === 'finished' ||
+    loadMoreState.value === 'error'
+  )
+})
 
 // 格式化日期时间
 const formatDateTime = (dateTime: string) => {
@@ -224,57 +257,103 @@ const onFilterTypeChange = () => {
   filterForm.value.value = ''
 }
 
-// 获取列表数据
-const loadCouponList = async () => {
+// 构建查询参数
+const buildQueryParams = () => {
+  const params: any = {}
+
+  if (filterForm.value.type && filterForm.value.value) {
+    if (filterForm.value.type === 'phone') {
+      params['coupon2phone.Like'] = filterForm.value.value
+    } else if (filterForm.value.type === 'name') {
+      params['usersname.Like'] = filterForm.value.value
+    } else if (filterForm.value.type === 'status') {
+      if (filterForm.value.value !== '') {
+        params.coupon2sype = filterForm.value.value
+      }
+    }
+  }
+
+  return params
+}
+
+// 获取列表数据(分页)
+const loadCouponList = async (isLoadMore = false) => {
   try {
-    loading.value = true
+    if (!isLoadMore) {
+      initialLoading.value = true
+    }
+
+    if (isLoadMore) {
+      loadMoreState.value = 'loading'
+    }
 
-    const result = await couponStore.getCoupon2AuditList({})
+    const queryParams = buildQueryParams()
+    const result = await couponStore.getCoupon2AuditList(queryParams, {
+      pageindex: currentPage.value,
+      rows: pageSize.value,
+    })
 
     if (result && result.Data) {
-      originalCouponList.value = result.Data
-      couponList.value = [...originalCouponList.value]
-      // 加载完数据后自动执行筛选
-      handleSearch()
+      if (isLoadMore) {
+        // 加载更多,追加数据
+        couponList.value = [...couponList.value, ...result.Data]
+      } else {
+        // 首次加载或搜索,替换数据
+        couponList.value = result.Data
+      }
+
+      totalCount.value = result.Total || 0
+
+      // 判断是否还有更多数据
+      if (couponList.value.length >= totalCount.value) {
+        // 所有数据已加载完成
+        loadMoreState.value = 'finished'
+      } else {
+        // 还有更多数据,显示默认状态等待用户操作
+        loadMoreState.value = undefined
+      }
     } else {
-      originalCouponList.value = []
-      couponList.value = []
+      if (!isLoadMore) {
+        couponList.value = []
+      }
+      loadMoreState.value = 'finished'
     }
   } catch (error) {
     console.error('获取审核列表失败:', error)
-    message.alert({
-      title: '提示',
-      msg: '获取数据失败,请稍后重试',
-    })
+    loadMoreState.value = 'error'
+    if (!isLoadMore) {
+      message.alert({
+        title: '提示',
+        msg: '获取数据失败,请稍后重试',
+      })
+    }
   } finally {
-    loading.value = false
+    if (!isLoadMore) {
+      initialLoading.value = false
+    }
   }
 }
 
-// 处理搜索
-const handleSearch = () => {
-  // 从原始数据中筛选
-  let filteredList = [...originalCouponList.value]
-
-  if (filterForm.value.type && filterForm.value.value) {
-    if (filterForm.value.type === 'phone') {
-      filteredList = filteredList.filter(
-        (item) => item.coupon2phone && item.coupon2phone.includes(filterForm.value.value),
-      )
-    } else if (filterForm.value.type === 'name') {
-      filteredList = filteredList.filter(
-        (item) => item.usersname && item.usersname.includes(filterForm.value.value),
-      )
-    } else if (filterForm.value.type === 'status') {
-      if (filterForm.value.value !== '') {
-        filteredList = filteredList.filter(
-          (item) => item.coupon2sype.toString() === filterForm.value.value,
-        )
-      }
-    }
+// 加载更多数据
+const loadMoreData = () => {
+  if (
+    loadMoreState.value === 'loading' ||
+    loadMoreState.value === 'finished' ||
+    couponList.value.length >= totalCount.value
+  ) {
+    return
   }
 
-  couponList.value = filteredList
+  currentPage.value++
+  loadCouponList(true)
+}
+
+// 处理搜索
+const handleSearch = () => {
+  // 重置分页
+  currentPage.value = 1
+  couponList.value = []
+  loadCouponList(false)
 }
 
 // 点击列表项
@@ -300,9 +379,17 @@ const checkAuthAndLoadData = () => {
     return
   }
 
-  loadCouponList()
+  // 重置分页状态
+  currentPage.value = 1
+  couponList.value = []
+  loadCouponList(false)
 }
 
+// 触底加载更多
+onReachBottom(() => {
+  loadMoreData()
+})
+
 onLoad(() => {
   checkAuthAndLoadData()
 })
@@ -311,7 +398,10 @@ onLoad(() => {
 onShow(() => {
   // 只有在有审核权限时才刷新数据
   if (userStore.audit_auth) {
-    loadCouponList()
+    // 重置分页状态
+    currentPage.value = 1
+    couponList.value = []
+    loadCouponList(false)
   }
 })
 </script>

+ 4 - 7
src/store/coupon.ts

@@ -161,13 +161,10 @@ export const useCouponStore = defineStore(
     }
 
     // 优惠劵审核_列表
-    const getCoupon2AuditList = async (params) => {
-      const { data: couponList, loading } = useRequest(
-        () => getCoupon2AuditListApi(params, { pageindex: 1, rows: 9999 }),
-        {
-          immediate: true,
-        },
-      )
+    const getCoupon2AuditList = async (params, page = { pageindex: 1, rows: 10 }) => {
+      const { data: couponList, loading } = useRequest(() => getCoupon2AuditListApi(params, page), {
+        immediate: true,
+      })
 
       await until(loading).toBe(false)
       return couponList.value