imt-micro/src/components/SortList.vue

<template>
    <div class="list-row" :style="`min-height: calc(100vh - ${barHeight}px - ${top || 0})`">
        <slot></slot>
        <van-empty :image="emptyImg" :description="emptyText" v-if="empty">
            <div class="empty-button">
                <slot name="emptyButton"></slot>
            </div>
        </van-empty>
        <div class="endText" v-else>
            <van-loading size="24px" v-if="loading">{{ $t('jia-zai-zhong') }}...</van-loading>
            <p v-if="finish">{{ $t('mei-you-geng-duo-le') }}</p>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
    props: {
        empty: {
            type: Boolean,
            default: false
        },
        loading: {
            type: Boolean,
            default: false
        },
        finish: {
            type: Boolean,
            default: false
        },
        top: {
            type: String,
            default: ''
        },
        emptyImg: {
            type: String,
            default: 'http://imttech.oss-cn-hangzhou.aliyuncs.com/micro/kong_img_default.png'
        },
        emptyText: {
            type: String,
            default: () => {
                return this.$t('jing-qing-qi-dai');
            }
        }
    },
    computed: {
        ...mapState(['barTop', 'barHeight'])
    },
    data() {
        return {};
    },
    onShow() {}
};
</script>

<style lang="less">
page {
    padding-bottom: 0px;
}
.list-row {
    background: @bg;
    padding: 6px 0 50px;
    box-sizing: border-box;

    .van-empty__image {
        width: 240px;
        height: 240px;
    }

    .van-empty__description {
        font-size: 12px;
        color: #bcc1cc;
        line-height: 17px;
        margin-top: 8px;
    }
}

.endText {
    display: flex;
    justify-content: center;
}

.empty-button {
    margin-top: 16px;
    width: 240px;
}
</style>