fanxing-shop/components/no-data/no-data.vue

<template>
  <!-- 无数据展示 -->
    <view class="no-data-box">
      <slot v-if="custom"></slot>
      <view v-else class="text-center">
        <view class="flex jcc">
          <image class="status-img" mode="widthFix" v-if="statusImgUrl" :src="statusImgUrl"></image>
        </view>
        <view class="no-data-tips">{{tipsTextCOM}}</view>
      </view>
  </view>
</template>

<script>
  import defaultConfig from '@/config/default.js'
  export default {
    props: {
      statusType: { // 空状态类型
        type: Number,
        default: 1
      },
      custom: Boolean, // 是否自定义插槽
      tipsText: String, // 文案
    },
    data() {
      return {
        statusImgUrl: '',
      }
    },
    computed: {
      // statusImgUrl() {
      //   console.log(this.$store.state.emptyStatus.status);
      //   let url = ''
      //   const maps = this.$store.state.emptyStatus.status
      //   const index = maps.findIndex(item => item.type === this.statusType)
      //   url = index !== -1 ? defaultConfig.ossImgUrl + maps[index].url : ''
      //   console.log(url);
      //   return url
      // },
      tipsTextCOM() {
        let text = ''
        text = this.tipsText
        if (this.statusType === 1) {
          text = '暂无数据'
        }
        return text
      }
    },
    methods: {}
  }
</script>

<style lang="scss" scoped>
  .no-data-box {
      width: 100%;
      height: 100%;
      z-index: 996;
      margin-top: 160rpx;
    }
    .status-img {
      width: 50%;
      margin-bottom: 26rpx;
    }

    .no-data-tips {
      color: #707476;
      font-size: 28rpx;
      line-height: 40rpx;
      // margin-bottom: 34rpx;
      text-align: center;
      padding: 0 50rpx;
    }
  
</style>