bdzl2/bxztApp
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
huangchenhao 2026-05-06 09:31:28 +08:00
parent db10d94b16
commit ea1dc1afc4
2 changed files with 116 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

207
packages/mobile/src/views/Rebuild/Rebuild.vue
View File

@ -1,40 +1,47 @@
<template> <template>
<PageContainer title="恢复重建" @click-back="handleClickBack"> <PageContainer title="恢复重建" @click-back="handleClickBack">
<SearchInput v-model="searchValue" /> <SearchInput v-model="searchValue" />
<CurrentSite /> <CurrentSite />
<div class="list-panel"> <div class="list-panel">
<CardItem v-for="(item, index) in list" :key="index" :title="`${item.projectName}`" <van-list :loading="loading" :finished="finished" finished-text="没有更多了">
@click="handleClickItem(item)"> <CardItem v-for="(item, index) in list" :key="index" :title="`${item.projectName}`" @click="handleClickItem(item)">
<template #headerExtra> <template #headerExtra>
<van-tag v-if="item.approvalStatus === 3 || item.approvalStatus === 1" type="success" plain size="medium">审批通过</van-tag> <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> <van-tag v-else-if="item.approvalStatus === 2 || item.approvalStatus === 4" type="danger" plain size="medium">审批驳回</van-tag>
<van-tag v-else type="warning" plain size="medium">待审批</van-tag> <van-tag v-else type="warning" plain size="medium">待审批</van-tag>
</template> </template>
<div class="content"> <div class="content">
<div class="left-info"> <div class="left-info">
<div><span class="label">起止桩号：</span><span class="value">{{ `${item.startStakeNo} - <div>
${item.endStakeNo}`}}</span> <span class="label">起止桩号：</span
</div> ><span class="value">{{
<div><span class="label">路况位置：</span><span class="value">{{ item.roadLocation }}</span></div> `${item.startStakeNo} -
<div><span class="label">提交日期：</span><span class="value">{{ item.submitTime }}</span></div> ${item.endStakeNo}`
</div> }}</span>
<div class="right-arrow" @click.stop="handleClickItem(item)"> </div>
<van-icon name="arrow" /> <div>
</div> <span class="label">路况位置：</span><span class="value">{{ item.roadLocation }}</span>
</div> </div>
</CardItem> <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" />
</div>
</div>
</CardItem>
<!-- 空状态提示 --> <!-- 空状态提示 -->
<EmptyBox v-if="list.length === 0" placeholder="暂无相关预警信息" /> <!-- <EmptyBox v-if="list.length === 0" placeholder="暂无相关预警信息" /> -->
</div> </van-list>
</div>
<van-button type="primary" class="add-btn" icon="plus" @click="handleAddDevice"> <van-button type="primary" class="add-btn" icon="plus" @click="handleAddDevice"> 项目填报 </van-button>
项目填报 </PageContainer>
</van-button>
</PageContainer>
</template> </template>
<script setup> <script setup>
@ -45,30 +52,34 @@ import SearchInput from '@/components/SearchInput.vue'
import CurrentSite from '@/components/CurrentSite.vue' import CurrentSite from '@/components/CurrentSite.vue'
import CardItem from '@/components/CardItem.vue' import CardItem from '@/components/CardItem.vue'
import EmptyBox from '@/components/EmptyBox.vue' import EmptyBox from '@/components/EmptyBox.vue'
import { request } from "../../../../shared/utils/request"; import { request } from '../../../../shared/utils/request'
const router = useRouter() const router = useRouter()
const loading = ref(false)
const finished = ref(false)
onMounted(() => { onMounted(() => {
getData() getData()
}) })
const getData = async () => { const getData = async () => {
const params = { const params = {
pageNum: 1, pageNum: 1,
pageSize: 999, pageSize: 999,
} }
if (searchValue.value) { if (searchValue.value) {
params.districtName = searchValue.value params.districtName = searchValue.value
} }
const res = await request({ loading.value = true
url: '/snow-ops-platform/recovery/list', const res = await request({
method: 'GET', url: '/snow-ops-platform/recovery/list',
params method: 'GET',
}) params,
if (res.code === '00000') { })
list.value = res.data.records if (res.code === '00000') {
} list.value = res.data.records
}
loading.value = false
} }
// 搜索关键词 // 搜索关键词
@ -77,83 +88,83 @@ const searchValue = ref('')
// 预警列表数据 // 预警列表数据
const list = ref([]) const list = ref([])
const handleClickBack = () => { const handleClickBack = () => {
router.push('/') router.push('/')
} }
const handleClickItem = (item) => { const handleClickItem = (item) => {
router.push({ router.push({
name: 'RebuildDetails', name: 'RebuildDetails',
params: { params: {
data: encodeURIComponent(JSON.stringify(item.id)) data: encodeURIComponent(JSON.stringify(item.id)),
} },
}) })
} }
const handleAddDevice = () => { const handleAddDevice = () => {
router.push('/rebuild-add') router.push('/rebuild-add')
// router.push({ // router.push({
// name: "RebuildAdd", // name: "RebuildAdd",
// params: { // params: {
// data: encodeURIComponent(JSON.stringify(11)), // data: encodeURIComponent(JSON.stringify(11)),
// }, // },
// }); // });
} }
watch(() => searchValue.value, () => { watch(
() => searchValue.value,
() => {
getData() getData()
}) },
)
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.list-panel { .list-panel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
} }
.content { .content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.left-info { .left-info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
font-size: 14px; font-size: 14px;
.label { .label {
color: #666; color: #666;
} }
.value { .value {
color: #aaa; color: #aaa;
} }
} }
.right-arrow { .right-arrow {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
} }
.add-btn { .add-btn {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
left: 16px; left: 16px;
right: 16px; right: 16px;
width: calc(100% - 32px); width: calc(100% - 32px);
margin: 0 auto; margin: 0 auto;
border-radius: 24px; border-radius: 24px;
font-size: 16px; font-size: 16px;
height: 44px; height: 44px;
z-index: 999; z-index: 999;
} }
</style> </style>

8
packages/mobile/src/views/Rebuild/RebuildDetails.vue
View File

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