feat: 调整热门分类逻辑以及交互

constants/index.js

@@ -19,4 +19,10 @@ const SEX_TYPE = {
   UNKNOW: 3, // 未知
 };
 
-export { TOKEN_KEY, ORDER_STATUS, SEX_TYPE };
+// 热门分类类级
+const CATEGROY_LEVEL = {
+  ONE: 1,
+  TWO: 2,
+};
+
+export { TOKEN_KEY, ORDER_STATUS, SEX_TYPE, CATEGROY_LEVEL };

layouts/module/header/index.vue

@@ -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"
+                    @mouseenter="handleCategoryHover(item.id)"
-                    @click="onCateogryTwoClick(item)"
+                    class="category-menu-right__wrap"
+                    :class="{
+                      'category-menu-right__wrap--light':
+                        item.id === currentCategroyId,
+                    }"
+                  >
+                    <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
                     >
-                    {{ item.name }}
                   </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
+      currentCategroyId: 0, // 当前鼠标悬停的一级分类id
-      categrayData: [],
+      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) {
+    handleCategoryHover(id) {
-      this.currentCategrayId = id;
+      this.currentCategroyId = id;
+    },
+    // 分类点击
+    onCategoryClick(id, levelType) {
+      this.categroyVisible = false;
+      this.categroyTwoVisible = false;
+      this.$router.push({
+        path: "/goods/list",
+        query: {
+          id,
+          levelType,
         },
-    // 二级分类点击
+      });
-    onCateogryTwoClick() {
-      this.$router.push("/goods/list");
     },
     // 一级分类是否可见
     handleCategoryChange(val) {
       this.categroyVisible = val;
+      if (!val) {
+        this.currentCategroyId = 0;
+      }
     },
     // 二级分类是否可见
     handleCategoryTwoChange(val) {
       this.categroyTwoVisible = val;
     },
-    handleTabSelect(path) {
+    handleTabSelect(value) {
-      this.$router.push({ path });
+      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: 15px 26px;
-            padding: 30px 26px;
             box-shadow: 7px 0px 10px 1px rgba(0, 0, 0, 0.1);
             border: 1px solid #eeeeee;
             background: #ffffff;
-            .menu-right__item:hover {
+            .category-menu-right__wrap {
-              color: #ff875b;
+              height: 50px;
-            }
+              line-height: 50px;
-            .menu-right__item {
+              padding: 0 16px;
-              display: inline-block;
               font-size: 12px;
+              color: #999999;
+              white-space: nowrap;
+              &:hover,
+              &--light {
+                background: #f8f8f8;
+              }
+              .menu-right-wrap__item {
                 color: #999999;
                 margin-right: 20px;
                 cursor: pointer;
+                &:hover {
+                  color: #ff875b;
+                }
+              }
             }
           }
         }

pages/account/index/home/module/LogisitcsInfo.vue

@@ -48,7 +48,7 @@
     <UiConfirm
       title="确认收到货了吗？"
       :visible.sync="ensureOrderVisible"
-      @ensure="handleOrderEnsure"
+      @confirm="handleOrderEnsure"
     />
   </div>
 </template>