437 lines
13 KiB
Vue
437 lines
13 KiB
Vue
<template>
|
||
<div class="category">
|
||
<div class="category-hd bg-white">
|
||
<div class="category-wrap">
|
||
<div class="category-con flex">
|
||
<div class="name muted">一级分类：</div>
|
||
<div class="category-list flex flex-wrap lighter">
|
||
<div
|
||
:class="[
|
||
'item line1',
|
||
{ active: oneIndex == index },
|
||
]"
|
||
v-for="(item, index) in categoryOne"
|
||
:key="index"
|
||
@click="changeData(item.id)"
|
||
>
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="category-con flex">
|
||
<div class="name muted">二级分类：</div>
|
||
<div class="category-list flex flex-wrap lighter">
|
||
<div
|
||
:class="['item line1', { active: twoIndex === '' }]"
|
||
@click="clickAllTwo"
|
||
>
|
||
全部
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item line1',
|
||
{ active: twoIndex === index },
|
||
]"
|
||
v-for="(item, index) in categoryTwo"
|
||
:key="index"
|
||
@click="changeData(item.id)"
|
||
>
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="category-con flex">
|
||
<div class="name muted">三级分类：</div>
|
||
<div class="category-list flex flex-wrap lighter">
|
||
<div
|
||
:class="[
|
||
'item line1',
|
||
{ active: threeIndex === '' },
|
||
]"
|
||
@click="clickAll"
|
||
>
|
||
全部
|
||
</div>
|
||
<div
|
||
:class="[
|
||
'item line1',
|
||
{ active: threeIndex === index },
|
||
]"
|
||
v-for="(item, index) in categoryThree"
|
||
:key="index"
|
||
@click="changeData(item.id)"
|
||
>
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sort flex bg-white">
|
||
<div class="title muted">排序方式：</div>
|
||
<div class="sort-name m-l-16 flex lighter">
|
||
<div
|
||
:class="['item', { active: sortType == '' }]"
|
||
@click="changeSortType('')"
|
||
>
|
||
综合
|
||
</div>
|
||
<div
|
||
:class="['item', { active: sortType == 'price' }]"
|
||
@click="changeSortType('price')"
|
||
>
|
||
价格
|
||
<i
|
||
v-show="priceSort == 'desc'"
|
||
class="el-icon-arrow-down"
|
||
></i>
|
||
<i
|
||
v-show="priceSort == 'asc'"
|
||
class="el-icon-arrow-up"
|
||
></i>
|
||
</div>
|
||
<div
|
||
:class="['item', { active: sortType == 'sales_sum' }]"
|
||
@click="changeSortType('sales_sum')"
|
||
>
|
||
销量
|
||
<i
|
||
v-show="saleSort == 'desc'"
|
||
class="el-icon-arrow-down"
|
||
></i>
|
||
<i
|
||
v-show="saleSort == 'asc'"
|
||
class="el-icon-arrow-up"
|
||
></i>
|
||
</div>
|
||
|
||
|
||
<div
|
||
:class="['item', { active: sortType == 'brand' && brandList.length}]"
|
||
@click="changeSortType('brand')"
|
||
>
|
||
品牌
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 品牌 -->
|
||
<div class="sort flex bg-white" v-show="sortType == 'brand' && brandList.length > 0">
|
||
<div class="category-con flex" style="padding-top: 0;">
|
||
<div class="name muted">品牌：</div>
|
||
<div class="category-list flex flex-wrap lighter">
|
||
<div
|
||
:class="['item', { active: brandIndex == index }]"
|
||
@click="getBrandGoods(index)" v-for="(item,index) in brandList" :key="index"
|
||
>
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div v-if="isHasGoods" class="goods-list">
|
||
<goods-list :list="goodsList" />
|
||
<div
|
||
class="pagination flex row-center"
|
||
style="padding-bottom: 38px"
|
||
v-if="count"
|
||
>
|
||
<el-pagination
|
||
background
|
||
hide-on-single-page
|
||
layout="prev, pager, next"
|
||
:total="count"
|
||
prev-text="上一页"
|
||
next-text="下一页"
|
||
:page-size="20"
|
||
@current-change="changePage"
|
||
>
|
||
</el-pagination>
|
||
</div>
|
||
</div>
|
||
<null-data
|
||
v-else
|
||
:img="require('@/static/images/goods_null.png')"
|
||
text="暂无商品~"
|
||
></null-data>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { trottle } from '~/utils/tools'
|
||
export default {
|
||
head() {
|
||
return {
|
||
title: this.$store.getters.headTitle,
|
||
link: [
|
||
{
|
||
rel: 'icon',
|
||
type: 'image/x-icon',
|
||
href: this.$store.getters.favicon,
|
||
},
|
||
],
|
||
}
|
||
},
|
||
watchQuery: true,
|
||
async asyncData({ query, $get }) {
|
||
let { data } = await $get('pc/category')
|
||
return {
|
||
categoryList: data,
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
count: 0,
|
||
oneIndex: 0,
|
||
twoIndex: '',
|
||
threeIndex: '',
|
||
brandIndex:-1,
|
||
categoryOne: [],
|
||
categoryTwo: [],
|
||
categoryThree: [],
|
||
sortType: '',
|
||
saleSort: 'desc',
|
||
priceSort: 'desc',
|
||
brandSort:'desc',
|
||
page: '',
|
||
goodsList: [],
|
||
cateId: 0,
|
||
isHasGoods: true,
|
||
brandList:[],//品牌列表
|
||
}
|
||
},
|
||
created() {
|
||
this.changeSortType = trottle(this.changeSortType, 500, this)
|
||
},
|
||
methods: {
|
||
changeData(id) {
|
||
const { categoryList } = this
|
||
this.setIndex(id)
|
||
this.categoryOne = categoryList
|
||
this.categoryTwo = categoryList[this.oneIndex]
|
||
? categoryList[this.oneIndex].sons
|
||
: []
|
||
|
||
this.categoryThree = this.categoryTwo[this.twoIndex]
|
||
? this.categoryTwo[this.twoIndex].sons
|
||
: []
|
||
|
||
this.setCateId(id);
|
||
this.getGoods();
|
||
this.brandIndex = '-1';
|
||
this.sortType = '';
|
||
this.brandList = [];
|
||
},
|
||
setCateId(id) {
|
||
if (
|
||
this.twoIndex == '' &&
|
||
this.threeIndex == '' &&
|
||
this.oneIndex !== ''
|
||
) {
|
||
this.cateId = this.categoryOne[this.oneIndex].id
|
||
}
|
||
if (this.threeIndex == '' && this.twoIndex !== '') {
|
||
this.cateId = this.categoryTwo[this.twoIndex].id
|
||
}
|
||
if (id) {
|
||
this.cateId = id
|
||
}
|
||
},
|
||
setIndex(id) {
|
||
const { categoryList } = this
|
||
categoryList.some((oitem, oindex) => {
|
||
if (oitem.id === id) {
|
||
this.oneIndex = oindex
|
||
this.twoIndex = ''
|
||
this.threeIndex = ''
|
||
return true
|
||
}
|
||
return (
|
||
oitem.sons &&
|
||
oitem.sons.some((witem, windex) => {
|
||
if (witem.id === id) {
|
||
this.oneIndex = oindex
|
||
this.twoIndex = windex
|
||
this.threeIndex = ''
|
||
return true
|
||
}
|
||
return (
|
||
witem.sons &&
|
||
witem.sons.some((titem, tindex) => {
|
||
if (titem.id === id) {
|
||
this.oneIndex = oindex
|
||
this.twoIndex = windex
|
||
this.threeIndex = tindex
|
||
return true
|
||
}
|
||
})
|
||
)
|
||
})
|
||
)
|
||
})
|
||
},
|
||
clickAllTwo() {
|
||
this.twoIndex = ''
|
||
this.threeIndex = ''
|
||
this.changeData()
|
||
},
|
||
clickAll() {
|
||
this.threeIndex = ''
|
||
this.changeData()
|
||
},
|
||
changeSortType(type) {
|
||
this.sortType = type
|
||
switch (type) {
|
||
case 'price':
|
||
if (this.priceSort == 'asc') {
|
||
this.priceSort = 'desc'
|
||
} else if (this.priceSort == 'desc') {
|
||
this.priceSort = 'asc'
|
||
}
|
||
break
|
||
case 'sales_sum':
|
||
if (this.saleSort == 'asc') {
|
||
this.saleSort = 'desc'
|
||
} else if (this.saleSort == 'desc') {
|
||
this.saleSort = 'asc'
|
||
}
|
||
break
|
||
case 'brand':
|
||
if (this.brandSort == 'asc') {
|
||
this.brandSort = 'desc'
|
||
} else if (this.brandSort == 'desc') {
|
||
this.brandSort = 'asc'
|
||
}
|
||
break
|
||
default:
|
||
}
|
||
if(this.sortType == 'brand') {
|
||
this.getBrand() //获取品牌
|
||
}else {
|
||
this.getGoods()
|
||
}
|
||
|
||
},
|
||
changePage(current) {
|
||
this.page = current
|
||
this.getGoods()
|
||
},
|
||
async getGoods() {
|
||
const { priceSort, sortType, saleSort } = this
|
||
const params = {
|
||
page_size: 20,
|
||
page_no: this.page,
|
||
platform_cate_id: this.cateId,
|
||
}
|
||
switch (sortType) {
|
||
case 'price':
|
||
params.sort_by_price = priceSort
|
||
break
|
||
case 'sales_sum':
|
||
params.sort_by_sales = saleSort
|
||
break
|
||
}
|
||
if(this.brandIndex >= 0) {
|
||
params.brand_id = this.brandList[this.brandIndex].brand_id;
|
||
}
|
||
const {
|
||
data: { lists, count },
|
||
} = await this.$get('goods/getGoodsList', {
|
||
params,
|
||
})
|
||
this.goodsList = lists
|
||
if (!lists.length) {
|
||
this.isHasGoods = false
|
||
} else {
|
||
this.isHasGoods = true
|
||
}
|
||
this.count = count
|
||
},
|
||
// 获取品牌
|
||
async getBrand() {
|
||
const params = {
|
||
page_size: 20,
|
||
page_no: this.page,
|
||
cate_id: this.cateId,
|
||
}
|
||
|
||
const {
|
||
data
|
||
} = await this.$get('goods/getBrandListByCateId', {
|
||
params,
|
||
})
|
||
this.brandList = data
|
||
},
|
||
|
||
// 获取品牌商品列表
|
||
getBrandGoods(index) {
|
||
this.brandIndex = index;
|
||
this.getGoods();
|
||
},
|
||
},
|
||
watch: {
|
||
categoryList: {
|
||
immediate: true,
|
||
handler(value) {
|
||
const { id } = this.$route.query
|
||
this.changeData(Number(id))
|
||
},
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.category {
|
||
padding: 16px 0;
|
||
.category-hd {
|
||
.category-wrap {
|
||
padding: 0 16px;
|
||
}
|
||
.category-con {
|
||
border-bottom: 1px dashed #e5e5e5;
|
||
align-items: flex-start;
|
||
padding-top: 16px;
|
||
word-wrap: break-word;
|
||
.name {
|
||
flex: none;
|
||
}
|
||
.item {
|
||
margin-bottom: 16px;
|
||
width: 140px;
|
||
margin-left: 14px;
|
||
cursor: pointer;
|
||
&.active {
|
||
color: $--color-primary;
|
||
}
|
||
&:hover {
|
||
color: $--color-primary;
|
||
}
|
||
}
|
||
}
|
||
.sort {
|
||
padding: 15px 16px;
|
||
.sort-name {
|
||
.item {
|
||
margin-right: 30px;
|
||
cursor: pointer;
|
||
&.active {
|
||
color: $--color-primary;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.brand-list {
|
||
border-top: 1px dashed #e5e5e5;
|
||
}
|
||
}
|
||
|
||
.goods-list {
|
||
margin-top: 20px;
|
||
}
|
||
</style> |