加载中

src/views/recruit/enterprise/jobFair/details.vue

@@ -1,5 +1,6 @@
 <template>
   <v-card class="card-box pa-4" :style="`background-color: ${jobFairInfo?.backgroundColour}`">
+    <Loading :visible="jobListLoading" :contained="true"></Loading>
     <div class="position-relative">
       <div class="text-center my-6 mx-10 px-15 font-weight-bold font-size-20" style="color: #fff">{{ jobFairInfo?.title?.replace(/<\/?p[^>]*>/gi, '') }}</div>
       <div class="d-flex justify-space-between mb-3 align-center">
@@ -13,7 +14,8 @@
           <v-btn color="#fff" v-if="jobFairInfo?.contentImg" :style="`color: ${jobFairInfo?.backgroundColour || 'var(--v-primary-base)'}`" prepend-icon="mdi-share" @click="handleShare">我的分享海报</v-btn>
         </div>
       </div>
-      <JobItem :items="jobList" @refresh="getJobList(), getJobNum()"></JobItem>
+      <div v-if="jobListLoading" class="centerText color-777">加载中...</div>
+      <JobItem v-else :items="jobList" @refresh="getJobList(), getJobNum()"></JobItem>
 
       <v-navigation-drawer v-model="showDrawer" location="right" temporary width="600">
         <Loading :visible="positionLoading" :contained="true"></Loading>
@@ -140,10 +142,15 @@ const previewSrc  = ref('')
 const positionList = ref([])
 
 // 职位列表
+const jobListLoading = ref(true)
 const getJobList = async () => {
-  const data = await getJobFairPosition(id)
-  if (!data || !data.length) return jobList.value = []
-  jobList.value = dealDictArrayData([], data)
+  try {
+    const data = await getJobFairPosition(id)
+    if (!data || !data.length) return jobList.value = []
+    jobList.value = dealDictArrayData([], data)
+  } finally {
+    jobListLoading.value = false
+  }
 }
 
 // const handleAdd = async () => {
@@ -282,4 +289,11 @@ const handleShare = () => {
 .actions:hover {
   color: var(--v-primary-base);
 }
+
+.centerText {
+  height: 50vh;
+  line-height: 50vh;
+  text-align: center;
+  color: #fff;
+}
 </style>