From 69dc3a298477aac7710c1297ece324d8fb1398a5 Mon Sep 17 00:00:00 2001
From: xiaoguang <aadsdas1@dingtalk.com>
Date: Fri, 13 May 2022 14:17:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E7=A7=92=E6=9D=80tab?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=A0=B9=E6=8D=AE=E6=98=AF=E5=90=A6=E6=9C=89?=
 =?UTF-8?q?miao=E7=A7=92=E6=9D=80=E6=B4=BB=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/module/header/HeaderInfoBar.vue | 10 +++--
 layouts/module/header/index.vue         | 60 +++++++++++++++++--------
 pages/index/index.vue                   | 18 ++++++--
 pages/seckill/index.vue                 |  1 +
 store/index.js                          |  4 ++
 5 files changed, 68 insertions(+), 25 deletions(-)

diff --git a/layouts/module/header/HeaderInfoBar.vue b/layouts/module/header/HeaderInfoBar.vue
index cd18b8d..cca7d75 100644
--- a/layouts/module/header/HeaderInfoBar.vue
+++ b/layouts/module/header/HeaderInfoBar.vue
@@ -19,7 +19,7 @@
               <span>你好，{{ userInfo.nickname }}</span>
               <img class="content-login-info__logo" :src="menuIcon" />
             </div>
-            <el-dropdown-menu slot="dropdown" class="dropdown-menu-self">
+            <el-dropdown-menu slot="dropdown" class="header-info-bar__dropdown">
               <div class="menu-item__wrap flex flex-middle">
                 <img class="menu-item-wrap__avatar" :src="userInfo.avatar" />
                 <span>{{ userInfo.nickname }}</span>
@@ -52,7 +52,9 @@
           >
             <img src="~/assets/img/layout/icon-message.png" />
             <span>消息</span>
-            <div class="wrap-content-message__tip">33</div>
+            <div v-if="messageCount > 0" class="wrap-content-message__tip">
+              {{ messageCount }}
+            </div>
           </div>
         </template>
         <div class="header-wrap-content--line"></div>
@@ -99,6 +101,7 @@ export default {
           value: MENU_VALUE.LOGON_OUT,
         },
       ],
