glhcp/pc/pages/search_goodsList.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: 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>