144 lines
3.7 KiB
Vue
144 lines
3.7 KiB
Vue
<template>
|
|
<view class="goods-sort">
|
|
<!-- 注册 -->
|
|
<view key="regist" v-if="registList.length > 0" 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" 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="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 key="halfPrice" v-if="halfPriceList.length > 0" class="goods-flexs">
|
|
<view class="goods-view">
|
|
<area-product-list
|
|
:list="halfPriceList"
|
|
:title="halfPrice.name"
|
|
@product-click="redirectList"
|
|
:specialAreaId="halfPrice.id"
|
|
></area-product-list>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
REGIEST_AREA,
|
|
UPGRADE_AREA,
|
|
REPURCHASE_AREA,
|
|
REISSUE_AREA,
|
|
HALF_PRICE_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: [],
|
|
halfPriceList: [],
|
|
regist: REGIEST_AREA,
|
|
upgrade: UPGRADE_AREA,
|
|
repurchase: REPURCHASE_AREA,
|
|
rescission: REISSUE_AREA,
|
|
halfPrice: HALF_PRICE_AREA,
|
|
}
|
|
},
|
|
created() {
|
|
this.getAreaListById(UPGRADE_AREA.id, this.upgradeList)
|
|
this.getAreaListById(REGIEST_AREA.id, this.registList)
|
|
this.getAreaListById(REPURCHASE_AREA.id, this.repurchaseList)
|
|
this.getAreaListById(HALF_PRICE_AREA.id, this.halfPriceList)
|
|
},
|
|
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>
|