From 1dadcc18e4c519eaef923fbf20fe8a5f003c56cd Mon Sep 17 00:00:00 2001
From: xiaoguang <aadsdas1@dingtalk.com>
Date: Thu, 12 May 2022 14:54:25 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E7=A7=92=E6=9D=80=E6=B4=BB?=
 =?UTF-8?q?=E5=8A=A8=E5=80=92=E8=AE=A1=E6=97=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 constants/index.js             |   8 ++-
 pages/index/index.vue          |  25 +++++++--
 pages/index/module/Seckill.vue |  49 ++++++++--------
 pages/seckill/index.vue        | 100 +++++++++++++++++++++++++--------
 plugins/api/seckill.js         |   6 ++
 5 files changed, 135 insertions(+), 53 deletions(-)

diff --git a/constants/index.js b/constants/index.js
index 074b3ab..1df4ae8 100644
--- a/constants/index.js
+++ b/constants/index.js
@@ -25,4 +25,10 @@ const CATEGROY_LEVEL = {
   TWO: 2,
 };
 
-export { TOKEN_KEY, ORDER_STATUS, SEX_TYPE, CATEGROY_LEVEL };
+// 秒杀活动状态
+const SECKILL_STATUS = {
+  NOT_START: 1, // 未开始
+  GOING: 2, // 进行中
+};
+
+export { TOKEN_KEY, ORDER_STATUS, SEX_TYPE, CATEGROY_LEVEL, SECKILL_STATUS };
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 4323a3d..53842f2 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -9,24 +9,41 @@
   <div class="home">
     <Banner />
     <div class="home-wrap">
