Merge branch 'feature/task1.0.0_xg' into 'feature/task1.0.0'

feat: 首页秒杀tab显示根据是否有miao秒杀活动 See merge request yanxuan-frontend/shop-pc!39
3 years ago · 9ac2719a63
parent 3a62ab6ec1 69dc3a2984
commit 9ac2719a63
5 changed files with 68 additions and 25 deletions
--- 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 {
--- 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();
--- 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%;
+          }
        }
      }
    }
--- 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;
          }

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