hookehuyr

✨ feat(视频审核页面): 没有列表数据时显示优化

1 <template> 1 <template>
2 <div class=""> 2 <div class="">
3 - <van-tabs v-model:active="active" sticky @click-tab="onClickTab" :color="styleColor.baseColor" background="#F7F7F7" 3 + <van-tabs v-model:active="active" sticky :color="styleColor.baseColor" background="#F7F7F7" title-active-color="#222222" title-inactive-color="#777777" @click-tab="onClickTab">
4 - title-active-color="#222222" title-inactive-color="#777777">
5 <van-tab title="待审核" :badge="prod_num" :title-style="titleStyle"> 4 <van-tab title="待审核" :badge="prod_num" :title-style="titleStyle">
6 <template v-if="!active"> 5 <template v-if="!active">
7 <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad"> 6 <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad">
8 - <template v-for="item in prod_list" :key="item" style="height: 3rem;"> 7 + <template v-for="item in prod_list" :key="item">
9 - <b-video-card :item="item" status="PENDING" @on-click="onClick"></b-video-card> 8 + <b-video-card :item="item" status="PENDING" @on-click="onClick" />
10 </template> 9 </template>
11 </van-list> 10 </van-list>
12 </template> 11 </template>
...@@ -14,18 +13,15 @@ ...@@ -14,18 +13,15 @@
14 <van-tab title="已审核" :title-style="titleStyle"> 13 <van-tab title="已审核" :title-style="titleStyle">
15 <template v-if="active"> 14 <template v-if="active">
16 <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad"> 15 <van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad">
17 - <template v-for="item in prod_list" :key="item" style="height: 3rem;"> 16 + <template v-for="item in prod_list" :key="item">
18 - <b-video-card :item="item" status="PROCESS"></b-video-card> 17 + <b-video-card :item="item" status="PROCESS" />
19 </template> 18 </template>
20 </van-list> 19 </van-list>
21 </template> 20 </template>
22 </van-tab> 21 </van-tab>
23 </van-tabs> 22 </van-tabs>
24 - <van-empty v-if="emptyStatus" 23 + <van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无审核信息" />
25 - class="custom-image" 24 + <div style="height: 5rem;" />
26 - :image="no_image"
27 - description="暂无审核信息"
28 - />
29 </div> 25 </div>
30 </template> 26 </template>
31 27
...@@ -81,6 +77,9 @@ const finished = ref(false); ...@@ -81,6 +77,9 @@ const finished = ref(false);
81 /** 77 /**
82 * 向下滚动查询数据 78 * 向下滚动查询数据
83 */ 79 */
80 +// 因为不能让空图标提前出来的写法
81 +const emptyStatus = ref(false);
82 +const finishedTextStatus = ref(false);
84 const onLoad = () => { 83 const onLoad = () => {
85 // 异步更新数据 84 // 异步更新数据
86 axios.get('/srv/?a=check_prod_list', { 85 axios.get('/srv/?a=check_prod_list', {
...@@ -105,6 +104,11 @@ const onLoad = () => { ...@@ -105,6 +104,11 @@ const onLoad = () => {
105 // 加载状态结束 104 // 加载状态结束
106 finished.value = true; 105 finished.value = true;
107 } 106 }
107 + //
108 + if (!prod_list.value.length) {
109 + finishedTextStatus.value = false;
110 + emptyStatus.value = true;
111 + }
108 } else { 112 } else {
109 console.warn(res); 113 console.warn(res);
110 if (!res.data.show) return false; 114 if (!res.data.show) return false;
...@@ -125,13 +129,6 @@ const onClick = (id) => { ...@@ -125,13 +129,6 @@ const onClick = (id) => {
125 _.remove(prod_list.value, item => item.id === id); 129 _.remove(prod_list.value, item => item.id === id);
126 } 130 }
127 131
128 -// 因为不能让空图标提前出来的写法
129 -const finishedTextStatus = ref(false);
130 -const emptyStatus = ref(false);
131 -if (!prod_list.value.length) {
132 - finishedTextStatus.value = false;
133 - emptyStatus.value = true;
134 -}
135 </script> 132 </script>
136 133
137 <style lang="less" scoped> 134 <style lang="less" scoped>
......