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

Feature/task1.0.0 xg See merge request yanxuan-frontend/shop-pc!21
3 years ago · a638c32ef7
parent 0dee3f4bf7 2eae09f08b
commit a638c32ef7
5 changed files with 109 additions and 14 deletions
--- a/layouts/default.vue
+++ b/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);
--- a/layouts/module/header/index.vue
+++ b/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;
      }
    }
  }
--- a/pages/index/module/Seckill.vue
+++ b/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>
-          <span>点场 距结束</span>
+          <strong>{{ data.activityTimeVO.timeName }}</strong>
+          <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,22 +92,37 @@ 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",
-        minute: "32",
-        second: "09",
+        hour,
+        minute,
+        second,
      };
    },
  },
+  destroyed() {
+    clearInterval(this.timeInterval);
+  },
  methods: {
    // 走马灯商品列表，五个商品为一组
    getFormatData(list) {
@ -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;
--- a/pages/seckill/index.vue
+++ b/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();
      }
    },
--- a/pages/seckill/module/TabBar.vue
+++ b/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>
-      <div class="header-tabbar-item__tip">抢购中</div>
+      <strong class="header-tabbar-item__time">{{ item.timeName }}</strong>
+      <div class="header-tabbar-item__tip">
+        {{ item.isInProgress ? "抢购中" : "即将开抢" }}
+      </div>
    </div>
  </div>
 </template>