From 804dd15fe0a5dd8f610530d1618068d8c465de6e Mon Sep 17 00:00:00 2001
From: xiaoguang <aadsdas1@dingtalk.com>
Date: Sat, 7 May 2022 22:20:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=87=E4=BB=B6=E4=BD=8D=E7=BD=AE?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/default.vue                           | 201 +----------------
 layouts/module/header/HeaderInfoBar.vue       | 202 ++++++++++++++++++
 .../{DefaultHeader.vue => header/index.vue}   | 137 ++++++------
 3 files changed, 272 insertions(+), 268 deletions(-)
 create mode 100644 layouts/module/header/HeaderInfoBar.vue
 rename layouts/module/{DefaultHeader.vue => header/index.vue} (67%)

diff --git a/layouts/default.vue b/layouts/default.vue
index c6d45ed..ba34c1a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -7,217 +7,22 @@
 -->
 <template>
   <div class="layout">
-    <div class="layout-header">
-      <div
-        class="layout-header-wrap layout-center flex flex-between flex-middle"
-      >
-        <div class="header-wrap__logo">马士兵严选欢迎你！</div>
-        <div class="header-wrap__content flex flex-middle">
-          <div class="header-wrap-content__login">
-            <div v-if="isLogin" class="wrap-content-login__text flex">
-              <span>请先</span>
-              <span class="content-login-text--light">登录/注册</span>
-            </div>
-            <el-dropdown @visible-change="menuVisible = $event">
-              <div
-                class="wrap-content-login__info flex flex-middle flex-center"
-              >
-                <span>你好，{{ userInfo.name }}</span>
-                <img class="content-login-info__logo" :src="menuIcon" />
-              </div>
-              <el-dropdown-menu slot="dropdown" class="dropdown-menu-self">
-                <div class="menu-item__wrap flex flex-middle">
-                  <img class="menu-item-wrap__avatar" />
-                  <span>{{ userInfo.name }}</span>
-                </div>
-                <div class="menu-item__line"></div>
-                <el-dropdown-item
-                  class="flex flex-between flex-middle"
-                  v-for="item in menuList"
-                  :key="item.value"
-                >
-                  <span> {{ item.label }}</span>
-                  <img src="@/static/images/layout/icon-arrow.png" />
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </div>
-          <template>
-            <div v-if="!menuVisible" class="header-wrap-content--line"></div>
-            <div class="header-wrap-content__common flex flex-middle">
-              <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">
-            <img src="@/static/images/layout/icon-order.png" />
-            <span>我的订单</span>
-          </div>
-          <div class="header-wrap-content--line"></div>
-          <div class="header-wrap-content__common flex flex-middle">
-            <img src="@/static/images/layout/icon-phone.png" />
-            <span>下载app</span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <DefaultHeader />
+    <Header />
     <div class="layout-box"><Nuxt /></div>
     <div class="layout-footer"></div>
   </div>
 </template>
 <script>
-import DefaultHeader from "./module/DefaultHeader.vue";
+import Header from "./module/header/index.vue";
 
-const MENU_VALUE = {
-  PERSONAL: 1,
-  ADDRESS: 2,
-  LOGON_OUT: 3,
-};
 export default {
   name: "Layout",
-  components: { DefaultHeader },
-  data() {
-    return {
-      isLogin: false,
-      userInfo: {
-        name: "仙女广",
-      },
-      menuVisible: false,
-      menuList: [
-        {
-          label: "个人中心",
-          value: MENU_VALUE.PERSONAL,
-        },
-        {
-          label: "收货地址",
-          value: MENU_VALUE.ADDRESS,
-        },
-        {
-          label: "退出登录",
-          value: MENU_VALUE.LOGON_OUT,
-        },
-      ],
-    };
-  },
-  computed: {
-    menuIcon() {
-      return this.menuVisible
-        ? require("@/static/images/layout/icon-up-light.png")
-        : require("@/static/images/layout/icon-up.png");
-    },
-  },
-  methods: {
-    onMenuClick() {},
-  },
+  components: { Header },
 };
 </script>
