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/index.vue

404 lines
11 KiB

<template>
<div class="layout-header" :class="{ 'layout-sticky-bar-header': isSticky }">
<template v-if="isSticky">
<div class="sticky-bar-header">
<div class="sticky-bar-header__wrap flex flex-middle flex-between">
<div class="flex flex-middle">
<img
class="bar-header-wrap__logo"
src="@/static/images/layout/logo-sticky.png"
/>
<el-menu
:default-active="tabIndex"
mode="horizontal"
@select="handleTabSelect"
>
<el-menu-item
v-for="item in tabList"
:key="item.value"
:index="item.value"
>{{ item.label }}</el-menu-item
>
</el-menu>
</div>
<div class="bar-header-wrap__icons flex flex-middle">
<img src="@/static/images/layout/icon-search-sticky.png" />
<div class="header-wrap-icons__shop">
<img src="@/static/images/layout/icon-shop-sticky.png" />
<span class="">3</span>
</div>
<div class="header-wrap-icons__login">登录</div>
</div>
</div>
</div>
</template>
<template v-else>
<HeaderInfoBar />
<div class="default-bar-header">
<div class="bar-header-box">
<div class="bar-header-box__wrap flex flex-between flex-middle">
<img
class="header-box-wrap__logo"
src="@/static/images/layout/logo.png"
/>
<div class="header-box-wrap__right flex flex-middle">
<div class="box-wrap-right__search flex">
<div class="search-input">
<el-input
v-model="searchContent"
placeholder="请输入商品名称"
></el-input>
</div>
<div class="search-icon flex flex-center flex-middle">
<img src="@/static/images/layout/icon-search.png" />
</div>
</div>
<div class="box-wrap-right__cart flex flex-middle">
<img src="@/static/images/layout/icon-shop.png" />
<span>购物车</span>
<div class="wrap-right-cart__tip">3</div>
</div>
</div>
</div>
<div class="bar-header-box__tab flex flex-middle">
<div class="header-box-tab__category">
<div class="tab-category__label flex flex-center flex-middle">
<img src="@/static/images/layout/icon-category.png" />
<span>热门分类</span>
</div>
<div class="tab-category__menu flex flex-left">
<div class="tab-category-menu__left">
<div
v-for="item in categrayData"
:key="item.id"
@mouseenter="handleMouEnter(item.id)"
@mouseleave="categrayHoverVisible = false"
class="menu-left__item flex flex-middle"
>
<img />
<span>{{ item.name }}</span>
</div>
</div>
<div
v-show="categrayHoverVisible"
class="tab-category-menu__right"
@mouseenter="categrayHoverVisible = true"
@mouseleave="categrayHoverVisible = false"
>
<div
v-for="item in currentCategrayList"
:key="item.id"
class="menu-right__item"
>
{{ item.name }}
</div>
</div>
</div>
</div>
<nuxt-link
v-for="item in tabList"
:key="item.value"
class="header-box-tab__common flex flex-center flex-middle"
:class="{
'header-box-tab__common--light':
item.path === $nuxt.$route.path,
}"
:to="item.path"
>
{{ item.label }}
</nuxt-link>
</div>
</div>
</div>
</template>
</div>
</template>
<script>
import HeaderInfoBar from "./HeaderInfoBar.vue";
import {
ApiGetCategoryOneList,
ApiGetCategoryTwoAndGoods,
} from "@/plugins/api/goods";
const TAB_TYPE = {
HOME: 1,
RECOMMEND: 2,
BOOK: 3,
TIME_LIMIT: 4,
};
export default {
name: "DefaultHeader",
components: { HeaderInfoBar },
props: {
isSticky: {
type: Boolean,
default: false,
},
},
data() {
return {
searchContent: "",
tabIndex: TAB_TYPE.HOME,
tabList: [
{ label: "首页", value: TAB_TYPE.HOME, path: "/" },
{ label: "爆款推荐", value: TAB_TYPE.RECOMMEND, path: "/hot" },
{ label: "开发书籍", value: TAB_TYPE.BOOK, path: "/book" },
{ label: "限时秒杀", value: TAB_TYPE.TIME_LIMIT, path: "/skill" },
],
categrayHoverVisible: false,
currentCategrayId: 0,
categrayData: [],
};
},
computed: {
currentCategrayList() {
const data = this.categrayData.find(({ id }) => {
return this.currentCategrayId === id;
});
return (data && data.list) || [];
},
},
mounted() {
this.getCategroyData();
},
methods: {
handleMouEnter(id) {
this.categrayHoverVisible = true;
this.currentCategrayId = id;
},
// 获取热门分类信息
async getCategroyData() {
const { result } = await ApiGetCategoryOneList();
if (result && result.length > 0) {
this.categrayData = await Promise.all(
result.map(async (item) => {
const { result: resultGoods } = await ApiGetCategoryTwoAndGoods({
categoryId: item.id,
});
if (resultGoods && resultGoods.length > 0) {
return {
...item,
list: resultGoods,
};
}
})
);
}
},
},
};
</script>
<style lang="scss" scoped>
.layout-sticky-bar-header {
height: 50px;
}
.sticky-bar-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
.sticky-bar-header__wrap {
width: 1200px;
height: 100%;
margin: 0 auto;
.bar-header-wrap__logo {
width: 164px;
height: 28px;
margin-right: 50px;
}
.bar-header-wrap__icons {
cursor: pointer;
img {
width: 23px;
height: 23px;
}
.header-wrap-icons__shop {
position: relative;
margin: 0 30px 0 14px;
img {
width: 30px;
}
span {
position: absolute;
right: -6px;
top: -4px;
display: block;
height: 14px;
padding: 0 2px;
line-height: 14px;
text-align: center;
background: #ff512b;
font-size: 10px;
color: #ffffff;
border-radius: 50%;
}
}
.header-wrap-icons__login {
font-size: 16px;
color: #909399;
}
}
/deep/ .el-menu {
height: 50px;
color: #666666;
.is-active {
color: #ff7f39;
border-bottom: 2px solid #ff823c;
}
.el-menu-item:hover {
color: #ff7f39;
}
.el-menu-item {
height: 100%;
line-height: 50px;
font-size: 16px;
margin: 0 20px;
}
}
}
}
.default-bar-header {
padding-top: 32px;
position: relative;
z-index: 3;
.bar-header-box {
width: 1200px;
margin: 0 auto;
background: #ffffff;
.bar-header-box__wrap {
height: 42px;
font-size: 14px;
margin-bottom: 38px;
padding-right: 50px;
.header-box-wrap__logo {
width: 244px;
height: 100%;
}
.header-box-wrap__right {
.box-wrap-right__search {
margin-right: 23px;
.search-input {
width: 551px;
z-index: 1;
/deep/.el-input__inner:focus {
border-color: #ff512b;
}
}
.search-icon {
width: 77px;
margin-left: -2px;
background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
border-radius: 0px 8px 8px 0px;
z-index: 2;
cursor: pointer;
img {
width: 26px;
height: 26px;
}
}
}
.box-wrap-right__cart {
padding: 0 18px;
height: 42px;
line-height: 42px;
color: #999999;
border-radius: 8px 8px 8px 8px;
border: 1px solid #eeeeee;
cursor: pointer;
.wrap-right-cart__tip {
min-width: 14px;
height: 14px;
padding: 0 3px;
font-size: 10px;
line-height: 14px;
text-align: center;
background: #ff512b;
border-radius: 50%;
color: #ffffff;
}
img {
width: 16px;
height: 16px;
margin: 0 4px 0 10px;
}
}
}
}
.bar-header-box__tab {
height: 38px;
.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:hover {
color: #ff875b;
}
.menu-left__item {
height: 50px;
cursor: pointer;
padding: 0 24px 0 41px;
img {
width: 20px;
height: 20px;
margin-right: 16px;
}
}
}
.tab-category-menu__right {
width: 510px;
padding: 30px 26px;
box-shadow: 7px 0px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
border: 1px solid #eeeeee;
background: #ffffff;
.menu-right__item:hover {
color: #ff875b;
}
.menu-right__item {
display: inline-block;
font-size: 12px;
color: #999999;
margin-right: 20px;
cursor: pointer;
}
}
}
}
.header-box-tab__common--light {
color: #ff7f39 !important;
}
.header-box-tab__common {
width: 160px;
height: 100%;
font-size: 16px;
color: #666666;
cursor: pointer;
}
}
}
}
</style>