From 8c9866507ef0b125a1c97a6da863f48501426438 Mon Sep 17 00:00:00 2001
From: xiaoguang <aadsdas1@dingtalk.com>
Date: Wed, 11 May 2022 20:46:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A1=B5=E5=A4=B4=E5=90=B8=E9=A1=B6?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/img/layout/icon-shop-sticky.png | Bin 846 -> 815 bytes
 layouts/module/header/index.vue        |  20 +++-
 pages/account/index/home/index.vue     |   1 +
 pages/seckill/index.vue                | 153 ++++++++++++-------------
 pages/seckill/module/TabBar.vue        |  79 +++++++++++++
 5 files changed, 170 insertions(+), 83 deletions(-)
 create mode 100644 pages/seckill/module/TabBar.vue

diff --git a/assets/img/layout/icon-shop-sticky.png b/assets/img/layout/icon-shop-sticky.png
index c22a37ab7bb751d4f54f6bb1a9faf3f621600046..5f2c27fb17b314533d597aaf724cbce3e9dc6c0f 100644
GIT binary patch
literal 815
zcmV+~1JL}5P)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px%=}AOERA@u(nO$<zFc5%u?TKG$Pe3>U<phKiKu<vP;*FnZPC$AB!jmJt1WrIW
z0ptWUC!m~w^ffcFI-5~EsmF;V$CaG{J$htmKkaJ&gmB^mPh5ULDdmMyY6<`s2Vj-}
zFeaj#wgICM;+H}AT;?px-Xux#vrP~Tpd1AHN<>!<^PhYw1AGC1_m(>?iRj#Nu9s<>
zODu%AM#P>{>a4J97XY3YzFiX0%!_mun;i5)LWp+&@U5^;tIWvgMoaEUtIWs<Af=os
zrQTX-)Ay7+M7%Tt@cjUQPrjwI-0#*1kfv!j2!h|13wobs1khgU764v)m(IN5+zMba
znT!$fgLysgGlo_GX`1$eAo$^3Ji~^F_{s`En-M2;&sqfWhlsi^04^zq56(?MwFZz<
zUg@;khj2D~Y*HF)fa!F4wpy+J+N|tjP83Dw{eFLG4bU=ox*(!W0p<$OmZ*F~L?dSa
zU4C)}*XUsP8OJdPS2qo4GrB9O5qtvO6H#8bIGK<JXxg1Vsz<5-lodJNG=PZxIF9)c
zH^Uh~Yr&-vP%B)PWiOH>VKc4{&|s01yU$|*8i~qEsn3JKfL(b$Dw$AIMNU~`tr9>(
zQTdVkJj#UlXC2hI&FCe?-q+TwtO15#Qwqay{KQ?0d6s3PeLdNu0BZG*6&L#tQ1Reu
z`|aP>fRyqzA7vcJ^V*KIu+VmoPN%cr3aq$KB@GB6J^}zo#BEwz`xBI|!MUZm+w$jU
zuHjLU_)wFpEYw%gjG=)rBcjVnfy^d_C}xYU0J?d=z1ZSoOTN@@P;)XNAq3Z<Y(9rZ
zUaz_euTvD8dLu7t+6Z8CNOL0UF|aFuu`5xmm|V4B(}&%?Yfb>#KDip&m%!aeQPeGS
zcP=18h=YxT-FxN)ptI1u#mup%zlAhpx<euwSMoyJpIFUd7+!C)P(=K`Ua!Y>zT)p>
tx@_yL@dW^kich@G8gMZMA9GJ0-~sN!Pi7WfA5Q=P002ovPDHLkV1oN@ahw1E

