feat: 补充秒杀页面活动已结束/已开始判断以及页面交互

pages/seckill/index.vue

@@ -9,9 +9,9 @@
   <div class="seckill">
     <div v-show="isSticky" class="seckill-header-sticky">
       <TabBar
-        v-model="query.activityTimeId"
+        :tab-id="query.activityTimeId"
         :list="tabList"
-        @tab-click="getGoodsList"
+        @tab-change="handleTabChange"
       />
     </div>
     <!-- 秒杀时间段 -->
@@ -21,9 +21,9 @@
     >
       <div class="seckill-header-tabbar">
         <TabBar
-          v-model="query.activityTimeId"
+          :tab-id="query.activityTimeId"
           :list="tabList"
-          @tab-click="getGoodsList"
+          @tab-change="handleTabChange"
         />
       </div>
     </div>
@@ -85,6 +85,7 @@
       </el-pagination>
       <el-button class="btn-confirm">确定</el-button>
     </div>
+    <DialogEnd :visible="seckillEndVisible" @close="handleClose" />
   </div>
 </template>
 <script>
@@ -93,11 +94,14 @@ import {
   ApiGetSeckillGoods,
   ApiGetCurrentTime,
 } from "@/plugins/api/seckill";
+import { SECKILL_STATUS } from "@/constants";
 import TabBar from "./module/TabBar.vue";
