glhcp/pc/pages/search_goodsList.vue

326 lines
9.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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: threeIndex === index },
]"
v-for="(item, index) in categoryThree"
:key="index"
@click="changeData(item.id,index)"
>
{{ 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('goodsCategory/getThirdListByKeyword',{
params: {
keyword:query.name,
},
})
return {
categoryList: data,
}
},
data() {
return {
count: 0,
threeIndex: 0,
brandIndex:-1,
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,index) {
const { categoryList } = this
this.categoryThree = categoryList;
this.threeIndex = index || 0;
this.cateId = id || categoryList[this.threeIndex].id;
this.getGoods();
this.brandIndex = '-1';
this.sortType = '';
this.brandList = [];
},
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>