feat: 恢复重建H5 添加加载状态

packages/mobile/src/views/Rebuild/Rebuild.vue

@@ -5,8 +5,8 @@
     <CurrentSite />
 
     <div class="list-panel">
-            <CardItem v-for="(item, index) in list" :key="index" :title="`${item.projectName}`"
-                @click="handleClickItem(item)">
+      <van-list :loading="loading" :finished="finished" finished-text="没有更多了">
+        <CardItem v-for="(item, index) in list" :key="index" :title="`${item.projectName}`" @click="handleClickItem(item)">
           <template #headerExtra>
             <van-tag v-if="item.approvalStatus === 3 || item.approvalStatus === 1" type="success" plain size="medium">审批通过</van-tag>
             <van-tag v-else-if="item.approvalStatus === 2 || item.approvalStatus === 4" type="danger" plain size="medium">审批驳回</van-tag>
@@ -15,11 +15,19 @@
 
           <div class="content">
             <div class="left-info">
-                        <div><span class="label">起止桩号：</span><span class="value">{{ `${item.startStakeNo} -
-                                ${item.endStakeNo}`}}</span>
+              <div>
+                <span class="label">起止桩号：</span
+                ><span class="value">{{
+                  `${item.startStakeNo} -
+                                ${item.endStakeNo}`
+                }}</span>
+              </div>
+              <div>
+                <span class="label">路况位置：</span><span class="value">{{ item.roadLocation }}</span>
+              </div>
+              <div>
+                <span class="label">提交日期：</span><span class="value">{{ item.submitTime }}</span>
               </div>
-                        <div><span class="label">路况位置：</span><span class="value">{{ item.roadLocation }}</span></div>
-                        <div><span class="label">提交日期：</span><span class="value">{{ item.submitTime }}</span></div>
             </div>
             <div class="right-arrow" @click.stop="handleClickItem(item)">
               <van-icon name="arrow" />
@@ -28,12 +36,11 @@
         </CardItem>
 
         <!-- 空状态提示 -->
-            <EmptyBox v-if="list.length === 0" placeholder="暂无相关预警信息" />
+        <!-- <EmptyBox v-if="list.length === 0" placeholder="暂无相关预警信息" /> -->
+      </van-list>
     </div>
 
-        <van-button type="primary" class="add-btn" icon="plus" @click="handleAddDevice">
-            项目填报
-        </van-button>
+    <van-button type="primary" class="add-btn" icon="plus" @click="handleAddDevice"> 项目填报 </van-button>
   </PageContainer>
 </template>
 
@@ -45,9 +52,11 @@ import SearchInput from '@/components/SearchInput.vue'
 import CurrentSite from '@/components/CurrentSite.vue'
 import CardItem from '@/components/CardItem.vue'
 import EmptyBox from '@/components/EmptyBox.vue'
-import { request } from "../../../../shared/utils/request";
+import { request } from '../../../../shared/utils/request'
 
 const router = useRouter()
+const loading = ref(false)
+const finished = ref(false)
 
 onMounted(() => {
   getData()
@@ -61,14 +70,16 @@ const getData = async () => {
   if (searchValue.value) {
     params.districtName = searchValue.value
   }
+  loading.value = true
   const res = await request({
     url: '/snow-ops-platform/recovery/list',
     method: 'GET',
-        params
+    params,
   })
   if (res.code === '00000') {
     list.value = res.data.records
   }
+  loading.value = false
 }
 
 // 搜索关键词
@@ -77,7 +88,6 @@ const searchValue = ref('')
 // 预警列表数据
 const list = ref([])
 
-
 const handleClickBack = () => {
   router.push('/')
 }
@@ -86,8 +96,8 @@ const handleClickItem = (item) => {
   router.push({
     name: 'RebuildDetails',
     params: {
-            data: encodeURIComponent(JSON.stringify(item.id))
-        }
+      data: encodeURIComponent(JSON.stringify(item.id)),
+    },
   })
 }
 
@@ -101,11 +111,12 @@ const handleAddDevice = () => {
   // });
 }
 
-watch(() => searchValue.value, () => {
+watch(
+  () => searchValue.value,
+  () => {
     getData()
-})
-
-
+  },
+)
 </script>
 
 <style scoped lang="scss">

packages/mobile/src/views/Rebuild/RebuildDetails.vue

@@ -1,7 +1,7 @@
 <template>
     <PageContainer title="项目填报" @click-back="handleClickBack">
         <div class="content">
-            <PanelItem>
+            <PanelItem v-if="!loading">
                 <div class="detail">
                     <div class="header">
                         <div class="header-title">{{ data.projectName }}</div>
@@ -26,7 +26,7 @@
                     <div class="item">恢复重建预估费用： {{ data.estimatedCost }}</div>
                 </div>
             </PanelItem>
-            <PanelItem title="附件">
+            <PanelItem v-if="!loading" title="附件">
                 <div class="fileArea">
                     <van-image v-for="(item, index) in data?.fileList" :key="index" :src="item.fileUrl" fit="cover"
                         width="100px" height="100px" style="margin: 10px" @click="showImage(item.fileUrl)"></van-image>
@@ -56,6 +56,7 @@ const router = useRouter()
 const route = useRoute()
 
 const data = ref({})
+const loading = ref(false)
 
 onMounted(() => {
     if (route.params.data) {
@@ -69,6 +70,7 @@ onMounted(() => {
 
 const getDetaillData = async (id) => {
     try {
+        loading.value = true
         const res = await request({
             url: '/snow-ops-platform/recovery/getById',
             method: 'GET',
@@ -82,6 +84,8 @@ const getDetaillData = async (id) => {
     } catch (error) {
         showToast('获取详情失败，请稍后重试')
         console.log('error', error);
+    } finally {
+        loading.value = false
     }
 }