feat: 首页秒杀tab显示根据是否有miao秒杀活动

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 {

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) {
+    onTabSelect(value) {
-      this.$router.push({ path: 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();

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%;
+          }
         }
       }
     }

pages/seckill/index.vue

@@ -239,6 +239,7 @@ export default {
             this.seckillStatus === SECKILL_STATUS.GOING
           ) {
             this.seckillEndVisible = true;
+            this.$store.commit("setSeckillTabVisible", false);
             return;
           }
 

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 }) {