CommunityApp/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: 'http://139.9.103.171:1888/img/image/noData.png',
			  icon_error: 'http://139.9.103.171:1888/img/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: 'http://139.9.103.171:1888/img/image/noData.png',
    //     icon_error: 'http://139.9.103.171:1888/img/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: 'http://139.9.103.171:1888/img/image/noData.png',
        dt_error: 'http://139.9.103.171:1888/img/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: 'http://139.9.103.171:1888/img/image/comps/dt_nodata.png',
    //     dt_error: 'http://139.9.103.171:1888/img/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: 200upx;
    max-height: 204upx;

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

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