+      messageCount: 0, // 消息未读数
     };
   },
   computed: {
@@ -137,7 +140,7 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.dropdown-menu-self {
+.header-info-bar__dropdown {
   width: 200px;
   margin-top: 0 !important;
   padding-bottom: 0;
@@ -164,6 +167,7 @@ export default {
       height: 50px;
       margin-right: 13px;
       border-radius: 50%;
+      object-fit: cover;
     }
   }
   .menu-item__line {
diff --git a/layouts/module/header/index.vue b/layouts/module/header/index.vue
index c9c2662..ce1ad3a 100644
--- a/layouts/module/header/index.vue
+++ b/layouts/module/header/index.vue
@@ -15,7 +15,7 @@
             <el-menu
               :default-active="tabPath"
               mode="horizontal"
-              @select="handleTabSelect"
+              @select="onTabSelect"
             >
               <el-menu-item
                 v-for="item in tabList"
@@ -32,7 +32,7 @@
             />
             <div class="header-wrap-icons__shop" @click="$router.push('/cart')">
               <img src="~/assets/img/layout/icon-shop-sticky.png" />
-              <span class="">3</span>
+              <span v-if="cartCount > 0" class="">{{ cartCount }}</span>
             </div>
             <div
               v-if="token"
@@ -66,6 +66,7 @@
                 <div class="search-input">
                   <el-input
                     v-model="searchContent"
+                    clearable
                     placeholder="请输入商品名称"
                   ></el-input>
                 </div>
@@ -82,7 +83,9 @@
               >
                 <img src="~/assets/img/layout/icon-shop.png" />
                 <span>购物车</span>
-                <div class="wrap-right-cart__tip">3</div>
+                <div v-if="cartCount > 0" class="wrap-right-cart__tip">
+                  {{ cartCount }}
+                </div>
               </div>
             </div>
           </div>
@@ -154,7 +157,7 @@
                 'header-box-tab__common--light':
                   item.value === $nuxt.$route.fullPath,
               }"
-              @click="onTabSelect(item)"
+              @click="onTabSelect(item.value)"
             >
               {{ item.label }}
             </div>
@@ -171,6 +174,7 @@ import {
   ApiGetCategoryOneList,
   ApiGetCategoryTwoAndGoods,
 } from "@/plugins/api/goods";
+import { ApiGetCartList } from "@/plugins/api/cart";
 import { CATEGROY_LEVEL } from "@/constants";
 import HeaderInfoBar from "./HeaderInfoBar.vue";
 
@@ -213,25 +217,39 @@ export default {
       CATEGROY_LEVEL,
       searchContent: "",
       tabPath: "/",
-      tabList: [
-        { label: "首页", value: "/" },
-        {
-          label: "开发书籍",
-          value: `/goods/list?id=6&levelType=${CATEGROY_LEVEL.ONE}`,
-        },
-        { label: "限时秒杀", value: "/seckill" },
-      ],
       categroyTwoVisible: false, // 是否展示二级分类
       categroyVisible: false, // 是否展示一级分类
       currentCategroyId: 0, // 当前鼠标悬停的一级分类id
       categroyData: [],
+      cartCount: 0, // 购物车商品数
     };
   },
   computed: {
-    ...mapState(["userInfo", "token"]),
+    ...mapState(["userInfo", "token", "seckillTabVisible"]),
+    tabList() {
+      const defaultList = [
+        { label: "首页", value: "/" },
+        {
+          label: "开发书籍",
+          value: `/goods/list?id=6&levelType=${CATEGROY_LEVEL.ONE}`,
+        },
+      ];
+      if (this.seckillTabVisible) {
+        return [...defaultList, { label: "限时秒杀", value: "/seckill" }];
+      }
+      return defaultList;
+    },
+  },
+  watch: {
+    "$route.path"(val) {
+      if (val !== "/goods/list") {
+        this.searchContent = "";
+      }
+    },
   },
-  mounted() {
+  created() {
     this.getCategroyData();
+    this.getCartInfo();
   },
   methods: {
     onLoginClick() {
@@ -264,11 +282,9 @@ export default {
     handleCategoryTwoChange(val) {
       this.categroyTwoVisible = val;
     },
-    handleTabSelect(value) {
-      this.$router.push({ path: value });
-    },
-    onTabSelect({ value }) {
+    onTabSelect(value) {
       this.tabPath = value;
+      this.searchContent = "";
       this.$router.push({ path: value });
     },
     onJumpCart() {
@@ -277,6 +293,14 @@ export default {
       }
       this.$router.push("/cart");
     },
+
+    // 获取购物车信息
+    async getCartInfo() {
+      const { result } = await ApiGetCartList();
+      if (result) {
+        this.cartCount = result.number;
+      }
+    },
     // 获取热门分类信息
     async getCategroyData() {
       const { result } = await ApiGetCategoryOneList();
diff --git a/pages/index/index.vue b/pages/index/index.vue
index f3d9ae1..b01ae58 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -66,12 +66,18 @@ const NEW_COUNT = 5; // 新品上架商品数
 
 export default {
   components: { Banner, Seckil, Pick, UiGoodsItem, UiPagination },
-  async asyncData() {
+  async asyncData({ store }) {
     // 获取秒杀数据
-    const { result: seckillData } = await ApiGetHomeSeckill();
-    // 获取秒杀商品列表
+    let seckillData = { activityTimeVO: null };
     let sekillGoodsList = [];
+    const { result: seckillDataResult } = await ApiGetHomeSeckill();
+    if (seckillData) {
+      seckillData = seckillDataResult;
+    }
     if (seckillData.activityTimeVO) {
+      store.commit("setSeckillTabVisible", true);
+
+      // 获取秒杀商品列表
       const { result } = await ApiGetSeckillGoods({
         pageIndex: 1,
         length: SECKILL_COUNT,
@@ -81,6 +87,7 @@ export default {
         sekillGoodsList = result.records;
       }
     }
+
     // 获取服务器当前时间
     const { result: currentTime } = await ApiGetCurrentTime();
 
@@ -101,7 +108,7 @@ export default {
       currentTime,
       newData,
       sekillGoodsList,
-      seckillData: seckillData || { activityTimeVO: null },
+      seckillData,
       recommendData: recommendData || [],
     };
   },
@@ -177,6 +184,9 @@ export default {
           &:not(:nth-child(5n)) {
             margin-right: calc(5% / 4);
           }
+          img {
+            width: 100%;
+          }
         }
       }
     }
diff --git a/pages/seckill/index.vue b/pages/seckill/index.vue
index 99a45d6..ba3b782 100644
--- a/pages/seckill/index.vue
+++ b/pages/seckill/index.vue
@@ -239,6 +239,7 @@ export default {
             this.seckillStatus === SECKILL_STATUS.GOING
           ) {
             this.seckillEndVisible = true;
+            this.$store.commit("setSeckillTabVisible", false);
             return;
           }
 
diff --git a/store/index.js b/store/index.js
index a1b5578..9da275b 100644
--- a/store/index.js
+++ b/store/index.js
@@ -13,6 +13,7 @@ const state = () => ({
   token: "",
   userInfo: {},
   loginVisible: false, // 是否展示登录弹窗
+  seckillTabVisible: false, // 公共头是否展示秒杀tab
 });
 const mutations = {
   setUserInfo(state, info) {
@@ -33,6 +34,9 @@ const mutations = {
   setLoginVisible(state, visible) {
     state.loginVisible = visible;
   },
+  setSeckillTabVisible(state, visible) {
+    state.seckillTabVisible = visible;
+  },
 };
 const actions = {
   async nuxtServerInit({ state, commit, dispatch }) {