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

110 lines
2.6 KiB
Vue

<template>
<view class="goods-sort">
<!-- 注册 -->
<view v-if="registList.length > 0 && !isZeroLevel" 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" 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" class="goods-flexs">
<view class="goods-view">
<area-product-list
:list="repurchaseList"
:title="repurchase.name"
></area-product-list>
</view>
</view>
<!-- 重消 -->
<view v-if="!isZeroLevel && rescissionList.length > 0" class="goods-flexs">
<view class="goods-view">
<area-product-list
:list="rescissionList"
:title="rescission.name"
></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',
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() {
if (!this.isZeroLevel) {
this.getAreaListById(UPGRADE_AREA.id, this.upgradeList)
this.getAreaListById(REPURCHASE_AREA.id, this.repurchaseList)
}
this.getAreaListById(REISSUE_AREA.id, this.rescissionList)
this.getAreaListById(REGIEST_AREA.id, this.registList)
},
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))
}
})
},
},
}
</script>
<style lang="scss" scoped>
.goods-sort {
padding-top: 20rpx;
.goods-flexs {
padding: 0 20rpx;
position: relative;
}
}
</style>