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

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

See merge request yanxuan-frontend/shop-pc!7

layouts/default.vue

@@ -8,7 +8,11 @@
 <template>
   <div class="layout">
     <BsLogin :visible.sync="loginVisible" />
-    <Header />
+    <Header
+      :is-categroy-open="categroyOption.open"
+      :show-categroy-tab="categroyOption.show"
+      :is-sticky="isSticky"
+    />
     <Nuxt />
     <Footer />
   </div>
@@ -17,10 +21,18 @@
 import BsLogin from "@/components/BsLogin.vue";
 import Header from "./module/header/index.vue";
 import Footer from "./module/footer/index.vue";
+const CATEGROY_OPEN_PAGES = ["/"]; // 默认展开热门分类tab的页面
+const CATEGROY_HIDE_PAGES = ["/account"]; // 不展示热门分类tab的页面
 
 export default {
   name: "Layout",
   components: { Header, Footer, BsLogin },
+  data() {
+    return {
+      isSticky: false,
+      ticking: false,
+    };
+  },
   computed: {
     loginVisible: {
       get() {
@@ -30,6 +42,34 @@ export default {
         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>

layouts/module/header/HeaderInfoBar.vue

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

layouts/module/header/index.vue

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