Merge branch 'feature/task1.0.0_xg' into 'feature/task1.0.0'

feat: 热门分类添加显示条件,添加页面滚动事件监听

See merge request yanxuan-frontend/shop-pc!7
merge-requests/8/head
肖广 3 years ago
commit 722af3e2e0

@ -8,7 +8,11 @@
<template> <template>
<div class="layout"> <div class="layout">
<BsLogin :visible.sync="loginVisible" /> <BsLogin :visible.sync="loginVisible" />
<Header /> <Header
:is-categroy-open="categroyOption.open"
:show-categroy-tab="categroyOption.show"
:is-sticky="isSticky"
/>
<Nuxt /> <Nuxt />
<Footer /> <Footer />
</div> </div>
@ -17,10 +21,18 @@
import BsLogin from "@/components/BsLogin.vue"; import BsLogin from "@/components/BsLogin.vue";
import Header from "./module/header/index.vue"; import Header from "./module/header/index.vue";
import Footer from "./module/footer/index.vue"; import Footer from "./module/footer/index.vue";
const CATEGROY_OPEN_PAGES = ["/"]; // tab
const CATEGROY_HIDE_PAGES = ["/account"]; // tab
export default { export default {
name: "Layout", name: "Layout",
components: { Header, Footer, BsLogin }, components: { Header, Footer, BsLogin },
data() {
return {
isSticky: false,
ticking: false,
};
},
computed: { computed: {
loginVisible: { loginVisible: {
get() { get() {
@ -30,6 +42,34 @@ export default {
this.$store.commit("setLoginVisible", val); this.$store.commit("setLoginVisible", val);
}, },
}, },
categroyOption() {
//
const currentPath = this.$route.path;
return {
open: CATEGROY_OPEN_PAGES.includes(currentPath),
show: !CATEGROY_HIDE_PAGES.includes(currentPath),
};
},
},
mounted() {
//
window.addEventListener("scroll", this.scrollEventMethod);
},
destroyed() {
window.removeEventListener("scroll", this.scrollEventMethod);
},
methods: {
scrollEventMethod(e) {
const that = this;
//
if (!that.ticking) {
window.requestAnimationFrame(function () {
that.ticking = false;
that.isSticky = window.scrollY > 300;
});
that.ticking = true;
}
},
}, },
}; };
</script> </script>

@ -111,8 +111,10 @@ export default {
switch (event) { switch (event) {
case MENU_VALUE.PERSONAL: case MENU_VALUE.PERSONAL:
this.$router.push('/account'); this.$router.push('/account');
case MENU_VALUE.ADDRESS: break;
case MENU_VALUE.ADDRESS:
this.$router.push('/account'); this.$router.push('/account');
break;
case MENU_VALUE.LOGON_OUT: case MENU_VALUE.LOGON_OUT:
this.$store.commit("setLoginOut"); this.$store.commit("setLoginOut");
} }

@ -1,5 +1,5 @@
<template> <template>
<div class="layout-header" :class="{ 'layout-sticky-bar-header': isSticky }"> <div class="layout-header">
<template v-if="isSticky"> <template v-if="isSticky">
<div class="sticky-bar-header"> <div class="sticky-bar-header">
<div class="sticky-bar-header__wrap flex flex-middle flex-between"> <div class="sticky-bar-header__wrap flex flex-middle flex-between">
@ -9,7 +9,7 @@
src="@/static/images/layout/logo-sticky.png" src="@/static/images/layout/logo-sticky.png"
/> />
<el-menu <el-menu
:default-active="tabIndex" :default-active="tabPath"
mode="horizontal" mode="horizontal"
@select="handleTabSelect" @select="handleTabSelect"
> >
@ -27,12 +27,21 @@
<img src="@/static/images/layout/icon-shop-sticky.png" /> <img src="@/static/images/layout/icon-shop-sticky.png" />
<span class="">3</span> <span class="">3</span>
</div> </div>
<div class="header-wrap-icons__login">登录</div> <div v-if="token" class="header-wrap-icons__login">
<img :src="userInfo.avatar" />
</div>
<div
v-else
class="header-wrap-icons__unlogin"
@click="onLoginClick"
>
登录
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<template v-else> <template>
<HeaderInfoBar /> <HeaderInfoBar />
<div class="default-bar-header"> <div class="default-bar-header">
<div class="bar-header-box"> <div class="bar-header-box">
@ -61,29 +70,38 @@
</div> </div>
</div> </div>
<div class="bar-header-box__tab flex flex-middle"> <div class="bar-header-box__tab flex flex-middle">
<div class="header-box-tab__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"> <div class="tab-category__label flex flex-center flex-middle">
<img src="@/static/images/layout/icon-category.png" /> <img src="@/static/images/layout/icon-category.png" />
<span>热门分类</span> <span>热门分类</span>
</div> </div>
<div class="tab-category__menu flex flex-left"> <div
v-show="isCategroyOpen || categroyVisible"
class="tab-category__menu flex flex-left"
@mouseenter="handleCategoryTwoChange(true)"
@mouseleave="handleCategoryTwoChange(false)"
>
<!-- 左侧一级分类 -->
<div class="tab-category-menu__left"> <div class="tab-category-menu__left">
<div <div
v-for="item in categrayData" v-for="item in categrayData"
:key="item.id" :key="item.id"
@mouseenter="handleMouEnter(item.id)" @mouseenter="handleCategoSelect(item.id)"
@mouseleave="categrayHoverVisible = false"
class="menu-left__item flex flex-middle" class="menu-left__item flex flex-middle"
> >
<img /> <img />
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</div> </div>
</div> </div>
<!-- 右侧二级分类 -->
<div <div
v-show="categrayHoverVisible" v-show="categroyTwoVisible"
class="tab-category-menu__right" class="tab-category-menu__right"
@mouseenter="categrayHoverVisible = true"
@mouseleave="categrayHoverVisible = false"
> >
<div <div
v-for="item in currentCategrayList" v-for="item in currentCategrayList"
@ -101,9 +119,9 @@
class="header-box-tab__common flex flex-center flex-middle" class="header-box-tab__common flex flex-center flex-middle"
:class="{ :class="{
'header-box-tab__common--light': 'header-box-tab__common--light':
item.path === $nuxt.$route.path, item.value === $nuxt.$route.path,
}" }"
:to="item.path" :to="item.value"
> >
{{ item.label }} {{ item.label }}
</nuxt-link> </nuxt-link>
@ -114,43 +132,53 @@
</div> </div>
</template> </template>
<script> <script>
import { mapState } from "vuex";
import HeaderInfoBar from "./HeaderInfoBar.vue"; import HeaderInfoBar from "./HeaderInfoBar.vue";
import { import {
ApiGetCategoryOneList, ApiGetCategoryOneList,
ApiGetCategoryTwoAndGoods, ApiGetCategoryTwoAndGoods,
} from "@/plugins/api/goods"; } from "@/plugins/api/goods";
const TAB_TYPE = {
HOME: 1,
RECOMMEND: 2,
BOOK: 3,
TIME_LIMIT: 4,
};
export default { export default {
name: "DefaultHeader", name: "DefaultHeader",
components: { HeaderInfoBar }, components: { HeaderInfoBar },
props: { props: {
//
isSticky: { isSticky: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
//
isCategroyOpen: {
type: Boolean,
default: false,
},
// tab
showCategroyTab: {
type: Boolean,
default: true,
},
}, },
data() { data() {
return { return {
searchContent: "", searchContent: "",
tabIndex: TAB_TYPE.HOME, tabPath: "/",
tabList: [ tabList: [
{ label: "首页", value: TAB_TYPE.HOME, path: "/" }, { label: "首页", value: "/" },
{ label: "爆款推荐", value: TAB_TYPE.RECOMMEND, path: "/hot" }, { label: "爆款推荐", value: "/hot" },
{ label: "开发书籍", value: TAB_TYPE.BOOK, path: "/book" }, { label: "开发书籍", value: "/book" },
{ label: "限时秒杀", value: TAB_TYPE.TIME_LIMIT, path: "/skill" }, { label: "限时秒杀", value: "/skill" },
], ],
categrayHoverVisible: false, categroyTwoVisible: false, //
currentCategrayId: 0, categroyVisible: false, //
currentCategrayId: 0, // id
categrayData: [], categrayData: [],
}; };
}, },
computed: { computed: {
...mapState(["userInfo", "token"]),
currentCategrayList() { currentCategrayList() {
const data = this.categrayData.find(({ id }) => { const data = this.categrayData.find(({ id }) => {
return this.currentCategrayId === id; return this.currentCategrayId === id;
@ -162,10 +190,24 @@ export default {
this.getCategroyData(); this.getCategroyData();
}, },
methods: { methods: {
handleMouEnter(id) { onLoginClick() {
this.categrayHoverVisible = true; this.$isLoginValidate();
},
//
handleCategoSelect(id) {
this.currentCategrayId = id; this.currentCategrayId = id;
}, },
//
handleCategoryChange(val) {
this.categroyVisible = val;
},
//
handleCategoryTwoChange(val) {
this.categroyTwoVisible = val;
},
handleTabSelect(path) {
this.$router.push({ path });
},
// //
async getCategroyData() { async getCategroyData() {
const { result } = await ApiGetCategoryOneList(); const { result } = await ApiGetCategoryOneList();
@ -189,15 +231,15 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.layout-sticky-bar-header {
height: 50px;
}
.sticky-bar-header { .sticky-bar-header {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 50px; height: 50px;
z-index: 10;
background: #ffffff;
box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
.sticky-bar-header__wrap { .sticky-bar-header__wrap {
width: 1200px; width: 1200px;
height: 100%; height: 100%;
@ -210,15 +252,12 @@ export default {
.bar-header-wrap__icons { .bar-header-wrap__icons {
cursor: pointer; cursor: pointer;
img { img {
width: 23px; width: 24px;
height: 23px; height: 24px;
} }
.header-wrap-icons__shop { .header-wrap-icons__shop {
position: relative; position: relative;
margin: 0 30px 0 14px; margin-left: 14px;
img {
width: 30px;
}
span { span {
position: absolute; position: absolute;
right: -6px; right: -6px;
@ -235,8 +274,17 @@ export default {
} }
} }
.header-wrap-icons__login { .header-wrap-icons__login {
margin-left: 47px;
img {
width: 34px;
height: 34px;
border-radius: 50%;
}
}
.header-wrap-icons__unlogin {
font-size: 16px; font-size: 16px;
color: #909399; color: #909399;
margin-left: 30px;
} }
} }
/deep/ .el-menu { /deep/ .el-menu {

Loading…
Cancel
Save