You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-pc/layouts/module/header/HeaderCategory.vue

220 lines
5.6 KiB

<template>
<div class="header-category">
<!-- 热门分类 -->
<div
v-show="showCategroyTab"
class="header-box-tab__category"
@mouseenter="handleCategoryChange(true)"
@mouseleave="handleCategoryChange(false)"
>
<div class="tab-category__label flex flex-center flex-middle">
<img src="~/assets/img/layout/icon-category.png" />
<span>热门分类</span>
</div>
<div
v-show="isCategroyOpen || categroyVisible"
class="tab-category__menu flex"
@mouseenter="handleCategoryTwoChange(true)"
@mouseleave="handleCategoryTwoChange(false)"
>
<!-- 左侧一级分类 -->
<div class="tab-category-menu__left">
<div
v-for="item in categroyData"
:key="item.id"
@mouseenter="handleCategoryHover(item.id)"
@click="onCategoryClick(item.id, CATEGROY_LEVEL.ONE)"
class="menu-left__item flex flex-middle"
:class="{
'menu-left__item--light': item.id === currentCategroyId,
}"
>
<img />
<span>{{ item.name }}</span>
</div>
</div>
<!-- 右侧二级分类 -->
<div
v-show="categroyTwoVisible"
class="tab-category-menu__right flex-1"
>
<div
v-for="item in categroyData"
:key="item.id"
@mouseenter="handleCategoryHover(item.id)"
class="category-menu-right__wrap"
:class="{
'category-menu-right__wrap--light': item.id === currentCategroyId,
}"
>
<span
v-for="itemList in item.list"
:key="itemList.id"
class="menu-right-wrap__item"
@click="onCategoryClick(itemList.id, CATEGROY_LEVEL.TWO)"
>{{ itemList.name }}</span
>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {
ApiGetCategoryOneList,
ApiGetCategoryTwoAndGoods,
} from "@/plugins/api/goods";
const CATEGROY_HIDE_PAGES = [/\/account/]; // 隐藏热门分类tab的页面
export default {
name: "HeaderCategory",
data() {
return {
categroyTwoVisible: false, // 是否展示二级分类
categroyVisible: false, // 是否展示一级分类
currentCategroyId: 0, // 当前鼠标悬停的一级分类id
categroyData: [],
};
},
computed: {
showCategroyTab() {
return !CATEGROY_HIDE_PAGES.some((reg) => {
return reg.test(this.$route.path);
});
},
// 热门分类默认打开
isCategroyOpen() {
return this.$route.path === "/";
},
},
created() {
this.getCategroyData();
},
methods: {
// 获取热门分类信息
async getCategroyData() {
const { result } = await ApiGetCategoryOneList();
if (result && result.length > 0) {
this.categroyData = await Promise.all(
result.map(async (item) => {
const { result: resultGoods } = await ApiGetCategoryTwoAndGoods({
categoryId: item.id,
});
if (resultGoods && resultGoods.length > 0) {
return {
...item,
list: resultGoods,
};
}
})
);
}
},
// 一级分类鼠标悬停
handleCategoryHover(id) {
this.currentCategroyId = id;
},
// 分类点击
onCategoryClick(id, levelType) {
this.categroyVisible = false;
this.categroyTwoVisible = false;
this.$router.push({
path: "/goods/list",
query: {
id,
levelType,
},
});
},
// 一级分类是否可见
handleCategoryChange(val) {
this.categroyVisible = val;
if (!val) {
this.currentCategroyId = 0;
}
},
// 二级分类是否可见
handleCategoryTwoChange(val) {
this.categroyTwoVisible = val;
},
},
};
</script>
<style lang="scss" scoped>
.header-category {
height: 100%;
.header-box-tab__category {
position: relative;
height: 100%;
.tab-category__label {
width: 190px;
height: 100%;
background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
border-radius: 4px 4px 0px 0px;
font-weight: bold;
color: #ffffff;
cursor: pointer;
img {
width: 20px;
height: 20px;
margin-right: 16px;
}
}
.tab-category__menu {
position: absolute;
top: 38px;
left: 0;
font-size: 14px;
color: #333333;
.tab-category-menu__left {
width: 190px;
padding: 15px 0;
background: #ffffff;
.menu-left__item {
height: 50px;
cursor: pointer;
padding: 0 24px 0 41px;
&:hover,
&--light {
color: #ff875b;
}
img {
width: 20px;
height: 20px;
margin-right: 16px;
}
}
}
.tab-category-menu__right {
padding: 15px 26px;
box-shadow: 7px 0px 10px 1px rgba(0, 0, 0, 0.1);
border: 1px solid #eeeeee;
background: #ffffff;
.category-menu-right__wrap {
height: 50px;
line-height: 50px;
padding: 0 16px;
font-size: 12px;
color: #999999;
white-space: nowrap;
&:hover,
&--light {
background: #f8f8f8;
}
.menu-right-wrap__item {
color: #999999;
margin-right: 20px;
cursor: pointer;
&:hover {
color: #ff875b;
}
}
}
}
}
}
}
</style>