+import DialogEnd from "./module/DialogEnd.vue";
+const PAGE_SIZE = 16;
 
 export default {
   name: "Sckill",
-  components: { TabBar },
+  components: { TabBar, DialogEnd },
   data() {
     return {
       bkgSckill: require("~/assets/img/sckill/bkg-large.png"),
@@ -108,15 +112,16 @@ export default {
       loading: false,
       query: {
         pageIndex: 1,
-        length: 16,
+        length: PAGE_SIZE,
         activityTimeId: 0,
       },
       ticking: false,
       isSticky: false,
-      currentTabItem: null, // 当前选中时间段
       timeInterval: null, // 倒计时定时器
       seckillTip: "", // 秒杀提示文案
       seckillTime: 0, // 秒杀时间
+      seckillEndVisible: false, //秒杀结束弹窗
+      seckillStatus: SECKILL_STATUS.NOT_START, // 当前秒杀时间段状态
     };
   },
   computed: {
@@ -133,6 +138,7 @@ export default {
     },
   },
   watch: {
+    // 切换秒杀时间段
     "query.activityTimeId": {
       immediate: true,
       handler(val) {
@@ -142,7 +148,6 @@ export default {
         clearImmediate(this.timeInterval);
         const tabItem = this.tabList.find((item) => item.id === val);
         if (tabItem) {
-          this.currentTabItem = tabItem;
           const { activityStartTime, activityEndTime } = tabItem;
           this.setTimerInterval({
             startTime: activityStartTime,
@@ -198,6 +203,8 @@ export default {
 
     // 设置定时器
     async setTimerInterval({ startTime, endTime }) {
+      clearInterval(this.timeInterval);
+
       // 获取服务器当前时间
       const { result } = await ApiGetCurrentTime();
       const current = result || Date.now();
@@ -207,27 +214,50 @@ export default {
       if (current > endTime) {
         // 秒杀结束
         this.getSeckillTimes();
+        this.queryDataReset();
         return;
       }
       if (startTime < current && endTime > current) {
         // 秒杀进行中
         this.seckillTime = endTime - current;
         this.seckillTip = "本场正在秒杀中，好物转瞬即逝，不要错过哦~距结束仅剩";
+        this.seckillStatus = SECKILL_STATUS.GOING;
       } else {
         // 秒杀未开始
         this.seckillTime = startTime - current;
         this.seckillTip = "本场秒杀即将开抢，距开始还剩";
+        this.seckillStatus = SECKILL_STATUS.NOT_START;
       }
 
       this.timeInterval = setInterval(() => {
         if (this.seckillTime <= 0) {
           clearInterval(this.timeInterval);
+
+          // 仅有一个进行中的秒杀时间段，倒计时完成展示结束弹窗
+          if (
+            this.tabList.length === 1 &&
+            this.seckillStatus === SECKILL_STATUS.GOING
+          ) {
+            this.seckillEndVisible = true;
+            return;
+          }
+
+          // 秒杀开始，activityTimeId重置，触发watch
+          this.query.activityTimeId = 0;
           this.getSeckillTimes();
           return;
         }
         this.seckillTime -= 1e3;
       }, 1e3);
     },
+
+    // 重置分页等数据
+    queryDataReset() {
+      Object.assign(this.query, {
+        pageIndex: 1,
+        length: PAGE_SIZE,
+      });
+    },
     onJumpGoodsDetail(id) {
       this.$router.push(`/goods/detail/${id}`);
     },
@@ -239,14 +269,16 @@ export default {
       this.query.pageIndex = page;
       this.getGoodsList();
     },
-    handleTabSelect(id) {
+    handleTabChange(id) {
       this.query.activityTimeId = id;
-      Object.assign(this.query, {
+      this.queryDataReset();
-        pageIndex: 1,
-        length: 16,
-      });
       this.getGoodsList();
     },
+
+    // 离开活动页面
+    handleClose() {
+      this.$router.push("/");
+    },
   },
 };
 </script>
@@ -308,7 +340,7 @@ export default {
     .seckill-products-wrap {
       width: 24%;
       background: #ffffff;
-      margin: 15px 0 60px 0;
+      margin-bottom: 16px;
       cursor: pointer;
       &:not(:nth-child(4n)) {
         margin-right: calc(4% / 3);

pages/seckill/module/DialogEnd.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-dialog
+    center
+    width="17%"
+    :visible.sync="dialogVisible"
+    :show-close="false"
+    :close-on-press-escape="false"
+    :close-on-click-modal="false"
+  >
+    <div class="flex flex-column flex-middle">
+      <div class="dialog-body-wrap">
+        <p>本期秒杀活动已结束</p>
+        <p>感谢你的参与</p>
+      </div>
+      <UiButton type="yellow_gradual" :radius="true" @click="onClose"
+        >好的</UiButton
+      >
+    </div>
+  </el-dialog>
+</template>
+<script>
+import UiButton from "@/components/UiButton";
+export default {
+  name: "SeckillDialogEnd",
+  components: { UiButton },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit("update:visible", val);
+      },
+    },
+  },
+  methods: {
+    onClose() {
+      this.$emit("close");
+      this.dialogVisible = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/deep/.el-dialog {
+  .el-dialog__header {
+    display: none;
+  }
+  .el-dialog__body {
+    padding: 41px 0;
+    .dialog-body-wrap {
+      width: 145px;
+      font-size: 16px;
+      line-height: 20px;
+      text-align: center;
+      color: rgba(0, 0, 0, 0.9);
+      margin-bottom: 20px;
+    }
+    .ui-button {
+      width: 164px;
+      height: 30px;
+    }
+  }
+}
+</style>

pages/seckill/module/TabBar.vue

@@ -6,7 +6,7 @@
       @click="onTabClick(item.id)"
       class="sckill-header-tabbar__item flex flex-middle flex-center"
       :class="{
-        'sckill-header-tabbar__item--active': item.id === value,
+        'sckill-header-tabbar__item--active': item.id === tabId,
       }"
     >
       <strong class="header-tabbar-item__time">{{ item.timeName }}</strong>
@@ -24,7 +24,7 @@ export default {
       type: Array,
       default: () => [],
     },
-    value: {
+    tabId: {
       type: Number,
       default: 0,
     },
@@ -32,11 +32,10 @@ export default {
   methods: {
     onTabClick(id) {
       // 点击同一个tab
-      if (id === this.value) {
+      if (id === this.tabId) {
         return;
       }
-      this.$emit("input", id);
+      this.$emit("tab-change", id);
-      this.$emit("tab-click");
     },
   },
 };