hongze_yb_pc/src/components/SelfList.vue

<script setup>
/**
 * 公共列表组件
 */
const props=defineProps({
    count:0,//当前加载的列表数据数量
    loading:false,
    finished:false,//是否加载完
    isEmpty:false,//是否为空数据
    emptyMsg:{
        type:String,
        default:'暂无数据'
    },//为空时描述文字
})
const emit=defineEmits(['listOnload'])
const handleClickLoadMore=()=>{
    emit('listOnload')
}

</script>

<template>
    <div class="self-list-wrap">
        <slot></slot>
        <div class="empty-box" v-if="props.isEmpty">
            <img :src="$store.state.globalImgUrls.chartEmpty" alt="">
            <p>{{props.emptyMsg}}</p>
        </div>
        <div class="bot-load" v-if="!props.finished&&!props.loading&&!props.isEmpty">
            <div class="btn" @click="handleClickLoadMore">加载更多</div>
        </div>
        <div class="bot-load" v-if="!props.finished&&props.loading">
            <div class="loading-text">加载中...</div>
        </div>
        <p class="nomore-text" v-if="!props.isEmpty&&props.finished&&props.count>20">没有更多了~</p>
    </div>
</template>

<style lang="scss" scoped>
.self-list-wrap{
    .empty-box{
        padding-top: 100px;
        text-align: center;
        // color: #F3A52F;
        img{
            width: 200px;
        }
    }
    .bot-load{
        .btn{
            margin: 20px auto;
            width: 112px;
            height: 30px;
            background: #FFFFFF;
            border-radius: 20px;
            border: 1px solid #F3A52F;
            color: #F3A52F;
            font-size: 14px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
        .loading-text{
            margin: 20px auto;
            text-align: center;
            color: #666;
            height: 30px;
        }
    }
    .nomore-text{
        text-align: center;
        color: #999;
    }
}
</style>