hookehuyr

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

<template>
<div class="">
<van-tabs v-model:active="active" sticky @click-tab="onClickTab" :color="styleColor.baseColor" background="#F7F7F7"
title-active-color="#222222" title-inactive-color="#777777">
<van-tabs v-model:active="active" sticky :color="styleColor.baseColor" background="#F7F7F7" title-active-color="#222222" title-inactive-color="#777777" @click-tab="onClickTab">
<van-tab title="待审核" :badge="prod_num" :title-style="titleStyle">
<template v-if="!active">
<van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad">
<template v-for="item in prod_list" :key="item" style="height: 3rem;">
<b-video-card :item="item" status="PENDING" @on-click="onClick"></b-video-card>
<template v-for="item in prod_list" :key="item">
<b-video-card :item="item" status="PENDING" @on-click="onClick" />
</template>
</van-list>
</template>
......@@ -14,18 +13,15 @@
<van-tab title="已审核" :title-style="titleStyle">
<template v-if="active">
<van-list v-model:loading="loading" :finished="finished" :finished-text="finishedTextStatus ? '没有更多了' : ''" @load="onLoad">
<template v-for="item in prod_list" :key="item" style="height: 3rem;">
<b-video-card :item="item" status="PROCESS"></b-video-card>
<template v-for="item in prod_list" :key="item">
<b-video-card :item="item" status="PROCESS" />
</template>
</van-list>
</template>
</van-tab>
</van-tabs>
<van-empty v-if="emptyStatus"
class="custom-image"
:image="no_image"
description="暂无审核信息"
/>
<van-empty v-if="emptyStatus" class="custom-image" :image="no_image" description="暂无审核信息" />
<div style="height: 5rem;" />
</div>
</template>
......@@ -81,6 +77,9 @@ const finished = ref(false);
/**
* 向下滚动查询数据
*/
// 因为不能让空图标提前出来的写法
const emptyStatus = ref(false);
const finishedTextStatus = ref(false);
const onLoad = () => {
// 异步更新数据
axios.get('/srv/?a=check_prod_list', {
......@@ -105,6 +104,11 @@ const onLoad = () => {
// 加载状态结束
finished.value = true;
}
//
if (!prod_list.value.length) {
finishedTextStatus.value = false;
emptyStatus.value = true;
}
} else {
console.warn(res);
if (!res.data.show) return false;
......@@ -125,13 +129,6 @@ const onClick = (id) => {
_.remove(prod_list.value, item => item.id === id);
}
// 因为不能让空图标提前出来的写法
const finishedTextStatus = ref(false);
const emptyStatus = ref(false);
if (!prod_list.value.length) {
finishedTextStatus.value = false;
emptyStatus.value = true;
}
</script>
<style lang="less" scoped>
......