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.
380 lines
9.6 KiB
380 lines
9.6 KiB
<template>
|
|
<div class="layout-header">
|
|
<!-- 滚动吸顶头部 -->
|
|
<div v-show="isSticky">
|
|
<div
|
|
class="sticky-bar-header"
|
|
:class="{ 'sticky-bar-header--hide-shadow': hideBarShadow }"
|
|
>
|
|
<div class="sticky-bar-header__wrap flex flex-middle flex-between">
|
|
<div class="flex flex-middle">
|
|
<div class="bar-header-wrap__logo" @click="onOpenHomePage">
|
|
<img src="~/assets/img/layout/logo-sticky.png" />
|
|
</div>
|
|
<el-menu
|
|
:default-active="tabPath"
|
|
mode="horizontal"
|
|
@select="onTabSelect"
|
|
>
|
|
<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="~/assets/img/layout/icon-search-sticky.png"
|
|
@click="onEnterSearch"
|
|
/>
|
|
<div class="header-wrap-icons__shop" @click="onOpenCartPage">
|
|
<img src="~/assets/img/layout/icon-shop-sticky.png" />
|
|
<div
|
|
v-if="cartCount > 0"
|
|
:class="{ 'wrap-icons-shop__tip--more': cartCount > 10 }"
|
|
class="wrap-icons-shop__tip flex flex-middle flex-center"
|
|
>
|
|
{{ cartCount }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="token"
|
|
class="header-wrap-icons__login"
|
|
@click="$router.push('/account/home')"
|
|
>
|
|
<img :src="userInfo.avatar" />
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="header-wrap-icons__unlogin"
|
|
@click="onLoginClick"
|
|
>
|
|
登录
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template>
|
|
<HeaderInfoBar />
|
|
<div class="default-bar-header">
|
|
<div class="bar-header-box">
|
|
<div class="bar-header-box__wrap flex flex-between flex-middle">
|
|
<div class="header-box-wrap__logo" @click="onOpenHomePage">
|
|
<img src="~/assets/img/layout/logo.png" />
|
|
</div>
|
|
<div class="header-box-wrap__right flex flex-middle">
|
|
<div class="box-wrap-right__search flex">
|
|
<div class="search-input">
|
|
<el-input
|
|
ref="searchInput"
|
|
v-model="searchContent"
|
|
clearable
|
|
placeholder="请输入商品名称"
|
|
@keyup.enter.native="onSearch"
|
|
>
|
|
</el-input>
|
|
</div>
|
|
<div
|
|
slot="suffix"
|
|
class="search-icon flex flex-center flex-middle"
|
|
@click="onSearch"
|
|
>
|
|
<img src="~/assets/img/layout/icon-search.png" />
|
|
</div>
|
|
</div>
|
|
<!-- 购物车 -->
|
|
<HeaderCart />
|
|
</div>
|
|
</div>
|
|
<div class="bar-header-box__tab flex flex-middle">
|
|
<HeaderCategory />
|
|
<div
|
|
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.value === $nuxt.$route.fullPath,
|
|
}"
|
|
@click="onTabSelect(item.value)"
|
|
>
|
|
{{ item.label }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="!hideBarLine" class="layout-header-line"></div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapState } from "vuex";
|
|
import { CATEGROY_LEVEL } from "@/constants";
|
|
import { ApiGetHomeSeckill } from "@/plugins/api/seckill";
|
|
import HeaderInfoBar from "./HeaderInfoBar.vue";
|
|
import HeaderCategory from "./HeaderCategory.vue";
|
|
import HeaderCart from "./HeaderCart.vue";
|
|
|
|
export default {
|
|
name: "DefaultHeader",
|
|
components: { HeaderInfoBar, HeaderCategory, HeaderCart },
|
|
props: {
|
|
// 是否置顶
|
|
isSticky: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
searchContent: "",
|
|
tabPath: "/",
|
|
cartProductList: [], // 购物车列表
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(["userInfo", "token", "seckillTabVisible", "cartProducts"]),
|
|
cartCount() {
|
|
return this.cartProducts.length;
|
|
},
|
|
tabList() {
|
|
const defaultList = [
|
|
{ label: "首页", value: "/" },
|
|
{
|
|
label: "开发书籍",
|
|
value: `/goods/list?id=6&levelType=${CATEGROY_LEVEL.ONE}`,
|
|
},
|
|
];
|
|
if (this.seckillTabVisible) {
|
|
return [...defaultList, { label: "限时秒杀", value: "/seckill" }];
|
|
}
|
|
return defaultList;
|
|
},
|
|
|
|
// 是否隐藏吸顶tab底部阴影
|
|
hideBarShadow() {
|
|
return ["/seckill"].includes(this.$route.path);
|
|
},
|
|
|
|
// 是否隐藏底部黄色边框
|
|
hideBarLine() {
|
|
return ["/", "/seckill"].includes(this.$route.path);
|
|
},
|
|
},
|
|
watch: {
|
|
"$route.path"(val) {
|
|
if (val !== "/goods/list") {
|
|
this.searchContent = "";
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
this.getSeckillData();
|
|
},
|
|
methods: {
|
|
onEnterSearch() {
|
|
document.querySelector("body").scrollIntoView({ behavior: "smooth" });
|
|
setTimeout(() => {
|
|
this.$refs.searchInput.focus();
|
|
}, 500);
|
|
},
|
|
async getSeckillData() {
|
|
const { result } = await ApiGetHomeSeckill();
|
|
if (result && result.activityTimeVO) {
|
|
this.$store.commit("setSeckillTabVisible", true);
|
|
}
|
|
},
|
|
onLoginClick() {
|
|
this.$isLoginValidate();
|
|
},
|
|
onTabSelect(value) {
|
|
this.tabPath = value;
|
|
this.searchContent = "";
|
|
window.open(`${location.origin}${value}`);
|
|
},
|
|
onSearch() {
|
|
this.$router.push({
|
|
path: "/goods/list",
|
|
query: {
|
|
keyword: this.searchContent,
|
|
},
|
|
});
|
|
},
|
|
onOpenCartPage() {
|
|
if (!this.$isLoginValidate()) {
|
|
return;
|
|
}
|
|
window.open(`${location.origin}/cart`);
|
|
},
|
|
onOpenHomePage() {
|
|
if (this.$route.path === "/") {
|
|
return;
|
|
}
|
|
window.open(`${location.origin}/`);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.sticky-bar-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 50px;
|
|
z-index: 10;
|
|
background: #ffffff;
|
|
box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
|
|
&--hide-shadow {
|
|
box-shadow: none;
|
|
/deep/.el-menu {
|
|
.is-active {
|
|
border-bottom: none !important;
|
|
}
|
|
}
|
|
}
|
|
.sticky-bar-header__wrap {
|
|
@include layout-box;
|
|
height: 100%;
|
|
.bar-header-wrap__logo {
|
|
width: 164px;
|
|
height: 28px;
|
|
margin-right: 50px;
|
|
cursor: pointer;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.bar-header-wrap__icons {
|
|
cursor: pointer;
|
|
img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
.header-wrap-icons__shop {
|
|
position: relative;
|
|
margin-left: 20px;
|
|
.wrap-icons-shop__tip {
|
|
position: absolute;
|
|
left: 18px;
|
|
top: -4px;
|
|
height: 14px;
|
|
width: 14px;
|
|
background: #ff512b;
|
|
font-size: 10px;
|
|
color: #ffffff;
|
|
border-radius: 50%;
|
|
&--more {
|
|
width: unset;
|
|
padding: 0 3px;
|
|
border-radius: 7px;
|
|
}
|
|
}
|
|
}
|
|
.header-wrap-icons__login {
|
|
margin-left: 47px;
|
|
img {
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
.header-wrap-icons__unlogin {
|
|
font-size: 16px;
|
|
color: #909399;
|
|
margin-left: 30px;
|
|
}
|
|
}
|
|
/deep/ .el-menu {
|
|
height: 50px;
|
|
color: #666666;
|
|
.is-active {
|
|
color: #ff7f39;
|
|
border-bottom: 3px solid #ff823c;
|
|
}
|
|
.el-menu-item:hover {
|
|
color: #ff7f39;
|
|
}
|
|
.el-menu-item {
|
|
height: 100%;
|
|
line-height: 50px;
|
|
font-size: 16px;
|
|
margin: 0 30px;
|
|
padding: 0 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.default-bar-header {
|
|
padding-top: 32px;
|
|
position: relative;
|
|
z-index: 3;
|
|
.bar-header-box {
|
|
@include layout-box;
|
|
background: #ffffff;
|
|
.bar-header-box__wrap {
|
|
height: 40px;
|
|
font-size: 14px;
|
|
margin-bottom: 38px;
|
|
padding-right: 50px;
|
|
cursor: pointer;
|
|
.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;
|
|
border-radius: 4px;
|
|
/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 4px 4px 0px;
|
|
z-index: 2;
|
|
cursor: pointer;
|
|
img {
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bar-header-box__tab {
|
|
height: 38px;
|
|
.header-box-tab__common--light {
|
|
color: #ff7f39 !important;
|
|
}
|
|
.header-box-tab__common {
|
|
margin-left: 78px;
|
|
height: 100%;
|
|
font-size: 16px;
|
|
color: #666666;
|
|
cursor: pointer;
|
|
&:hover {
|
|
color: #ff875b;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.layout-header-line {
|
|
width: 100%;
|
|
height: 2px;
|
|
background: #ff875b;
|
|
}
|
|
</style>
|