-<style lang="scss">
-.dropdown-menu-self {
-  width: 200px;
-  margin-top: 0 !important;
-  padding-bottom: 0;
-  .popper__arrow {
-    display: none;
-  }
-  .el-dropdown-menu__item:hover {
-    background: #f8f9fb;
-    color: #666666;
-  }
-  .el-dropdown-menu__item {
-    height: 42px;
-    font-size: 14px;
-    img {
-      width: 8px;
-      height: 14px;
-    }
-  }
-  .menu-item__wrap {
-    padding: 16px 24px;
-    font-size: 14px;
-    .menu-item-wrap__avatar {
-      width: 50px;
-      height: 50px;
-      margin-right: 13px;
-      border-radius: 50%;
-    }
-  }
-  .menu-item__line {
-    width: 100%;
-    height: 1px;
-    background: #eeeeee;
-    border-radius: 0px 0px 0px 0px;
-  }
-}
-</style>
 <style lang="scss" scoped>
 .layout-center {
   width: 1200px;
   margin: 0 auto;
 }
-.layout {
-  .layout-header {
-    height: 30px;
-    color: #999999;
-    background: #f1f1f1;
-    border-radius: 0px 0px 0px 0px;
-    .layout-header-wrap {
-      height: 100%;
-      .header-wrap__content {
-        .header-wrap-content__login {
-          .wrap-content-login__text {
-            .content-login-text--light {
-              margin-left: 6px;
-              color: #ff875b;
-              cursor: pointer;
-            }
-          }
-          .wrap-content-login__info:hover {
-            background: #ffffff !important;
-            color: #ff875b;
-          }
-          .wrap-content-login__info {
-            position: relative;
-            padding: 0 18px;
-            height: 30px;
-            cursor: pointer;
-            .content-login-info__logo {
-              width: 8px;
-              height: 4px;
-              margin-left: 4px;
-            }
-          }
-        }
-        .wrap-content-message__tip {
-          min-width: 14px;
-          height: 14px;
-          padding: 0 3px;
-          line-height: 14px;
-          font-size: 10px;
-          color: #ffffff;
-          text-align: center;
-          background: #ff512b;
-          border-radius: 50%;
-          margin-left: 4px;
-        }
-        .header-wrap-content--line {
-          width: 1px;
-          height: 10px;
-          background: #d8d8d8;
-        }
-        .header-wrap-content__common {
-          cursor: pointer;
-          padding: 0 18px;
-          img {
-            width: 14px;
-            height: 14px;
-            margin-right: 4px;
-          }
-        }
-      }
-    }
-  }
-}
 </style>