literal 846
zcmV-U1F`&xP)<h;3K|Lk000e1NJLTq002Dz001xu1^@s6qWp3<00001b5ch_0Itp)
z=>Px&2uVaiRA@u(no)AvFc5}!&5U15PtfE9O;1pAf`$_mUcC6J%?a9^p!5mk7w8E>
zPf&7#HYX@KL7P{Yu{z5L#!v^#Mp}D@_%RXM{q##->6Z~s@WB&ghDy*$lJvCJ9{}Lu
zz@W_#@g|C*Urig>($J&P=qw0=-<BW?B09HhE7q(EbSDUcAGR4H;+v+aT^f2anY5S7
z<pKa+*nn%TzYYe2k2Y<k+LVUo#F8YrNYk{3h<R(8|CSw)#!c}`(1#RBl4Pc}ewS_2
zv?=Zbn&0e`EOgVRxO3=|Z+EF>%yIq#z?6utokMf)N-3_*uO*2}#OnHj{tN)0N+crL
z^u`M`zumRgKP5?QW2I?&=>^(Mab81KwcIvg2kjn-sO=Ma3IOjNB<idSMEo8_(Uni=
zD*(84ma&755V0Rc(bOBX*{=R^kgKyU(lkAf<9Oi>+N|q20K9dU^>H0N5YZWT;TxI{
z8efjf)y=Q7yF#zf4cnb{iD>3sX*0$782ZYMUe$XcqOHJQmF5)3<M9v?*;=aY*_5hH
z0^XsOQcWmb*F-cFgKom^Z2vs(U1^5SGZqBr`nFVwDs3#|9b-Wd`Wq4TvhhTeu6cL1
zEmfjQn{{1_u@Hvg%YMJlC%)|?qO^go!&tZ@qR#$O5`(VESlB65;?uhZweN{2_pVJ$
z>CGsc%?eL-U&i5saXmRk?jsH@SgM{3^$gtv6(n+aR@(O{v#HQ(wfJoP=<CkfCWeU8
zCXtEOI=fL=AY#`QJa2VZtJUp(3;^I-y>?8*>a^K+^XD4vyqV<U8rQ_&uOo8nGT&;%
zam*&=`th!`QtF`TkBIXqiY|{?T1u&+E$+^T0TR%x^4fZR>dE?7Rp6CUg;w*%^OjOt
z7l9l*#g$Tp=3{n>ODJ8W!unFJXkZTg-^Q8A9x=T`Tev3wIU8jMz`}goiQyfZ0S>&(
z?!z$b>>u*WLYIvp0?kPo#o4RkyRAC_n1^9FbOF2>q)ZGhUA)d`c`?MGtElJeHzx`G
Y52(UXt4Tg7FaQ7m07*qoM6N<$f@0d9lmGw#

diff --git a/layouts/module/header/index.vue b/layouts/module/header/index.vue
index 948e686..525cd51 100644
--- a/layouts/module/header/index.vue
+++ b/layouts/module/header/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="layout-header">
     <!-- 滚动吸顶头部 -->
-    <template v-if="isSticky">
+    <div v-show="isSticky">
       <div class="sticky-bar-header">
         <div class="sticky-bar-header__wrap flex flex-middle flex-between">
           <div class="flex flex-middle">
@@ -23,12 +23,19 @@
             </el-menu>
           </div>
           <div class="bar-header-wrap__icons flex flex-middle">
-            <img src="~/assets/img/layout/icon-search-sticky.png" />
-            <div class="header-wrap-icons__shop">
+            <img
+              src="~/assets/img/layout/icon-search-sticky.png"
+              @click="$router.push('/goods/list')"
+            />
+            <div class="header-wrap-icons__shop" @click="$router.push('/cart')">
               <img src="~/assets/img/layout/icon-shop-sticky.png" />
               <span class="">3</span>
             </div>
-            <div v-if="token" class="header-wrap-icons__login">
+            <div
+              v-if="token"
+              class="header-wrap-icons__login"
+              @click="$router.push('/account/home')"
+            >
               <img :src="userInfo.avatar" />
             </div>
             <div
@@ -41,7 +48,7 @@
           </div>
         </div>
       </div>
-    </template>
+    </div>
     <template>
       <HeaderInfoBar />
       <div class="default-bar-header">
@@ -207,7 +214,7 @@ export default {
           label: "开发书籍",
           value: `/goods/list?id=6&levelType=${CATEGROY_LEVEL.ONE}`,
         },
-        { label: "限时秒杀", value: "/sckill" },
+        { label: "限时秒杀", value: "/seckill" },
       ],
       categroyTwoVisible: false, // 是否展示二级分类
       categroyVisible: false, // 是否展示一级分类
@@ -343,6 +350,7 @@ export default {
           width: 34px;
           height: 34px;
           border-radius: 50%;
+          object-fit: cover;
         }
       }
       .header-wrap-icons__unlogin {
diff --git a/pages/account/index/home/index.vue b/pages/account/index/home/index.vue
index 4f938e0..819cbfe 100644
--- a/pages/account/index/home/index.vue
+++ b/pages/account/index/home/index.vue
@@ -135,6 +135,7 @@ export default {
         height: 65px;
         border-radius: 50%;
         margin-right: 16px;
+        object-fit: cover;
       }
       .home-head-info__wrap {
         color: #666666;
diff --git a/pages/seckill/index.vue b/pages/seckill/index.vue
index 3b82556..b7733a6 100644
--- a/pages/seckill/index.vue
+++ b/pages/seckill/index.vue
@@ -6,51 +6,50 @@
  * @Description: file content
 -->
 <template>
-  <div class="sckill">
+  <div class="seckill">
+    <div v-show="isSticky" class="seckill-header-sticky">
+      <TabBar
+        v-model="query.activityTimeId"
+        :list="tabList"
+        @tab-click="getGoodsList"
+      />
+    </div>
     <!-- 秒杀时间段 -->
     <div
-      class="sckill-header"
+      class="seckill-header"
       :style="{ backgroundImage: `url(${bkgSckill})` }"
     >
-      <div class="sckill-header-tabbar flex">
-        <div
-          v-for="item in tabList"
-          :key="item.id"
-          @click="onTabSelect(item.id)"
-          class="sckill-header-tabbar__item flex flex-middle flex-center"
-          :class="{
-            'sckill-header-tabbar__item--active':
-              item.id === query.activityTimeId,
-          }"
-        >
-          <strong class="header-tabbar-item__time">18:00</strong>
-          <div class="header-tabbar-item__tip">抢购中</div>
-        </div>
+      <div class="seckill-header-tabbar">
+        <TabBar
+          v-model="query.activityTimeId"
+          :list="tabList"
+          @tab-click="getGoodsList"
+        />
       </div>
     </div>
-    <div class="sckill-bar flex flex-middle flex-center">
+    <div class="seckill-bar flex flex-middle flex-center">
       <p>本场秒杀即将开抢，距开始还剩</p>
-      <div class="sckill-bar-countdown flex flex-middle">
-        <div class="sckill-bar-countdown__time">{{ countdown.hour }}</div>
-        <span class="sckill-bar-countdown--mark">:</span>
-        <div class="sckill-bar-countdown__time">{{ countdown.minute }}</div>
-        <span class="sckill-bar-countdown--mark">:</span>
-        <div class="sckill-bar-countdown__time">{{ countdown.second }}</div>
+      <div class="seckill-bar-countdown flex flex-middle">
+        <div class="seckill-bar-countdown__time">{{ countdown.hour }}</div>
+        <span class="seckill-bar-countdown--mark">:</span>
+        <div class="seckill-bar-countdown__time">{{ countdown.minute }}</div>
+        <span class="seckill-bar-countdown--mark">:</span>
+        <div class="seckill-bar-countdown__time">{{ countdown.second }}</div>
       </div>
     </div>
     <!-- 秒杀商品列表 -->
-    <div v-loading="loading" class="sckill-products flex flex-wrap">
+    <div v-loading="loading" class="seckill-products flex flex-wrap">
       <div
         v-for="item in goodsList"
         :key="item.productId"
         @click="onJumpGoodsDetail(item.productId)"
-        class="sckill-products-wrap"
+        class="seckill-products-wrap"
       >
         <img
           :src="item.productMainPicture"
-          class="sckill-products-wrap__cover"
+          class="seckill-products-wrap__cover"
         />
-        <div class="sckill-products-wrap__content">
+        <div class="seckill-products-wrap__content">
           <p class="products-wrap-content__title">{{ item.productName }}</p>
           <div class="products-wrap-content__price">
             <strong>￥{{ item.activityPrice }}</strong>
@@ -69,7 +68,7 @@
       </div>
     </div>
     <!-- 分页 -->
-    <div class="sckill-pagination flex flex-right">
+    <div class="seckill-pagination flex flex-right">
       <el-pagination
         background
         :current-page="currentPage"
@@ -86,21 +85,26 @@
 </template>
 <script>
 import { ApiGetSeckillTimes, ApiGetSeckillGoods } from "@/plugins/api/seckill";
+import TabBar from "./module/TabBar.vue";
+
 export default {
   name: "Sckill",
+  components: { TabBar },
   data() {
     return {
       bkgSckill: require("~/assets/img/sckill/bkg-large.png"),
-      tabList: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }], // 秒杀时间段
+      tabList: [], // 秒杀时间段
       goodsList: [], // 商品列表
       total: 0,
       currentPage: 0,
       loading: false,
       query: {
         pageIndex: 1,
-        length: 12,
+        length: 16,
         activityTimeId: 1,
       },
+      ticking: false,
+      isSticky: false,
     };
   },
   computed: {
@@ -115,7 +119,25 @@ export default {
   created() {
     this.getSeckillTimes();
   },
+  mounted() {
+    // 监听滚动事件
+    window.addEventListener("scroll", this.scrollEventMethod);
+  },
+  destroyed() {
+    window.removeEventListener("scroll", this.scrollEventMethod);
+  },
   methods: {
+    scrollEventMethod() {
+      const that = this;
+      // 节流
+      if (!that.ticking) {
+        window.requestAnimationFrame(function () {
+          that.ticking = false;
+          that.isSticky = window.scrollY > 400;
+        });
+        that.ticking = true;
+      }
+    },
     async getSeckillTimes() {
       const { result } = await ApiGetSeckillTimes();
       if (result && result.length > 0) {
@@ -144,72 +166,48 @@ export default {
       this.query.pageIndex = page;
       this.getGoodsList();
     },
-    onTabSelect(id) {
+    handleTabSelect(id) {
       this.query.activityTimeId = id;
       Object.assign(this.query, {
         pageIndex: 1,
-        length: 10,
+        length: 16,
       });
     },
   },
 };
 </script>
 <style lang="scss" scoped>
-.sckill {
+.seckill {
   background: #f8f8f8;
   padding-bottom: 42px;
-  .sckill-header {
+  .seckill-header-sticky {
+    position: fixed;
+    left: 50%;
+    transform: translate(-50%);
+    top: 50px;
+    z-index: 1;
+    @include layout-box;
+  }
+  .seckill-header {
     position: relative;
     width: 100%;
     height: 156px;
     background-size: 100% 100%;
-    .sckill-header-tabbar {
+    .seckill-header-tabbar {
+      @include layout-box;
       position: absolute;
       left: 50%;
       bottom: 0;
       transform: translate(-50%);
-      height: 60px;
-      border-radius: 4px 4px 0px 0px;
-      overflow: hidden;
-      cursor: pointer;
-      .sckill-header-tabbar__item {
-        width: 240px;
-        font-size: 12px;
-        background: #ffffff;
-        color: #666666;
-        .header-tabbar-item__time {
-          font-size: 18px;
-          color: #333333;
-          margin-right: 22px;
-        }
-        .header-tabbar-item__tip {
-          width: 69px;
-          height: 22px;
-          text-align: center;
-          border: 1px solid #999999;
-          border-radius: 2px;
-        }
-        &--active {
-          background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
-          color: #ffffff;
-          .header-tabbar-item__time {
-            font-size: 24px;
-            color: #ffffff;
-          }
-          .header-tabbar-item__tip {
-            border-color: #ffffff;
-          }
-        }
-      }
     }
   }
-  .sckill-bar {
+  .seckill-bar {
     height: 60px;
     line-height: 60px;
     text-align: center;
     font-size: 14px;
     color: #666666;
-    .sckill-bar-countdown {
+    .seckill-bar-countdown {
       margin-left: 25px;
       font-weight: bold;
       &__time {
@@ -228,23 +226,24 @@ export default {
       }
     }
   }
-  .sckill-products,
-  .sckill-pagination {
+  .seckill-products,
+  .seckill-pagination {
     @include layout-box;
   }
-  .sckill-products {
-    .sckill-products-wrap {
+  .seckill-products {
+    .seckill-products-wrap {
       width: 24%;
       background: #ffffff;
       margin: 15px 0 60px 0;
+      cursor: pointer;
       &:not(:nth-child(4n)) {
         margin-right: calc(4% / 3);
       }
-      .sckill-products-wrap__cover {
+      .seckill-products-wrap__cover {
         width: 100%;
         height: 288px;
       }
-      .sckill-products-wrap__content {
+      .seckill-products-wrap__content {
         padding: 20px 16px;
         .products-wrap-content__title {
           @include ellipsis;
@@ -287,7 +286,7 @@ export default {
       }
     }
   }
-  .sckill-pagination {
+  .seckill-pagination {
     margin-top: 60px;
     /deep/.el-pagination {
       .btn-prev,
diff --git a/pages/seckill/module/TabBar.vue b/pages/seckill/module/TabBar.vue
new file mode 100644
index 0000000..4b5c3b2
--- /dev/null
+++ b/pages/seckill/module/TabBar.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="seckill-tabbar flex flex-between">
+    <div
+      v-for="item in list"
+      :key="item.id"
+      @click="onTabClick(item.id)"
+      class="sckill-header-tabbar__item flex flex-middle flex-center"
+      :class="{
+        'sckill-header-tabbar__item--active': item.id === value,
+      }"
+    >
+      <strong class="header-tabbar-item__time">18:00</strong>
+      <div class="header-tabbar-item__tip">抢购中</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "SeckillTabBar",
+  props: {
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    value: {
+      type: Number,
+      default: 0,
+    },
+  },
+  methods: {
+    onTabClick(id) {
+      // 点击同一个tab
+      if (id === this.value) {
+        return;
+      }
+      this.$emit("input", id);
+      this.$emit("tab-click");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.seckill-tabbar {
+  width: 100%;
+  height: 60px;
+  cursor: pointer;
+  overflow: hidden;
+  .sckill-header-tabbar__item {
+    width: 100%;
+    font-size: 12px;
+    background: #ffffff;
+    color: #666666;
+    .header-tabbar-item__time {
+      font-size: 18px;
+      color: #333333;
+      margin-right: 22px;
+    }
+    .header-tabbar-item__tip {
+      width: 69px;
+      height: 22px;
+      line-height: 22px;
+      text-align: center;
+      border: 1px solid #999999;
+      border-radius: 2px;
+    }
+    &--active {
+      background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
+      color: #ffffff;
+      .header-tabbar-item__time {
+        font-size: 24px;
+        color: #ffffff;
+      }
+      .header-tabbar-item__tip {
+        border-color: #ffffff;
+      }
+    }
+  }
+}
+</style>