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