349 lines
9.6 KiB
Vue
349 lines
9.6 KiB
Vue
<template>
|
|
<view class="cate-two flex" style="height: 100%;padding-bottom: 100rpx;">
|
|
<view class="aside bg-white">
|
|
<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
|
|
<block v-for="(item, i) in cateList" :key="i">
|
|
<view :class="'one-item sm ' + (i == selectIndex ? 'active' : '')" @click="changeActive(i)">
|
|
<text class="name">{{ item.name }}</text>
|
|
<view v-if="i == selectIndex" class="active-line bg-primary"></view>
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="main bg-body">
|
|
<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true"
|
|
@scrolltolower="getGoodsListFun">
|
|
<view class="main-wrap">
|
|
<ad-swipers :pid="11" height="200rpx" previous-margin="0" padding="0 0 20rpx" radius="10rpx">
|
|
</ad-swipers>
|
|
<view class="cate-two" v-if="appConfig.cate_style == 4">
|
|
<view v-for="(sitem, si) in cateTwoList" :key="si" class="two-item bg-white m-b-20">
|
|
<router-link :to="{path: '/pages/goods_search/goods_search', query: {
|
|
id: sitem.id,
|
|
name: sitem.name,
|
|
type: 1,
|
|
p_id: p_id
|
|
}}">
|
|
<view class="title flex row-between">
|
|
<text class="name bold sm">{{sitem.name}}</text>
|
|
<u-icon name="arrow-right"></u-icon>
|
|
</view>
|
|
</router-link>
|
|
<view class="three-list flex flex-wrap">
|
|
<router-link class="three-item" v-for="(titem, ti) in sitem.children" :key="ti"
|
|
:to="{path: '/pages/goods_search/goods_search', query: {
|
|
id: titem.id,
|
|
name: titem.name,
|
|
type: 1
|
|
}}">
|
|
<view class=" flex-col col-center m-b-20">
|
|
<u-image mode="aspectFit" width="150rpx" height="150rpx" :src="titem.image">
|
|
</u-image>
|
|
<view class="text m-t-20 xs">{{ titem.name }}</view>
|
|
</view>
|
|
</router-link>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods" v-if="appConfig.cate_style == 1 && hasData">
|
|
<view class="sort-nav-wrap">
|
|
<sort-nav v-model="sortConfig" :show-type="false"></sort-nav>
|
|
</view>
|
|
<view class="goods">
|
|
<view class="goods-list">
|
|
<router-link v-for="(item, i) in goodsList" :key="i"
|
|
:to="`/pages/goods_details/goods_details?id=${item.id}`">
|
|
<view class="flex item bg-white m-t-20">
|
|
<view style="position: relative;">
|
|
<u-image width="200rpx" height="200rpx" border-radius="14rpx" :src="item.image">
|
|
</u-image>
|
|
<subsidy-txt :txt="item.subsidy_txt" style="position: absolute;top: 0;right: 0;"></subsidy-txt>
|
|
</view>
|
|
|
|
<view class="flex-1 m-l-20 m-r-10">
|
|
<view class="line-2">{{item.name}}</view>
|
|
<view class="primary mt10" v-if="p_id > 0">
|
|
<view v-if="price_type == 0">
|
|
<view v-if="item.purchase_price > 0">
|
|
<text class="xs lighter">集采价：</text>
|
|
<price-format :color="colorConfig.primary" class="m-r-10"
|
|
:first-size="34" :second-size="26" :subscript-size="26"
|
|
:price="item.purchase_price" :weight="500"></price-format>
|
|
</view>
|
|
<view v-if="item.issuing_price > 0">
|
|
<text class="xs lighter">代发价：</text>
|
|
<price-format :color="colorConfig.primary" class="m-r-10"
|
|
:first-size="34" :second-size="26" :subscript-size="26"
|
|
:price="item.issuing_price" :weight="500"></price-format>
|
|
</view>
|
|
<view
|
|
v-if="item.wholesale_price > 0 && userInfo.wholesale_state == 2">
|
|
<text class="xs lighter">批发价：</text>
|
|
<price-format :color="colorConfig.primary" class="m-r-10"
|
|
:first-size="34" :second-size="26" :subscript-size="26"
|
|
:price="item.wholesale_price" :weight="500"></price-format>
|
|
</view>
|
|
</view>
|
|
<view v-if="price_type == 1">
|
|
<text class="xs lighter">集采价：</text>
|
|
<price-format :color="colorConfig.primary" class="m-r-10"
|
|
:first-size="34" :second-size="26" :subscript-size="26"
|
|
:price="item.purchase_price" :weight="500"></price-format>
|
|
</view>
|
|
<view v-if="price_type == 2">
|
|
<text class="xs lighter">代发价：</text>
|
|
<price-format :color="colorConfig.primary" class="m-r-10"
|
|
:first-size="34" :second-size="26" :subscript-size="26"
|
|
:price="item.issuing_price" :weight="500"></price-format>
|
|
</view>
|
|
<view v-if="price_type == 3 && userInfo.wholesale_state == 2">
|
|
<text class="xs lighter">批发价：</text>
|
|
<price-format :color="colorConfig.primary" class="m-r-10"
|
|
:first-size="34" :second-size="26" :subscript-size="26"
|
|
:price="item.wholesale_price" :weight="500"></price-format>
|
|
</view>
|
|
</view>
|
|
<view v-if="p_id == 0">
|
|
<!-- 删除了原价,git找回 -->
|
|
<view class="primary mt10 flex">
|
|
<price-format :price="item.min_price" :subscript-size="22"
|
|
:first-size="34" :second-size="26"></price-format>
|
|
<price-format v-if="p_id == 0" class="muted m-l-10" :firstSize="24" :secondSize="24"
|
|
:subscript-size="24" :lineThrough="true"
|
|
:price="item.market_price || item.price"></price-format>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</router-link>
|
|
</view>
|
|
<loading-footer :status="status" :slot-empty="true">
|
|
<view slot="empty" class="flex-col col-center" style="padding: 200rpx 0 0">
|
|
<image class="img-null"
|
|
:src="aliOSS + 'uniapp/goods_null.png'">
|
|
</image>
|
|
<text class="lighter sm">暂无商品</text>
|
|
</view>
|
|
</loading-footer>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
strToParams
|
|
} from '@/utils/tools'
|
|
import {
|
|
getListByLevelOne,
|
|
getGoodsList
|
|
} from '@/api/store'
|
|
import {
|
|
mapGetters,
|
|
mapActions
|
|
} from 'vuex'
|
|
import {
|
|
loadingType
|
|
} from '@/utils/type.js'
|
|
export default {
|
|
name: "cate-two",
|
|
props: {
|
|
cateList: {
|
|
type: Array,
|
|
default: () => ([])
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
selectIndex: 0,
|
|
cateTwoList: [],
|
|
goodsList: [],
|
|
sortConfig: {
|
|
goodsType: 'double',
|
|
priceSort: '',
|
|
saleSort: '',
|
|
},
|
|
status: loadingType.LOADING,
|
|
hasData: true,
|
|
p_id: 0,
|
|
price_type: 0,
|
|
set: 0
|
|
};
|
|
},
|
|
mounted() {
|
|
this.p_id = this.$store.getters.hasPid;
|
|
this.set = this.$store.getters.hasSetId;
|
|
},
|
|
methods: {
|
|
changeActive(index) {
|
|
this.selectIndex = index
|
|
},
|
|
async getListByLevelOneFun() {
|
|
const {
|
|
selectIndex,
|
|
cateList
|
|
} = this
|
|
if (!cateList.length) return
|
|
const id = cateList[selectIndex].id
|
|
const {
|
|
code,
|
|
data
|
|
} = await getListByLevelOne({
|
|
id,
|
|
p_id: this.p_id
|
|
})
|
|
if (code == 1) {
|
|
this.cateTwoList = data
|
|
}
|
|
},
|
|
getGoodsListFun() {
|
|
let {
|
|
page,
|
|
cateList,
|
|
status,
|
|
selectIndex,
|
|
goodsList,
|
|
sortConfig: {
|
|
priceSort,
|
|
saleSort,
|
|
}
|
|
} = this;
|
|
if (!cateList.length) return
|
|
const id = cateList[selectIndex].id
|
|
if (status == loadingType.FINISHED || this.appConfig.cate_style == 4) return;
|
|
getGoodsList({
|
|
page_no: page,
|
|
platform_cate_id: id,
|
|
sort_by_price: priceSort,
|
|
sort_by_sales: saleSort,
|
|
p_id: this.$store.getters.hasPid,
|
|
set: this.$store.getters.hasSetId
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
this.price_type = res.data.set_price_type;
|
|
let {
|
|
more,
|
|
lists,
|
|
} = res.data;
|
|
goodsList.push(...lists);
|
|
this.page++;
|
|
if (!more) {
|
|
this.status = loadingType.FINISHED;
|
|
}
|
|
if (goodsList.length <= 0) {
|
|
this.status = loadingType.EMPTY
|
|
return;
|
|
}
|
|
} else {
|
|
this.status = loadingType.ERROR
|
|
}
|
|
});
|
|
},
|
|
onRefresh() {
|
|
this.status = loadingType.LOADING
|
|
this.page = 1
|
|
this.goodsList = []
|
|
this.getGoodsListFun()
|
|
},
|
|
},
|
|
watch: {
|
|
selectIndex() {
|
|
this.appConfig.cate_style == 1 ? this.onRefresh() : this.getListByLevelOneFun()
|
|
},
|
|
cateList: {
|
|
immediate: true,
|
|
handler(val) {
|
|
this.hasData = val.length ? true : false
|
|
this.appConfig.cate_style == 1 ? this.onRefresh() : this.getListByLevelOneFun()
|
|
}
|
|
},
|
|
'sortConfig.saleSort'() {
|
|
this.onRefresh()
|
|
},
|
|
'sortConfig.priceSort'() {
|
|
this.onRefresh()
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['appConfig', 'userInfo']),
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.cate-two {
|
|
.aside {
|
|
width: 180rpx;
|
|
flex: none;
|
|
height: 100%;
|
|
|
|
.one-item {
|
|
position: relative;
|
|
text-align: center;
|
|
padding: 26rpx 10rpx;
|
|
|
|
&.active {
|
|
color: $-color-primary;
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.active-line {
|
|
position: absolute;
|
|
width: 6rpx;
|
|
height: 30rpx;
|
|
left: 4rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.main {
|
|
height: 100%;
|
|
flex: 1;
|
|
|
|
.main-wrap {
|
|
position: relative;
|
|
|
|
padding: 20rpx 20rpx 0;
|
|
|
|
.two-item {
|
|
border-radius: 10rpx;
|
|
|
|
.title {
|
|
height: 90rpx;
|
|
padding: 0 20rpx;
|
|
|
|
.line {
|
|
width: 40rpx;
|
|
height: 1px;
|
|
background-color: #BBBBBB;
|
|
}
|
|
}
|
|
|
|
.three-list {
|
|
align-items: flex-start;
|
|
padding: 0 10rpx;
|
|
|
|
.three-item {
|
|
width: 33%;
|
|
|
|
.text {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.goods .item {
|
|
border-radius: 14rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |