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

Feature/task1.0.0

See merge request yanxuan-frontend/shop-pc!28

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

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>

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);

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,13 +21,17 @@
     >
       <div class="seckill-header-tabbar">
         <TabBar
-          v-model="query.activityTimeId"
+          :tab-id="query.activityTimeId"
           :list="tabList"
-          @tab-click="getGoodsList"
+          @tab-change="handleTabChange"
         />
       </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>
@@ -81,16 +85,23 @@
       </el-pagination>
       <el-button class="btn-confirm">确定</el-button>
     </div>
+    <DialogEnd :visible="seckillEndVisible" @close="handleClose" />
   </div>
 </template>
 <script>
-import { ApiGetSeckillTimes, ApiGetSeckillGoods } from "@/plugins/api/seckill";
-import { FormatDate } from "@/plugins/utils";
+import {
+  ApiGetSeckillTimes,
+  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"),
@@ -101,38 +112,49 @@ export default {
       loading: false,
       query: {
         pageIndex: 1,
-        length: 16,
-        activityTimeId: 1,
+        length: PAGE_SIZE,
+        activityTimeId: 0,
       },
       ticking: false,
       isSticky: false,
+      timeInterval: null, // 倒计时定时器
+      seckillTip: "", // 秒杀提示文案
+      seckillTime: 0, // 秒杀时间
+      seckillEndVisible: false, //秒杀结束弹窗
+      seckillStatus: SECKILL_STATUS.NOT_START, // 当前秒杀时间段状态
     };
   },
   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) {
+          const { activityStartTime, activityEndTime } = tabItem;
+          this.setTimerInterval({
+            startTime: activityStartTime,
+            endTime: activityEndTime,
+          });
+        }
+      },
     },
   },
 
@@ -145,6 +167,7 @@ export default {
   },
   destroyed() {
     window.removeEventListener("scroll", this.scrollEventMethod);
+    clearInterval(this.timeInterval);
   },
   methods: {
     scrollEventMethod() {
@@ -177,6 +200,64 @@ export default {
         this.goodsList = result.records;
       }
     },
+
+    // 设置定时器
+    async setTimerInterval({ startTime, endTime }) {
+      clearInterval(this.timeInterval);
+
+      // 获取服务器当前时间
+      const { result } = await ApiGetCurrentTime();
+      const current = result || Date.now();
+
+      startTime = new Date(startTime).getTime();
+      endTime = new Date(endTime).getTime();
+      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}`);
     },
@@ -188,12 +269,15 @@ 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("/");
     },
   },
 };
@@ -256,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-click");
+      this.$emit("tab-change", id);
     },
   },
 };

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`));
+