f

src/pages/history-query.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { onMounted, ref } from 'vue'
+import { onReachBottom } from '@dcloudio/uni-app'
 definePage({ layout: 'default', auth: true })
 
 const page = ref(1)
@@ -7,30 +8,65 @@ const pageSize = ref(10)
 const total = ref(0)
 const reportList = ref([])
 const loading = ref(false)
+const hasMore = ref(true)
+const loadMoreState = ref('loading')
 // 初始加载数据
-async function fetchData() {
+function mergeUniqueById(oldList, newList) {
+  const map = new Map()
+  const resolveKey = (item, index) => String(item?.id ?? item?.order_id ?? `${item?.create_time || ''}_${item?.query_state || ''}_${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 fetchData(reset = false) {
+  if (loading.value)
+    return
+  if (!reset && !hasMore.value)
+    return
   loading.value = true
+  if (reset) {
+    page.value = 1
+    hasMore.value = true
+    loadMoreState.value = 'loading'
+    reportList.value = []
+  }
   const { data, error } = await useApiFetch(`query/list?page=${page.value}&page_size=${pageSize.value}`, { silent: true })
     .get()
     .json()
   if (data.value && !error.value) {
     if (data.value.code === 200) {
       total.value = data.value.data.total
-      reportList.value = data.value.data.list || []
+      const incoming = data.value.data.list || []
+      reportList.value = reset ? incoming : mergeUniqueById(reportList.value, incoming)
+      const isLastPage = incoming.length < pageSize.value || reportList.value.length >= total.value
+      hasMore.value = !isLastPage
+      loadMoreState.value = isLastPage ? 'finished' : 'loading'
+      if (!isLastPage)
+        page.value += 1
     }
+    else {
+      loadMoreState.value = 'error'
+    }
+  }
+  else {
+    loadMoreState.value = 'error'
   }
   loading.value = false
 }
 
 // 初始加载
 onMounted(() => {
-  fetchData()
+  fetchData(true)
 })
 
-function onPageChange({ value }) {
-  page.value = value
+onReachBottom(() => {
   fetchData()
-}
+})
 
 function toDetail(item) {
   if (item.query_state !== 'success')
@@ -102,20 +138,13 @@ function statusClass(state) {
         暂无记录
       </view>
     </view>
-    <wd-pagination
-      v-model="page"
-      :total="total"
-      :page-size="pageSize"
-      show-icon
-      show-message
-      @change="onPageChange"
-    />
+    <wd-loadmore :state="loadMoreState" @reload="fetchData" />
   </view>
 </template>
 
 <style scoped>
 .history-scroll {
-    height: calc(100vh - 120px);
+    min-height: calc(100vh - 120px);
 }
 
 .status-pending {