f

src/pages/agent-promote-details.vue

@@ -1,5 +1,6 @@
 <script setup>
 definePage({ layout: 'default', auth: true })
+import { onReachBottom } from '@dcloudio/uni-app'
 // 颜色配置（根据产品名称映射）
 const typeColors = {
   小微企业: { bg: 'bg-blue-100', text: 'text-blue-800', dot: 'bg-blue-500' },
@@ -40,6 +41,8 @@ const data = ref({
   list: [],
 })
 const loading = ref(false)
+const hasMore = ref(true)
+const loadMoreState = ref('loading')
 
 // 获取颜色样式
 function getReportTypeStyle(name) {
@@ -119,16 +122,48 @@ function getStatusStyle(item) {
 }
 
 // 获取数据
-async function getData() {
+function mergeUniqueById(oldList, newList) {
+  const map = new Map()
+  const resolveKey = (item, index) => String(item?.id ?? item?.order_id ?? `${item?.create_time || ''}_${item?.status || ''}_${index}`)
+  oldList.forEach((item, index) => {
+    map.set(resolveKey(item, index), item)
+  })
+  newList.forEach((item, index) => {
+    map.set(resolveKey(item, oldList.length + index), item)
+  })
+  return Array.from(map.values())
+}
+
+async function getData(reset = false) {
   try {
+    if (loading.value)
+      return
+    if (!reset && !hasMore.value)
+      return
     loading.value = true
+    if (reset) {
+      page.value = 1
+      hasMore.value = true
+      loadMoreState.value = 'loading'
+      data.value = { total: 0, list: [] }
+    }
     const { data: res, error } = await useApiFetch(
       `/agent/commission?page=${page.value}&page_size=${pageSize.value}`,
       { silent: true },
     ).get().json()
 
     if (res.value?.code === 200 && !error.value) {
-      data.value = res.value.data
+      const incoming = res.value.data.list || []
+      data.value.total = res.value.data.total || 0
+      data.value.list = reset ? incoming : mergeUniqueById(data.value.list, incoming)
+      const isLastPage = incoming.length < pageSize.value || data.value.list.length >= data.value.total
+      hasMore.value = !isLastPage
+      loadMoreState.value = isLastPage ? 'finished' : 'loading'
+      if (!isLastPage)
+        page.value += 1
+    }
+    else {
+      loadMoreState.value = 'error'
     }
   }
   finally {
@@ -136,13 +171,12 @@ async function getData() {
   }
 }
 
-function onPageChange({ value }) {
-  page.value = value
-  getData()
-}
-
 // 初始化加载
 onMounted(() => {
+  getData(true)
+})
+
+onReachBottom(() => {
   getData()
 })
 </script>
@@ -212,14 +246,7 @@ onMounted(() => {
         暂无记录
       </view>
     </view>
-    <wd-pagination
-      v-model="page"
-      :total="data.total"
-      :page-size="pageSize"
-      show-icon
-      show-message
-      @change="onPageChange"
-    />
+    <wd-loadmore :state="loadMoreState" @reload="getData" />
   </view>
 </template>
 
@@ -235,6 +262,6 @@ onMounted(() => {
 }
 
 .detail-scroll {
-    height: calc(100vh - 110px);
+    min-height: calc(100vh - 110px);
 }
 </style>