web-retail-h5/pages/specialArea/index.vue

<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
  <view class="content">
    <view class="goods-sort">
      <!-- 注册 -->
      <view
        v-if="registList.length > 0 && user.memberSign !== 1"
        class="goods-flexs"
      >
        <view class="goods-view">
          <area-product-list
            :list="registList"
            :title="regist.name"
          ></area-product-list>
        </view>
      </view>
      <!-- 升级 -->
      <view
        v-if="upgradeList.length > 0 && user.memberSign === 1"
        class="goods-flexs"
      >
        <view class="goods-view">
          <area-product-list
            :list="upgradeList"
            :title="upgrade.name"
          ></area-product-list>
        </view>
      </view>
      <!-- 复购 -->
      <view
        v-if="repurchaseList.length > 0 && user.memberSign === 1"
        class="goods-flexs"
      >
        <view class="goods-view">
          <area-product-list
            :list="repurchaseList"
            :title="repurchase.name"
          ></area-product-list>
        </view>
      </view>
    </view>
    <!-- 重消 -->
    <view
      v-if="rescissionList.length > 0 && user.memberSign === 1"
      class="goods-flexs"
    >
      <view class="goods-view">
        <area-product-list
          :list="rescissionList"
          :title="rescission.name"
        ></area-product-list>
      </view>
    </view>
    <cl-tabbar :current="2"></cl-tabbar>
  </view>
</template>

<script>
import * as api from '@/config/goods'
import { getAreaGoods } from '@/config/special-area'
import * as apis from '@/config/index.js'
import clTabbar from '@/components/cl-tabbar.vue'
import * as ban from '@/config/balance.js'
import areaProductList from '@/components/area-product-list/index.vue'
import { mapGetters } from 'vuex'
import {
  REGIEST_AREA,
  UPGRADE_AREA,
  REPURCHASE_AREA,
  REISSUE_AREA,
} from '@/util/specialAreaMap'
export default {
  components: {
    'cl-tabbar': clTabbar,
    'area-product-list': areaProductList,
  },
  computed: {
    ...mapGetters(['user']),
  },
  data() {
    return {
      goodsList: [],
      specialImg: require('@/static/images/two2.jpg'),
      registList: [],
      upgradeList: [],
      repurchaseList: [],
      rescissionList: [],
      regist: REGIEST_AREA,
      upgrade: UPGRADE_AREA,
      repurchase: REPURCHASE_AREA,
      rescission: REISSUE_AREA,
    }
  },
  onLoad() {
    this.getGoodsInfo()
  },

  methods: {
    getGoodsInfo() {
      const params = {
        pageNum: 1,
        pageSize: 3,
      }
      const queryArea = [
        REGIEST_AREA.id,
        UPGRADE_AREA.id,
        REPURCHASE_AREA.id,
        REISSUE_AREA.id,
      ]
      if (this.user.memberSign === 1) {
        queryArea.shift()
      }
      const queryList = queryArea.map(areaId => {
        return getAreaGoods({
          pageNum: 1,
          pageSize: 3,
          specialArea: areaId,
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background: #f2f2f2;
  // padding: 0 20rpx;
  min-height: 94vh;
}

.goods-sort {
  padding-bottom: 130rpx;
  .goods-flexs {
    padding: 30rpx 20rpx 20rpx;
    position: relative;
  }
}
</style>