diff --git a/layouts/module/header/HeaderInfoBar.vue b/layouts/module/header/HeaderInfoBar.vue
new file mode 100644
index 0000000..12de5bc
--- /dev/null
+++ b/layouts/module/header/HeaderInfoBar.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="info-bar-header">
+    <div
+      class="info-bar-header-wrap layout-center flex flex-between flex-middle"
+    >
+      <div class="header-wrap__logo">马士兵严选欢迎你！</div>
+      <div class="header-wrap__content flex flex-middle">
+        <div class="header-wrap-content__login">
+          <div v-if="isLogin" class="wrap-content-login__text flex">
+            <span>请先</span>
+            <span class="content-login-text--light">登录/注册</span>
+          </div>
+          <el-dropdown @visible-change="menuVisible = $event">
+            <div class="wrap-content-login__info flex flex-middle flex-center">
+              <span>你好，{{ userInfo.name }}</span>
+              <img class="content-login-info__logo" :src="menuIcon" />
+            </div>
+            <el-dropdown-menu slot="dropdown" class="dropdown-menu-self">
+              <div class="menu-item__wrap flex flex-middle">
+                <img class="menu-item-wrap__avatar" />
+                <span>{{ userInfo.name }}</span>
+              </div>
+              <div class="menu-item__line"></div>
+              <el-dropdown-item
+                class="flex flex-between flex-middle"
+                v-for="item in menuList"
+                :key="item.value"
+              >
+                <span> {{ item.label }}</span>
+                <img src="@/static/images/layout/icon-arrow.png" />
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+        <template>
+          <div v-if="!menuVisible" class="header-wrap-content--line"></div>
+          <div class="header-wrap-content__common flex flex-middle">
+            <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">
+          <img src="@/static/images/layout/icon-order.png" />
+          <span>我的订单</span>
+        </div>
+        <div class="header-wrap-content--line"></div>
+        <div class="header-wrap-content__common flex flex-middle">
+          <img src="@/static/images/layout/icon-phone.png" />
+          <span>下载app</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+const MENU_VALUE = {
+  PERSONAL: 1,
+  ADDRESS: 2,
+  LOGON_OUT: 3,
+};
+
+export default {
+  data() {
+    return {
+      isLogin: false,
+      userInfo: {
+        name: "仙女广",
+      },
+      menuVisible: false,
+      menuList: [
+        {
+          label: "个人中心",
+          value: MENU_VALUE.PERSONAL,
+        },
+        {
+          label: "收货地址",
+          value: MENU_VALUE.ADDRESS,
+        },
+        {
+          label: "退出登录",
+          value: MENU_VALUE.LOGON_OUT,
+        },
+      ],
+    };
+  },
+  computed: {
+    menuIcon() {
+      return this.menuVisible
+        ? require("@/static/images/layout/icon-up-light.png")
+        : require("@/static/images/layout/icon-up.png");
+    },
+  },
+  methods: {
+    onMenuClick() {},
+  },
+};
+</script>
+<style lang="scss">
+.dropdown-menu-self {
+  width: 200px;
+  margin-top: 0 !important;
+  padding-bottom: 0;
+  .popper__arrow {
+    display: none;
+  }
+  .el-dropdown-menu__item:hover {
+    background: #f8f9fb;
+    color: #666666;
+  }
+  .el-dropdown-menu__item {
+    height: 42px;
+    font-size: 14px;
+    img {
+      width: 8px;
+      height: 14px;
+    }
+  }
+  .menu-item__wrap {
+    padding: 16px 24px;
+    font-size: 14px;
+    .menu-item-wrap__avatar {
+      width: 50px;
+      height: 50px;
+      margin-right: 13px;
+      border-radius: 50%;
+    }
+  }
+  .menu-item__line {
+    width: 100%;
+    height: 1px;
+    background: #eeeeee;
+    border-radius: 0px 0px 0px 0px;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.info-bar-header {
+  height: 30px;
+  color: #999999;
+  background: #f1f1f1;
+  border-radius: 0px 0px 0px 0px;
+  .info-bar-header-wrap {
+    height: 100%;
+    width: 1200px;
+    margin: 0 auto;
+    .header-wrap__content {
+      .header-wrap-content__login {
+        .wrap-content-login__text {
+          .content-login-text--light {
+            margin-left: 6px;
+            color: #ff875b;
+            cursor: pointer;
+          }
+        }
+        .wrap-content-login__info:hover {
+          background: #ffffff !important;
+          color: #ff875b;
+        }
+        .wrap-content-login__info {
+          position: relative;
+          padding: 0 18px;
+          height: 30px;
+          cursor: pointer;
+          .content-login-info__logo {
+            width: 8px;
+            height: 4px;
+            margin-left: 4px;
+          }
+        }
+      }
+      .wrap-content-message__tip {
+        min-width: 14px;
+        height: 14px;
+        padding: 0 3px;
+        line-height: 14px;
+        font-size: 10px;
+        color: #ffffff;
+        text-align: center;
+        background: #ff512b;
+        border-radius: 50%;
+        margin-left: 4px;
+      }
+      .header-wrap-content--line {
+        width: 1px;
+        height: 10px;
+        background: #d8d8d8;
+      }
+      .header-wrap-content__common {
+        cursor: pointer;
+        padding: 0 18px;
+        img {
+          width: 14px;
+          height: 14px;
+          margin-right: 4px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/layouts/module/DefaultHeader.vue b/layouts/module/header/index.vue
similarity index 67%
rename from layouts/module/DefaultHeader.vue
rename to layouts/module/header/index.vue
index bb7d119..aa85ad5 100644
--- a/layouts/module/DefaultHeader.vue
+++ b/layouts/module/header/index.vue
@@ -1,81 +1,85 @@
 <template>
-  <div class="default-header">
-    <div class="default-header-box">
-      <div class="default-header-box__wrap flex flex-between flex-middle">
-        <img
-          class="header-box-wrap__logo"
-          src="@/static/images/layout/logo.png"
-        />
-        <div class="header-box-wrap__right flex flex-middle">
-          <div class="box-wrap-right__search flex">
-            <div class="search-input">
-              <el-input
-                v-model="searchContent"
-                placeholder="请输入商品名称"
-              ></el-input>
+  <div>
+    <HeaderInfoBar />
+    <div class="default-header">
+      <div class="default-header-box">
+        <div class="default-header-box__wrap flex flex-between flex-middle">
+          <img
+            class="header-box-wrap__logo"
+            src="@/static/images/layout/logo.png"
+          />
+          <div class="header-box-wrap__right flex flex-middle">
+            <div class="box-wrap-right__search flex">
+              <div class="search-input">
+                <el-input
+                  v-model="searchContent"
+                  placeholder="请输入商品名称"
+                ></el-input>
+              </div>
+              <div class="search-icon flex flex-center flex-middle">
+                <img src="@/static/images/layout/icon-search.png" />
+              </div>
             </div>
-            <div class="search-icon flex flex-center flex-middle">
-              <img src="@/static/images/layout/icon-search.png" />
+            <div class="box-wrap-right__cart flex flex-middle">
+              <img src="@/static/images/layout/icon-shop.png" />
+              <span>购物车</span>
+              <div class="wrap-right-cart__tip">3</div>
             </div>
           </div>
-          <div class="box-wrap-right__cart flex flex-middle">
-            <img src="@/static/images/layout/icon-shop.png" />
-            <span>购物车</span>
-            <div class="wrap-right-cart__tip">3</div>
-          </div>
         </div>
-      </div>
-      <div class="default-header-box__tab flex flex-middle">
-        <div class="header-box-tab__category">
-          <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 class="tab-category-menu__left">
-              <div
-                v-for="item in categrayData"
-                :key="item.id"
-                @mouseenter="handleMouEnter(item.id)"
-                @mouseleave="categrayHoverVisible = false"
-                class="menu-left__item flex felx-middle"
-              >
-                <img />
-                <span>{{ item.name }}</span>
-              </div>
+        <div class="default-header-box__tab flex flex-middle">
+          <div class="header-box-tab__category">
+            <div class="tab-category__label flex flex-center flex-middle">
+              <img src="@/static/images/layout/icon-category.png" />
+              <span>热门分类</span>
             </div>
-            <div v-show="categrayHoverVisible">
-              <div
-                class="tab-category-menu__right flex flex-wrap"
-                @mouseenter="categrayHoverVisible = true"
-              >
+            <div class="tab-category__menu flex flex-left">
+              <div class="tab-category-menu__left">
                 <div
-                  v-for="item in currentCategrayList"
+                  v-for="item in categrayData"
                   :key="item.id"
-                  class="menu-right__item"
+                  @mouseenter="handleMouEnter(item.id)"
+                  @mouseleave="categrayHoverVisible = false"
+                  class="menu-left__item flex felx-middle"
+                >
+                  <img />
+                  <span>{{ item.name }}</span>
+                </div>
+              </div>
+              <div v-show="categrayHoverVisible">
+                <div
+                  class="tab-category-menu__right flex flex-wrap"
+                  @mouseenter="categrayHoverVisible = true"
                 >
-                  {{ item.name }}
+                  <div
+                    v-for="item in currentCategrayList"
+                    :key="item.id"
+                    class="menu-right__item"
+                  >
+                    {{ item.name }}
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-        <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 === activityTab,
-          }"
-          @click="onTabClick(item)"
-        >
-          {{ item.label }}
+          <nuxt-link
+            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.path === $nuxt.$route.path,
+            }"
+            :to="item.path"
+          >
+            {{ item.label }}
+          </nuxt-link>
         </div>
       </div>
     </div>
   </div>
 </template>
 <script>
+import HeaderInfoBar from "./HeaderInfoBar.vue";
 import {
   ApiGetCategoryOneList,
   ApiGetCategoryTwoAndGoods,
@@ -89,14 +93,15 @@ const TAB_TYPE = {
 };
 export default {
   name: "DefaultHeader",
+  components: { HeaderInfoBar },
   data() {
     return {
       searchContent: "",
       activityTab: TAB_TYPE.HOME,
       tabList: [
         { label: "首页", value: TAB_TYPE.HOME, path: "/" },
-        { label: "爆款推荐", value: TAB_TYPE.RECOMMEND, path: "/" },
-        { label: "开发书籍", value: TAB_TYPE.BOOK, path: "/" },
+        { label: "爆款推荐", value: TAB_TYPE.RECOMMEND, path: "/hot" },
+        { label: "开发书籍", value: TAB_TYPE.BOOK, path: "/book" },
         { label: "限时秒杀", value: TAB_TYPE.TIME_LIMIT, path: "/skill" },
       ],
       categrayData: [],
@@ -139,15 +144,6 @@ export default {
         );
       }
     },
-    onTabClick(tab) {
-      if (this.activityTab === tab.value) {
-        return;
-      }
-      this.activityTab = tab.value;
-      this.$router.push({
-        path: tab.path,
-      });
-    },
   },
 };
 </script>
@@ -164,6 +160,7 @@ export default {
       height: 42px;
       font-size: 14px;
       margin-bottom: 38px;
+      padding-right: 50px;
       .header-box-wrap__logo {
         width: 244px;
         height: 100%;