feat: 首页秒杀模块添加倒计时

layouts/default.vue

@@ -10,7 +10,8 @@
     <BsLogin :visible.sync="loginVisible" />
     <Header
       :is-categroy-open="isHomePage"
-      :hide-bar-line="isHomePage"
+      :hide-bar-line="isHideBarLinePage"
+      :hide-sticky-shadow="isHideSeckillPage"
       :show-categroy-tab="showCategroyTab"
       :is-sticky="isSticky"
     />
@@ -45,6 +46,12 @@ export default {
     isHomePage() {
       return this.$route.path === "/";
     },
+    isHideBarLinePage() {
+      return ["/", "/seckill"].includes(this.$route.path);
+    },
+    isHideSeckillPage() {
+      return this.$route.path === "/seckill";
+    },
     showCategroyTab() {
       return !CATEGROY_HIDE_PAGES.some((reg) => {
         return reg.test(this.$route.path);

layouts/module/header/index.vue

@@ -2,7 +2,10 @@
   <div class="layout-header">
     <!-- 滚动吸顶头部 -->
     <div v-show="isSticky">
-      <div class="sticky-bar-header">
+      <div
+        class="sticky-bar-header"
+        :class="{ 'sticky-bar-header--hide-shadow': hideStickyShadow }"
+      >
         <div class="sticky-bar-header__wrap flex flex-middle flex-between">
           <div class="flex flex-middle">
             <img
@@ -198,6 +201,12 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    // 隐藏吸顶tab底部阴影
+    hideStickyShadow: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -312,6 +321,14 @@ export default {
   z-index: 10;
   background: #ffffff;
   box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
+  &--hide-shadow {
+    box-shadow: none;
+    /deep/.el-menu {
+      .is-active {
+        border-bottom: none !important;
+      }
+    }
+  }
   .sticky-bar-header__wrap {
     @include layout-box;
     height: 100%;
@@ -364,7 +381,7 @@ export default {
       color: #666666;
       .is-active {
         color: #ff7f39;
-        border-bottom: 2px solid #ff823c;
+        border-bottom: 3px solid #ff823c;
       }
       .el-menu-item:hover {
         color: #ff7f39;
@@ -373,7 +390,8 @@ export default {
         height: 100%;
         line-height: 50px;
         font-size: 16px;
-        margin: 0 20px;
+        margin: 0 30px;
+        padding: 0 5px;
       }
     }
   }

pages/index/module/Seckill.vue

@@ -12,8 +12,8 @@
       <strong class="home-sckill-title">限时秒杀</strong>
       <div class="home-sckill-wrap">
         <div class="home-sckill-wrap__tip">
-          <strong>10:00</strong>
+          <strong>{{ data.activityTimeVO.timeName }}</strong>
-          <span>点场 距结束</span>
+          <span>{{ seckillText }}</span>
         </div>
         <div class="home-sckill-wrap__countdown flex flex-middle flex-center">
           <div class="sckill-wrap-countdown__time">{{ countdown.hour }}</div>
@@ -66,6 +66,7 @@
 </template>
 <script>
 import _ from "lodash";
+import { FormatDate } from "@/plugins/utils";
 
 const CAROUSEL_COUNT = 5; // 走马灯每页展示商品数
 
@@ -81,6 +82,9 @@ export default {
     return {
       bkgUrl: require("~/assets/img/sckill/bkg-small.png"),
       goodsList: [],
+      seckillTime: 0, // 秒杀时间
+      seckillText: "", // 秒杀文案
+      timeInterval: null, // 倒计时定时器
     };
   },
   watch: {
@@ -88,26 +92,41 @@ export default {
       deep: true,
       immediate: true,
       handler(val) {
-        const { activityProductListVO: products } = val;
+        const {
+          currentTime,
+          activityProductListVO: products,
+          activityTimeVO: { activityEndTime, activityStartTime },
+        } = val;
         if (products && products.length > 0) {
           this.getFormatData(products);
         }
+        this.getSeckillData({
+          currentTime,
+          startTime: activityStartTime,
+          endTime: activityEndTime,
+        });
       },
     },
   },
   computed: {
+    // 秒杀活动倒计时
     countdown() {
+      const date = FormatDate(this.seckillTime, "hh:mm:ss");
+      const [hour, minute, second] = date.split(":");
       return {
-        hour: "01",
+        hour,
-        minute: "32",
+        minute,
-        second: "09",
+        second,
       };
     },
   },
+  destroyed() {
+    clearInterval(this.timeInterval);
+  },
   methods: {
     // 走马灯商品列表，五个商品为一组
     getFormatData(list) {
-      const listCopy = _.cloneDeep(list);
+      const listCopy = [...list, ...list] || _.cloneDeep(list);
       const part = Math.ceil(listCopy.length / CAROUSEL_COUNT);
       if (part === 1) {
         this.goodsList = [listCopy.splice(0, CAROUSEL_COUNT)];
@@ -118,6 +137,32 @@ export default {
         this.goodsList.push(goodsListItem);
       }
     },
+    // 获取秒杀时间数据
+    getSeckillData({ current, startTime, endTime }) {
+      current = new Date(current);
+      startTime = new Date(startTime);
+      endTime = new Date(endTime);
+      if (current > startTime && current < endTime) {
+        // 活动进行中
+        this.seckillText = "距结束";
+        this.seckillTime = endTime - current;
+      } else {
+        // 活动未开始
+        this.seckillText = "距开始";
+        this.seckillTime = startTime - current;
+      }
+      this.setCountDownInterval();
+    },
+
+    // 秒杀倒计时
+    setCountDownInterval() {
+      this.timeInterval = setInterval(() => {
+        if (this.seckillTime <= 0) {
+          clearInterval(this.timeInterval);
+        }
+        this.seckillTime -= 1000;
+      }, 1e3);
+    },
     onJumpSeckill() {
       this.$router.push("/seckill");
     },
@@ -149,6 +194,7 @@ export default {
         font-size: 0;
         strong {
           font-size: 18px;
+          margin-right: 4px;
         }
         span {
           font-size: 14px;

pages/seckill/index.vue

@@ -28,7 +28,7 @@
       </div>
     </div>
     <div class="seckill-bar flex flex-middle flex-center">
-      <p>本场秒杀即将开抢，距开始还剩</p>
+      <p>{{ seckillTip }}</p>
       <div class="seckill-bar-countdown flex flex-middle">
         <div class="seckill-bar-countdown__time">{{ countdown.hour }}</div>
         <span class="seckill-bar-countdown--mark">:</span>
@@ -85,6 +85,7 @@
 </template>
 <script>
 import { ApiGetSeckillTimes, ApiGetSeckillGoods } from "@/plugins/api/seckill";
+import { FormatDate } from "@/plugins/utils";
 import TabBar from "./module/TabBar.vue";
 
 export default {
@@ -115,7 +116,26 @@ export default {
         second: "09",
       };
     },
+
+    // 当前选中时间段
+    currentTabItem() {
+      const tabItem = this.tabList.find(
+        (item) => item.id === this.query.activityTimeId
+      );
+      return tabItem || null;
+    },
+
+    // 当前时间段秒杀文案
+    seckillTip() {
+      if (this.currentTabItem) {
+        return this.currentTabItem.isInProgress
+          ? "本场正在秒杀中，好物转瞬即逝，不要错过哦~距结束仅剩"
+          : "本场秒杀即将开抢，距开始还剩";
+      }
+      return "";
+    },
   },
+
   created() {
     this.getSeckillTimes();
   },
@@ -142,7 +162,9 @@ export default {
       const { result } = await ApiGetSeckillTimes();
       if (result && result.length > 0) {
         this.tabList = result;
-        this.query.activityTimeId = result[0].id;
+        const inProgressItem = result.find((item) => item.isInProgress);
+        this.query.activityTimeId =
+          (inProgressItem && inProgressItem.id) || result[0].id;
         this.getGoodsList();
       }
     },

pages/seckill/module/TabBar.vue

@@ -9,8 +9,10 @@
         'sckill-header-tabbar__item--active': item.id === value,
       }"
     >
-      <strong class="header-tabbar-item__time">18:00</strong>
+      <strong class="header-tabbar-item__time">{{ item.timeName }}</strong>
-      <div class="header-tabbar-item__tip">抢购中</div>
+      <div class="header-tabbar-item__tip">
+        {{ item.isInProgress ? "抢购中" : "即将开抢" }}
+      </div>
     </div>
   </div>
 </template>