web-store-retail-h5/components/area-product-list/special-area-wrapper.vue

<template>
  <view class="goods-sort">
    <!-- 注册 -->
    <view
      key="regist"
      v-if="registList.length > 0 && !isZeroLevel"
      class="goods-flexs"
    >
      <view class="goods-view">
        <area-product-list
          :list="registList"
          :title="regist.name"
          @product-click="redirectList"
          :specialAreaId="regist.id"
        ></area-product-list>
      </view>
    </view>
    <!-- 升级 -->
    <view key="upgrade" v-if="upgradeList.length > 0" class="goods-flexs">
      <view class="goods-view">
        <area-product-list
          :list="upgradeList"
          :title="upgrade.name"
          @product-click="redirectList"
          :specialAreaId="upgrade.id"
        ></area-product-list>
      </view>
    </view>
    <!-- 复购 -->

    <view
      key="repurchase"
      v-if="repurchaseList.length > 0 && !isZeroLevel"
      class="goods-flexs"
    >
      <view class="goods-view">
        <area-product-list
          :list="repurchaseList"
          :title="repurchase.name"
          @product-click="redirectList"
          :specialAreaId="repurchase.id"
        ></area-product-list>
      </view>
    </view>
    <!-- 重消 -->
    <view
      key="rescission"
      v-if="!isZeroLevel && rescissionList.length > 0"
      class="goods-flexs"
    >
      <view class="goods-view">
        <area-product-list
          :list="rescissionList"
          :title="rescission.name"
          @product-click="redirectList"
          :specialAreaId="rescission.id"
        ></area-product-list>
      </view>
    </view>
  </view>
</template>

<script>
import {
  REGIEST_AREA,
  UPGRADE_AREA,
  REPURCHASE_AREA,
  REISSUE_AREA,
} from '@/util/specialAreaMap'
import { MEMBER_SIGN } from '@/util/common'
import areaProductList from '@/components/area-product-list/index.vue'
import { getAreaGoods } from '@/config/special-area'
import { mapGetters } from 'vuex'
export default {
  name: 'SpecialAreaWrapper',
  props: {
    size: {
      type: String,
      default: 'normal', // 'normal' or 'small'
      validator: value => ['normal', 'small'].includes(value),
    },
    userInfo: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    'area-product-list': areaProductList,
  },
  data() {
    return {
      registList: [],
      upgradeList: [],
      repurchaseList: [],
      rescissionList: [],
      regist: REGIEST_AREA,
      upgrade: UPGRADE_AREA,
      repurchase: REPURCHASE_AREA,
      rescission: REISSUE_AREA,
    }
  },
  computed: {
    ...mapGetters(['isZeroLevel']),
  },
  created() {
    const userInfo = Object.keys(this.userInfo).length
      ? this.userInfo
      : uni.getStorageSync('userInfo')
    if (userInfo.memberSign == MEMBER_SIGN.ZERO_LEVEL) {
      this.upgrade.name = '会员专区'
    } else {
      this.getAreaListById(REISSUE_AREA.id, this.rescissionList)
      this.getAreaListById(REGIEST_AREA.id, this.registList)
      this.getAreaListById(REPURCHASE_AREA.id, this.repurchaseList)
    }
    this.getAreaListById(UPGRADE_AREA.id, this.upgradeList)
  },
  methods: {
    getAreaListById(areaId, list) {
      const params = {
        pageNum: 1,
        pageSize: 3,
      }
      getAreaGoods({
        pageNum: 1,
        pageSize: 3,
        specialArea: areaId,
      }).then(res => {
        if (res.code == 200) {
          list.splice(0, list.length, ...(res.data || []).slice(0, 3))
        }
      })
    },
    redirectList(item) {
      uni.navigateTo({
        url: `/pages/specialArea/list?specialArea=${item.specialArea}&id=${item.pkId}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.goods-sort {
  padding-top: 20rpx;
  .goods-flexs {
    padding: 0 20rpx;
    position: relative;
  }
}
</style>