yinchuan-community-all/mini-program/smart-city-yinchuan-wx/comps/dt_empty.vue

<template>
    <view class="empty-wrap" v-if="type != 0" :style="{'height':wrapHeight,'backgroundColor':wrapBgColor}">
        <view class="load-content"
              :style="{'background-color':_config.bgColor,'z-index':zIndex,'paddingTop':loadingPaddingTop}">
            <view class="load-error" :style="_errorStyle">
                <template v-if="type === 1">
                    <image :src="_config.dt_nodata" mode="widthFix"></image>
                </template>
                <template v-if="type === 2">
                    <image :src="_config.dt_error" mode="widthFix"></image>
                </template>
            </view>
            <view class="load-tips">
                <text>{{ tips }}</text>
                <slot></slot>
            </view>
        </view>

        <view
                class="load-empty"
                v-if="type == -1"
                :style="{ top: _config.blankTop + 'px' }"
        ></view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                config: {
                    width: '160',  // 图片宽度 upx
                    blankTop: '0',  // 空白距离顶部位置 px
                    icon_nodata: 'https://szsq.nxzhsq.cn/community/miniofile/image/noData.png',
                    icon_error: 'https://szsq.nxzhsq.cn/community/miniofile/image/noData.png',
                    is_opt: false
                }
            }
        },
        props: {
            type: {
                type: Number,
                default: 0 // -1初始化,0无,1空,2错误
            },
            tips: {
                type: String,
                default: '暂无数据'
            },
            wrapHeight: {
                type: String,
                default: '100%'
            },
            wrapBgColor: {
                type: String,
                default: '#f2f2f2'
            },
            loadingPaddingTop: {
                type: String,
                default: '40%'
            },
            // config:{
            //   type: Object,
            //   default: {
            //     width:'160',  // 图片宽度 upx
            //     blankTop:'0',  // 空白距离顶部位置 px
            //     icon_nodata: 'https://szsq.nxzhsq.cn/community/miniofile/image/noData.png',
            //     icon_error: 'https://szsq.nxzhsq.cn/community/miniofile/image/noData.png',
            //     is_opt: false
            //   }
            // },
            zIndex: {
                type: [String, Number],
                default: '500'
            },
        },
        computed: {
            _config() {
                let _config = this.config || {}
                _config = Object.assign(_config, {
                    bgColor: 'transparent', // 背景色
                    width: '160',  // 图片宽度 upx
                    blankTop: '0',  // 空白距离顶部位置 px
                    dt_nodata: 'https://szsq.nxzhsq.cn/community/miniofile/image/noData.png',
                    dt_error: 'https://szsq.nxzhsq.cn/community/miniofile/image/noData.png',
                    is_opt: false
                })
                return _config
            },
            _errorStyle() {
                return 'max-width:' + uni.upx2px(this._config.width) + 'px;'
            }
        },
        methods: {
            // init(config){
            //   let _config = config || {}
            //   _config = Object.assign(_config,{
            //     zIndex:'500', // 图标层级
            //     bgColor:'transparent', // 背景色
            //     width:'160',  // 图片宽度 upx
            //     blankTop:'0',  // 空白距离顶部位置 px
            //     dt_nodata: 'https://szsq.nxzhsq.cn/community/miniofile/image/comps/dt_nodata.png',
            //     dt_error: 'https://szsq.nxzhsq.cn/community/miniofile/image/comps/dt_nodata.png',
            //     is_opt: false
            //   })
            //   this.errorStyle = 'max-width:'+uni.upx2px(_config.width)+'px'
            //   this.contentStyle = `
            //     background-color:${relConfig.bgColor};
            //     z-index:${relConfig.zIndex};
            //   `;
            //   this.relConfig = _config
            // },
            // onPageLoad(){
            //   this.init(this.config)
            // }
        }
    }
</script>
<style lang="scss">
    .empty-wrap {
        width: 100%;

        .load-content {
            position: relative;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            z-index: 500;
        }

        .load-error {
            max-width: 200 upx;
            max-height: 204 upx;

            image {
                max-width: 100%;
                max-height: 100%;
            }
        }

        .load-tips {
            width: 100%;
            text-align: center;
            color: #999999;
            font-size: 24 upx;
            word-break: break-all;
            padding: 30 upx;
            color: #666;
        }
    }

    .load-empty {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: $dt-bg-color-grey;
        z-index: 1000;
    }
</style>