feat: 公共页头点击事件添加路由跳转

components/BsLogin.vue

@@ -150,7 +150,7 @@ export default {
           const { result } = await ApiPostLogin({
             ...this.form,
             clientId: 1,
-            systemId: 1,
+            systemId: 3,
           });
           if (result) {
             this.dialogTableVisible = false;

layouts/module/header/HeaderInfoBar.vue

@@ -46,14 +46,20 @@
         </div>
         <template>
           <div v-if="!menuVisible" class="header-wrap-content--line"></div>
-          <div class="header-wrap-content__common flex flex-middle">
+          <div
+            class="header-wrap-content__common flex flex-middle"
+            @click="onJumpPersonalPage('message')"
+          >
             <img src="@/static/images/layout/icon-message.png" />
             <span>消息</span>
             <div class="wrap-content-message__tip">33</div>
           </div>
         </template>
         <div class="header-wrap-content--line"></div>
-        <div class="header-wrap-content__common flex flex-middle">
+        <div
+          class="header-wrap-content__common flex flex-middle"
+          @click="onJumpPersonalPage('order')"
+        >
           <img src="@/static/images/layout/icon-order.png" />
           <span>我的订单</span>
         </div>
@@ -110,15 +116,20 @@ export default {
     handleCommandClick(event) {
       switch (event) {
         case MENU_VALUE.PERSONAL:
-          this.$router.push('/account');
+          this.$router.push("/account");
           break;
         case MENU_VALUE.ADDRESS:
-          this.$router.push('/account');
-           break;
+          this.$router.push("/account");
+          break;
         case MENU_VALUE.LOGON_OUT:
           this.$store.commit("setLoginOut");
       }
     },
+
+    // 跳转个人中心页面
+    onJumpPersonalPage(type) {
+      this.$router.push(`/account?type=${type}`);
+    },
   },
 };
 </script>

layouts/module/header/index.vue

@@ -58,15 +58,21 @@
                     placeholder="请输入商品名称"
                   ></el-input>
                 </div>
-                <div class="search-icon flex flex-center flex-middle">
+                <div
+                  class="search-icon flex flex-center flex-middle"
+                  @click="onSearch"
+                >
                   <img src="@/static/images/layout/icon-search.png" />
                 </div>
               </div>
-              <div class="box-wrap-right__cart flex flex-middle">
+              <nuxt-link
+                class="box-wrap-right__cart flex flex-middle"
+                to="/cart"
+              >
                 <img src="@/static/images/layout/icon-shop.png" />
                 <span>购物车</span>
                 <div class="wrap-right-cart__tip">3</div>
-              </div>
+              </nuxt-link>
             </div>
           </div>
           <div class="bar-header-box__tab flex flex-middle">
@@ -91,7 +97,7 @@
                   <div
                     v-for="item in categrayData"
                     :key="item.id"
-                    @mouseenter="handleCategoSelect(item.id)"
+                    @mouseenter="handleCategorySelect(item.id)"
                     class="menu-left__item flex flex-middle"
                   >
                     <img />
@@ -107,24 +113,25 @@
                     v-for="item in currentCategrayList"
                     :key="item.id"
                     class="menu-right__item"
+                    @click="onCateogryTwoClick(item)"
                   >
                     {{ item.name }}
                   </div>
                 </div>
               </div>
             </div>
-            <nuxt-link
+            <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.path,
+                  item.value === $nuxt.$route.fullPath,
               }"
-              :to="item.value"
+              @click="onTabSelect(item)"
             >
               {{ item.label }}
-            </nuxt-link>
+            </div>
           </div>
         </div>
       </div>
@@ -167,9 +174,9 @@ export default {
       tabPath: "/",
       tabList: [
         { label: "首页", value: "/" },
-        { label: "爆款推荐", value: "/hot" },
-        { label: "开发书籍", value: "/book" },
-        { label: "限时秒杀", value: "/skill" },
+        { label: "爆款推荐", value: "/goods/list?id=1" },
+        { label: "开发书籍", value: "/goods/list?id=2" },
+        { label: "限时秒杀", value: "/sckill" },
       ],
       categroyTwoVisible: false, // 是否展示二级分类
       categroyVisible: false, // 是否展示一级分类
@@ -194,9 +201,13 @@ export default {
       this.$isLoginValidate();
     },
     // 一级分类选中
-    handleCategoSelect(id) {
+    handleCategorySelect(id) {
       this.currentCategrayId = id;
     },
+    // 二级分类点击
+    onCateogryTwoClick() {
+      this.$router.push("/goods/list");
+    },
     // 一级分类是否可见
     handleCategoryChange(val) {
       this.categroyVisible = val;
@@ -208,6 +219,10 @@ export default {
     handleTabSelect(path) {
       this.$router.push({ path });
     },
+    onTabSelect({ value }) {
+      this.tabPath = value;
+      this.$router.push({ path: value });
+    },
     // 获取热门分类信息
     async getCategroyData() {
       const { result } = await ApiGetCategoryOneList();
@@ -227,6 +242,10 @@ export default {
         );
       }
     },
+    onSearch() {
+      // 储存搜索内容
+      this.$router.push("/goods/list");
+    },
   },
 };
 </script>