|
|
|
|
@ -1,5 +1,6 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="layout-header">
|
|
|
|
|
<!-- 滚动吸顶头部 -->
|
|
|
|
|
<template v-if="isSticky">
|
|
|
|
|
<div class="sticky-bar-header">
|
|
|
|
|
<div class="sticky-bar-header__wrap flex flex-middle flex-between">
|
|
|
|
|
@ -75,6 +76,7 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 热门分类 -->
|
|
|
|
|
<div class="bar-header-box__tab flex flex-middle">
|
|
|
|
|
<div
|
|
|
|
|
v-show="showCategroyTab"
|
|
|
|
|
@ -88,17 +90,21 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
v-show="isCategroyOpen || categroyVisible"
|
|
|
|
|
class="tab-category__menu flex flex-left"
|
|
|
|
|
class="tab-category__menu flex"
|
|
|
|
|
@mouseenter="handleCategoryTwoChange(true)"
|
|
|
|
|
@mouseleave="handleCategoryTwoChange(false)"
|
|
|
|
|
>
|
|
|
|
|
<!-- 左侧一级分类 -->
|
|
|
|
|
<div class="tab-category-menu__left">
|
|
|
|
|
<div
|
|
|
|
|
v-for="item in categrayData"
|
|
|
|
|
v-for="item in categroyData"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
@mouseenter="handleCategorySelect(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>
|
|
|
|
|
@ -107,15 +113,25 @@
|
|
|
|
|
<!-- 右侧二级分类 -->
|
|
|
|
|
<div
|
|
|
|
|
v-show="categroyTwoVisible"
|
|
|
|
|
class="tab-category-menu__right"
|
|
|
|
|
class="tab-category-menu__right flex-1"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
v-for="item in currentCategrayList"
|
|
|
|
|
v-for="item in categroyData"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
class="menu-right__item"
|
|
|
|
|
@click="onCateogryTwoClick(item)"
|
|
|
|
|
@mouseenter="handleCategoryHover(item.id)"
|
|
|
|
|
class="category-menu-right__wrap"
|
|
|
|
|
:class="{
|
|
|
|
|
'category-menu-right__wrap--light':
|
|
|
|
|
item.id === currentCategroyId,
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
{{ item.name }}
|
|
|
|
|
<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>
|
|
|
|
|
@ -141,11 +157,12 @@
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
import { mapState } from "vuex";
|
|
|
|
|
import HeaderInfoBar from "./HeaderInfoBar.vue";
|
|
|
|
|
import {
|
|
|
|
|
ApiGetCategoryOneList,
|
|
|
|
|
ApiGetCategoryTwoAndGoods,
|
|
|
|
|
} from "@/plugins/api/goods";
|
|
|
|
|
import { CATEGROY_LEVEL } from "@/constants";
|
|
|
|
|
import HeaderInfoBar from "./HeaderInfoBar.vue";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "DefaultHeader",
|
|
|
|
|
@ -177,28 +194,29 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
CATEGROY_LEVEL,
|
|
|
|
|
searchContent: "",
|
|
|
|
|
tabPath: "/",
|
|
|
|
|
tabList: [
|
|
|
|
|
{ label: "首页", value: "/" },
|
|
|
|
|
{ label: "爆款推荐", value: "/goods/list?id=1" },
|
|
|
|
|
{ label: "开发书籍", value: "/goods/list?id=2" },
|
|
|
|
|
{
|
|
|
|
|
label: "爆款推荐",
|
|
|
|
|
value: `/goods/list?id=recommend`,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "开发书籍",
|
|
|
|
|
value: `/goods/list?id=6&levelType=${CATEGROY_LEVEL.ONE}`,
|
|
|
|
|
},
|
|
|
|
|
{ label: "限时秒杀", value: "/sckill" },
|
|
|
|
|
],
|
|
|
|
|
categroyTwoVisible: false, // 是否展示二级分类
|
|
|
|
|
categroyVisible: false, // 是否展示一级分类
|
|
|
|
|
currentCategrayId: 0, // 当前鼠标悬停的一级分类id
|
|
|
|
|
categrayData: [],
|
|
|
|
|
currentCategroyId: 0, // 当前鼠标悬停的一级分类id
|
|
|
|
|
categroyData: [],
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
...mapState(["userInfo", "token"]),
|
|
|
|
|
currentCategrayList() {
|
|
|
|
|
const data = this.categrayData.find(({ id }) => {
|
|
|
|
|
return this.currentCategrayId === id;
|
|
|
|
|
});
|
|
|
|
|
return (data && data.list) || [];
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getCategroyData();
|
|
|
|
|
@ -207,24 +225,35 @@ export default {
|
|
|
|
|
onLoginClick() {
|
|
|
|
|
this.$isLoginValidate();
|
|
|
|
|
},
|
|
|
|
|
// 一级分类选中
|
|
|
|
|
handleCategorySelect(id) {
|
|
|
|
|
this.currentCategrayId = id;
|
|
|
|
|
// 一级分类鼠标悬停
|
|
|
|
|
handleCategoryHover(id) {
|
|
|
|
|
this.currentCategroyId = id;
|
|
|
|
|
},
|
|
|
|
|
// 二级分类点击
|
|
|
|
|
onCateogryTwoClick() {
|
|
|
|
|
this.$router.push("/goods/list");
|
|
|
|
|
// 分类点击
|
|
|
|
|
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;
|
|
|
|
|
},
|
|
|
|
|
handleTabSelect(path) {
|
|
|
|
|
this.$router.push({ path });
|
|
|
|
|
handleTabSelect(value) {
|
|
|
|
|
this.$router.push({ path: value });
|
|
|
|
|
},
|
|
|
|
|
onTabSelect({ value }) {
|
|
|
|
|
this.tabPath = value;
|
|
|
|
|
@ -240,7 +269,7 @@ export default {
|
|
|
|
|
async getCategroyData() {
|
|
|
|
|
const { result } = await ApiGetCategoryOneList();
|
|
|
|
|
if (result && result.length > 0) {
|
|
|
|
|
this.categrayData = await Promise.all(
|
|
|
|
|
this.categroyData = await Promise.all(
|
|
|
|
|
result.map(async (item) => {
|
|
|
|
|
const { result: resultGoods } = await ApiGetCategoryTwoAndGoods({
|
|
|
|
|
categoryId: item.id,
|
|
|
|
|
@ -436,13 +465,14 @@ export default {
|
|
|
|
|
width: 190px;
|
|
|
|
|
padding: 15px 0;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
.menu-left__item:hover {
|
|
|
|
|
color: #ff875b;
|
|
|
|
|
}
|
|
|
|
|
.menu-left__item {
|
|
|
|
|
height: 50px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
padding: 0 24px 0 41px;
|
|
|
|
|
&:hover,
|
|
|
|
|
&--light {
|
|
|
|
|
color: #ff875b;
|
|
|
|
|
}
|
|
|
|
|
img {
|
|
|
|
|
width: 20px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
@ -451,20 +481,29 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tab-category-menu__right {
|
|
|
|
|
width: 510px;
|
|
|
|
|
padding: 30px 26px;
|
|
|
|
|
padding: 15px 26px;
|
|
|
|
|
box-shadow: 7px 0px 10px 1px rgba(0, 0, 0, 0.1);
|
|
|
|
|
border: 1px solid #eeeeee;
|
|
|
|
|
background: #ffffff;
|
|
|
|
|
.menu-right__item:hover {
|
|
|
|
|
color: #ff875b;
|
|
|
|
|
}
|
|
|
|
|
.menu-right__item {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
.category-menu-right__wrap {
|
|
|
|
|
height: 50px;
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
padding: 0 16px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: #999999;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
&:hover,
|
|
|
|
|
&--light {
|
|
|
|
|
background: #f8f8f8;
|
|
|
|
|
}
|
|
|
|
|
.menu-right-wrap__item {
|
|
|
|
|
color: #999999;
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
&:hover {
|
|
|
|
|
color: #ff875b;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
张征
3 years ago
