feat: 灾毁分页查询

packages/mobile/src/views/DisasterManagement/DisasterManagement.vue

@@ -12,7 +12,8 @@
     </div>
     <CurrentSite />
     <div class="list-panel">
-      <CardItem v-for="(item, index) in list" :key="index" :title="getEventTitle(item)" @click="handleClickItem(item)">
+      <van-list :loading="loading" :finished="finished" finished-text="没有更多了" @load="handleLoadMore">
+        <CardItem v-for="(item, index) in list" :key="index" :title="item.eventName" @click="handleClickItem(item)">
           <template #headerExtra>
             <van-tag :type="getEventStatusType(item.eventStatus)" plain size="medium">
               {{ getEventStatusText(item.eventStatus) }}
@@ -35,12 +36,9 @@
 
           <van-icon class="jump-icon-absolute" name="arrow" />
         </CardItem>
+      </van-list>
 
-      <div v-if="loading" class="loading-wrapper">
+      <EmptyBox v-if="!loading && loaded && list.length === 0" :placeholder="emptyText" />
-        <van-loading size="24px" vertical>加载中...</van-loading>
-      </div>
-
-      <EmptyBox v-if="!loading && list.length === 0" :placeholder="emptyText" />
     </div>
 
     <van-button type="primary" class="footer-btn" @click="handleAdd">灾害填报</van-button>
@@ -52,8 +50,8 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
-import { showToast, Tag as VanTag, Loading as VanLoading, Icon as VanIcon, Button as VanButton, showImagePreview } from 'vant'
+import { showToast, Tag as VanTag, List as VanList, Icon as VanIcon, Button as VanButton } from 'vant'
 import PageContainer from '@/components/PageContainer.vue'
 import SearchInput from '@/components/SearchInput.vue'
 import CardItem from '@/components/CardItem.vue'
@@ -73,6 +71,14 @@ const list = ref([])
 // 加载状态
 const loading = ref(false)
 
+const loaded = ref(false)
+
+const finished = ref(false)
+
+const pageNum = ref(1)
+
+const pageSize = 10
+
 // 空状态文本
 const emptyText = ref('暂无相关灾毁信息')
 
@@ -92,6 +98,7 @@ const disasterTypes = [
   { label: '行道树倒塌', value: '行道树倒塌' },
   { label: '积水', value: '积水' },
   { label: '积雪', value: '积雪' },
+  { label: '冰雪灾害', value: '冰雪灾害' },
   { label: '其他', value: '其他' }
 ]
 
@@ -138,18 +145,25 @@ const getShortTypeName = (type) => {
     积水: '积水',
     积雪: '积雪',
     其他: '其他',
-    未抢险: '待抢险',
+    冰雪灾害: '冰雪'
-    抢险中: '抢险中',
-    已完成: '已完成',
-    高速公路: '高速',
-    国道: '国道',
-    省道: '省道'
   }
   return typeMap[type] || (type ? type.substring(0, 2) : '全部')
 }
 
 // 获取灾毁列表数据
-const getDisasterList = async (keyword = '', disasterType = null) => {
+const getDisasterList = async ({ reset = false } = {}) => {
+  console.log("loading.value", loading.value)
+  if (loading.value) return
+
+  if (reset) {
+    pageNum.value = 1
+    finished.value = false
+    loaded.value = false
+    list.value = []
+  }
+
+  if (finished.value) return
+
   loading.value = true
 
   try {
@@ -157,13 +171,14 @@ const getDisasterList = async (keyword = '', disasterType = null) => {
       url: '/snow-ops-platform/unified-disaster/list',
       method: 'get',
       params: {
-        pageSize: 999,
+        pageNum: pageNum.value,
-        keyword: keyword.trim(),
+        pageSize,
-        roadConditionType: disasterType || undefined
+        keyword: searchValue.value.trim(),
+        roadConditionType: selectedDisasterType.value || undefined
       }
     })
     if (result?.data?.records) {
-      list.value = result.data.records.map((item) => ({
+      const records = result.data.records.map((item) => ({
         ...item,
         // 数据转换，确保前端使用的字段存在
         title: getEventTitle(item),
@@ -171,28 +186,45 @@ const getDisasterList = async (keyword = '', disasterType = null) => {
         occurTime: item.occurTime,
         estimateRecoverTime: item.expectRecoverTime
       }))
+      list.value = reset ? records : [...list.value, ...records]
+      const total = Number(result.data.total || 0)
+      finished.value = list.value.length >= total || records.length < pageSize
+      pageNum.value += 1
     } else {
       showToast(result.message || '获取数据失败')
+      if (reset) {
         list.value = []
       }
+      finished.value = true
+    }
   } catch (error) {
     console.error('获取灾毁列表失败:', error)
     showToast('获取数据失败，请稍后重试')
+    if (reset) {
       list.value = []
+    }
+    finished.value = true
   } finally {
     loading.value = false
+    loaded.value = true
   }
 }
 
 // 搜索处理
 const handleSearch = () => {
-  getDisasterList(searchValue.value, selectedDisasterType.value)
+  getDisasterList({ reset: true })
 }
 
 // 筛选确认
 const handleFilterConfirm = (type) => {
   // selectedDisasterType 已经通过 v-model 更新，这里只需重新请求数据
-  getDisasterList(searchValue.value, type)
+  selectedDisasterType.value = type
+  getDisasterList({ reset: true })
+}
+
+const handleLoadMore = () => {
+  if (!loaded.value) return
+  getDisasterList()
 }
 
 // 点击返回
@@ -227,16 +259,25 @@ const handleAdd = () => {
 
 // 页面初始化加载数据
 onMounted(() => {
-  getDisasterList()
+  getDisasterList({ reset: true })
 })
 </script>
 
 <style lang="scss" scoped>
+:deep(.page-content-wrapper) {
+  display: flex;
+  flex-direction: column;
+}
+
 .list-panel {
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding-bottom: 80px;
+  overflow: auto;
+  box-sizing: border-box;
+  flex: 1;
+  min-height: 100px;
 }
 
 .filter-wrapper {
@@ -321,12 +362,6 @@ onMounted(() => {
   }
 }
 
-.loading-wrapper {
-  display: flex;
-  justify-content: center;
-  padding: 40px 0;
-}
-
 :deep(.van-button) {
   &.active {
     background-color: #1989fa;