zfc/guzhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 页面初始化时添加加载状态及UI展示，并在加载期间隐藏其他内容

Browse Source
This commit is contained in:
Wei_佳 2025-12-04 17:36:44 +08:00
parent 6b5967a4bb
commit 1d73f6ed54
1 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web1/src/views/pages/index.vue
View File

@ -1,6 +1,11 @@
<template> <template>
<div class="pages"> <div class="pages">
<AppHeader class="page-header" /> <AppHeader class="page-header" />
<!-- 页面初始化 loading -->
<div v-if="pageLoading" class="right" style="display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center">
<n-spin size="large" />
<div style="font-size: 16px; color: #999999; margin-top: 20px">加载中...</div>
</div>
<!-- 左侧边栏 - 已隐藏 --> <!-- 左侧边栏 - 已隐藏 -->
<!-- <div class="left"> <!-- <div class="left">
<img style="width: 198px; height: 32px; margin: 20px;" src="@/assets/images/logo.png" alt="" @click="navToLogin"> <img style="width: 198px; height: 32px; margin: 20px;" src="@/assets/images/logo.png" alt="" @click="navToLogin">
@ -11,7 +16,7 @@
</div> </div>
</div> </div>
</div> --> </div> -->
<div v-if="status == 'create'" class="right"> <div v-if="!pageLoading && status == 'create'" class="right">
<StepProgressBar <StepProgressBar
style="width: 800px; margin: auto; margin-top: 40px" style="width: 800px; margin: auto; margin-top: 40px"
:steps="steps" :steps="steps"
@ -742,7 +747,7 @@
</div> </div>
</div> </div>
</div> </div>
<div v-if="status == 'success'" class="right"> <div v-if="!pageLoading && status == 'success'" class="right">
<div class="price-container" :style="{ backgroundImage: `url(${backgroundImg})` }"> <div class="price-container" :style="{ backgroundImage: `url(${backgroundImg})` }">
<div>¥{{ parseInt(selectedObj?.calculation_result?.final_value_ab) }}</div> <div>¥{{ parseInt(selectedObj?.calculation_result?.final_value_ab) }}</div>
<div style="font-size: 20px; color: #303133; line-height: 20px">最终评估结果</div> <div style="font-size: 20px; color: #303133; line-height: 20px">最终评估结果</div>
@ -879,7 +884,7 @@
重新评估 重新评估
</div> </div>
</div> </div>
<div v-if="status == 'fail'" class="right" style="text-align: center"> <div v-if="!pageLoading && status == 'fail'" class="right" style="text-align: center">
<img <img
style="width: 100px; height: 100px; margin-top: 30vh" style="width: 100px; height: 100px; margin-top: 30vh"
src="@/assets/images/fail.png" src="@/assets/images/fail.png"
@ -898,7 +903,7 @@
重新评估 重新评估
</div> </div>
</div> </div>
<div v-if="status == 'pending'" class="right" style="display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center"> <div v-if="!pageLoading && status == 'pending'" class="right" style="display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center">
<img <img
style="width: 100px; height: 100px" style="width: 100px; height: 100px"
src="@/assets/images/loading.png" src="@/assets/images/loading.png"
@ -927,6 +932,7 @@ import backgroundImg4 from '@/assets/images/circleg.png'
import backgroundImg5 from '@/assets/images/circley.png' import backgroundImg5 from '@/assets/images/circley.png'
import backgroundImg6 from '@/assets/images/circlec.png' import backgroundImg6 from '@/assets/images/circlec.png'
const status = ref('create') const status = ref('create')
const pageLoading = ref(false) // 页面初始化 loading 状态
const message = useMessage() const message = useMessage()
const modalFormRef = ref<FormInst | null>(null) const modalFormRef = ref<FormInst | null>(null)
const isSelected = ref<Number | null>(null) const isSelected = ref<Number | null>(null)
@ -1739,6 +1745,12 @@ onMounted(async () => {
page: 1, page: 1,
page_size: 99, page_size: 99,
} }
// 如果有 id 参数,说明是从估值记录进入,需要显示 loading
if (route.query.id) {
pageLoading.value = true
}
await getHistoryList() await getHistoryList()
if (route.query.id) { if (route.query.id) {
@ -1747,6 +1759,8 @@ onMounted(async () => {
if (targetItem) { if (targetItem) {
selectTimeBox(targetItem) selectTimeBox(targetItem)
} }
// 数据加载完成,关闭 loading
pageLoading.value = false
} }
// 使用await提高可读性 // 使用await提高可读性
const res = await api.getIndustryList(params) const res = await api.getIndustryList(params)