-      <Seckil v-if="seckillData.activityTimeVO" :data="seckillData" />
+      <Seckil
+        v-if="seckillData.activityTimeVO"
+        :data="seckillData"
+        :current="currentTime"
+        @refresh="handleSeckillRefresh"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import { ApiGetHomeSeckill } from "@/plugins/api/seckill";
+import { ApiGetHomeSeckill, ApiGetCurrentTime } from "@/plugins/api/seckill";
 import Banner from "./module/Banner.vue";
 import Seckil from "./module/Seckill.vue";
 export default {
   components: { Banner, Seckil },
   async asyncData() {
     // 获取秒杀数据
-    const { result } = await ApiGetHomeSeckill();
+    const { result: seckillData } = await ApiGetHomeSeckill();
+    // 获取服务器当前时间
+    const { result: currentTime } = await ApiGetCurrentTime();
     return {
-      seckillData: result,
+      currentTime,
+      seckillData,
     };
   },
+  methods: {
+    // 刷新秒杀活动状态
+    async handleSeckillRefresh() {
+      const { result: seckillData } = await ApiGetHomeSeckill();
+      const { result: currentTime } = await ApiGetCurrentTime();
+      this.seckillData = seckillData;
+      this.currentTime = currentTime;
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>
diff --git a/pages/index/module/Seckill.vue b/pages/index/module/Seckill.vue
index d7a3ca1..945211a 100644
--- a/pages/index/module/Seckill.vue
+++ b/pages/index/module/Seckill.vue
@@ -66,7 +66,6 @@
 </template>
 <script>
 import _ from "lodash";
-import { FormatDate } from "@/plugins/utils";
 
 const CAROUSEL_COUNT = 5; // 走马灯每页展示商品数
 
@@ -77,6 +76,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    current: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
     return {
@@ -93,15 +96,13 @@ export default {
       immediate: true,
       handler(val) {
         const {
-          currentTime,
           activityProductListVO: products,
-          activityTimeVO: { activityEndTime, activityStartTime },
+          activityTimeVO: { activityStartTime, activityEndTime },
         } = val;
         if (products && products.length > 0) {
-          this.getFormatData(products);
+          this.setCarouselData(products);
         }
-        this.getSeckillData({
-          currentTime,
+        this.setTimerInterval({
           startTime: activityStartTime,
           endTime: activityEndTime,
         });
@@ -111,12 +112,14 @@ export default {
   computed: {
     // 秒杀活动倒计时
     countdown() {
-      const date = FormatDate(this.seckillTime, "hh:mm:ss");
-      const [hour, minute, second] = date.split(":");
+      const data = parseInt(this.seckillTime / 1e3);
+      const hour = Math.floor(data / 60 / 60);
+      const minute = Math.floor((data / 60) % 60);
+      const second = Math.floor(data % 60);
       return {
-        hour,
-        minute,
-        second,
+        hour: hour < 10 ? `0${hour}` : `${hour}`,
+        minute: minute < 10 ? `0${minute}` : `${minute}`,
+        second: second < 10 ? `0${second}` : `${second}`,
       };
     },
   },
@@ -125,7 +128,7 @@ export default {
   },
   methods: {
     // 走马灯商品列表，五个商品为一组
-    getFormatData(list) {
+    setCarouselData(list) {
       const listCopy = _.cloneDeep(list);
       const part = Math.ceil(listCopy.length / CAROUSEL_COUNT);
       if (part === 1) {
@@ -137,28 +140,26 @@ 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) {
+
+    // 获取秒杀倒计时时间
+    setTimerInterval({ startTime, endTime }) {
+      startTime = new Date(startTime).getTime();
+      endTime = new Date(endTime).getTime();
+      if (this.current > startTime && this.current < endTime) {
         // 活动进行中
         this.seckillText = "距结束";
-        this.seckillTime = endTime - current;
+        this.seckillTime = endTime - this.current;
       } else {
         // 活动未开始
         this.seckillText = "距开始";
-        this.seckillTime = startTime - current;
+        this.seckillTime = startTime - this.current;
       }
-      this.setCountDownInterval();
-    },
 
-    // 秒杀倒计时
-    setCountDownInterval() {
       this.timeInterval = setInterval(() => {
         if (this.seckillTime <= 0) {
           clearInterval(this.timeInterval);
+          this.$emit("refresh");
+          return;
         }
         this.seckillTime -= 1000;
       }, 1e3);
diff --git a/pages/seckill/index.vue b/pages/seckill/index.vue
index 7922615..f008ab7 100644
--- a/pages/seckill/index.vue
+++ b/pages/seckill/index.vue
@@ -27,7 +27,11 @@
         />
       </div>
     </div>
-    <div class="seckill-bar flex flex-middle flex-center">
+    <!-- 倒计时展示 -->
+    <div
+      v-if="tabList.length > 0"
+      class="seckill-bar flex flex-middle flex-center"
+    >
       <p>{{ seckillTip }}</p>
       <div class="seckill-bar-countdown flex flex-middle">
         <div class="seckill-bar-countdown__time">{{ countdown.hour }}</div>
@@ -84,8 +88,11 @@
   </div>
 </template>
 <script>
-import { ApiGetSeckillTimes, ApiGetSeckillGoods } from "@/plugins/api/seckill";
-import { FormatDate } from "@/plugins/utils";
+import {
+  ApiGetSeckillTimes,
+  ApiGetSeckillGoods,
+  ApiGetCurrentTime,
+} from "@/plugins/api/seckill";
 import TabBar from "./module/TabBar.vue";
 
 export default {
@@ -102,37 +109,47 @@ export default {
       query: {
         pageIndex: 1,
         length: 16,
-        activityTimeId: 1,
+        activityTimeId: 0,
       },
       ticking: false,
       isSticky: false,
+      currentTabItem: null, // 当前选中时间段
+      timeInterval: null, // 倒计时定时器
+      seckillTip: "", // 秒杀提示文案
+      seckillTime: 0, // 秒杀时间
     };
   },
   computed: {
     countdown() {
+      const data = parseInt(this.seckillTime / 1e3);
+      const hour = Math.floor(data / 60 / 60);
+      const minute = Math.floor((data / 60) % 60);
+      const second = Math.floor(data % 60);
       return {
-        hour: "01",
-        minute: "32",
-        second: "09",
+        hour: hour < 10 ? `0${hour}` : `${hour}`,
+        minute: minute < 10 ? `0${minute}` : `${minute}`,
+        second: second < 10 ? `0${second}` : `${second}`,
       };
     },
-
-    // 当前选中时间段
-    currentTabItem() {
-      const tabItem = this.tabList.find(
-        (item) => item.id === this.query.activityTimeId
-      );
-      return tabItem || null;
-    },
-
-    // 当前时间段秒杀文案
-    seckillTip() {
-      if (this.currentTabItem) {
-        return this.currentTabItem.isInProgress
-          ? "本场正在秒杀中，好物转瞬即逝，不要错过哦~距结束仅剩"
-          : "本场秒杀即将开抢，距开始还剩";
-      }
-      return "";
+  },
+  watch: {
+    "query.activityTimeId": {
+      immediate: true,
+      handler(val) {
+        if (val === 0) {
+          return;
+        }
+        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,
+            endTime: activityEndTime,
+          });
+        }
+      },
     },
   },
 
@@ -145,6 +162,7 @@ export default {
   },
   destroyed() {
     window.removeEventListener("scroll", this.scrollEventMethod);
+    clearInterval(this.timeInterval);
   },
   methods: {
     scrollEventMethod() {
@@ -177,6 +195,39 @@ export default {
         this.goodsList = result.records;
       }
     },
+
+    // 设置定时器
+    async setTimerInterval({ startTime, endTime }) {
+      // 获取服务器当前时间
+      const { result } = await ApiGetCurrentTime();
+      const current = result || Date.now();
+
+      startTime = new Date(startTime).getTime();
+      endTime = new Date(endTime).getTime();
+      if (current > endTime) {
+        // 秒杀结束
+        this.getSeckillTimes();
+        return;
+      }
+      if (startTime < current && endTime > current) {
+        // 秒杀进行中
+        this.seckillTime = endTime - current;
+        this.seckillTip = "本场正在秒杀中，好物转瞬即逝，不要错过哦~距结束仅剩";
+      } else {
+        // 秒杀未开始
+        this.seckillTime = startTime - current;
+        this.seckillTip = "本场秒杀即将开抢，距开始还剩";
+      }
+
+      this.timeInterval = setInterval(() => {
+        if (this.seckillTime <= 0) {
+          clearInterval(this.timeInterval);
+          this.getSeckillTimes();
+          return;
+        }
+        this.seckillTime -= 1e3;
+      }, 1e3);
+    },
     onJumpGoodsDetail(id) {
       this.$router.push(`/goods/detail/${id}`);
     },
@@ -194,6 +245,7 @@ export default {
         pageIndex: 1,
         length: 16,
       });
+      this.getGoodsList();
     },
   },
 };
diff --git a/plugins/api/seckill.js b/plugins/api/seckill.js
index b81e283..7ae20e2 100644
--- a/plugins/api/seckill.js
+++ b/plugins/api/seckill.js
@@ -25,3 +25,9 @@ const BASE_URL = `${ENV.base_url}/mall/marketing`;
  export const ApiGetSeckillGoods = (params) => 
 	ToAsyncAwait(axios.get(`${BASE_URL}/app/activity/product`, { params }));
 
+/**
+ * 获取当前服务器时间
+ */
+ export const ApiGetCurrentTime = () => 
+	ToAsyncAwait(axios.get(`${BASE_URL}/app/activity/timestamp`));
+

From bb4cd7749f4a14a3ba11ddf79dcab247d79cac5c Mon Sep 17 00:00:00 2001
From: xiaoguang <aadsdas1@dingtalk.com>
Date: Thu, 12 May 2022 16:08:23 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=E7=A7=92?=
 =?UTF-8?q?=E6=9D=80=E9=A1=B5=E9=9D=A2=E6=B4=BB=E5=8A=A8=E5=B7=B2=E7=BB=93?=
 =?UTF-8?q?=E6=9D=9F/=E5=B7=B2=E5=BC=80=E5=A7=8B=E5=88=A4=E6=96=AD?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=8A=E9=A1=B5=E9=9D=A2=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/seckill/index.vue            | 60 +++++++++++++++++++------
 pages/seckill/module/DialogEnd.vue | 71 ++++++++++++++++++++++++++++++
 pages/seckill/module/TabBar.vue    |  9 ++--
 3 files changed, 121 insertions(+), 19 deletions(-)
 create mode 100644 pages/seckill/module/DialogEnd.vue

diff --git a/pages/seckill/index.vue b/pages/seckill/index.vue
index f008ab7..1190e06 100644
--- a/pages/seckill/index.vue
+++ b/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, {
-        pageIndex: 1,
-        length: 16,
-      });
+      this.queryDataReset();
       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);
diff --git a/pages/seckill/module/DialogEnd.vue b/pages/seckill/module/DialogEnd.vue
new file mode 100644
index 0000000..bfe5ab1
--- /dev/null
+++ b/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>
diff --git a/pages/seckill/module/TabBar.vue b/pages/seckill/module/TabBar.vue
index b7feb2f..4ede728 100644
--- a/pages/seckill/module/TabBar.vue
+++ b/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-click");
+      this.$emit("tab-change", id);
     },
   },
 };