feat: 添加首页固定按钮

layouts/default.vue

@@ -24,7 +24,6 @@ export default {
   data() {
     return {
       isSticky: false,
-      ticking: false,
     };
   },
   computed: {
@@ -45,16 +44,8 @@ export default {
     window.removeEventListener("scroll", this.scrollEventMethod);
   },
   methods: {
-    scrollEventMethod(e) {
+    scrollEventMethod() {
-      const that = this;
+      this.isSticky = window.scrollY > 300;
-      // 节流
-      if (!that.ticking) {
-        window.requestAnimationFrame(function () {
-          that.ticking = false;
-          that.isSticky = window.scrollY > 300;
-        });
-        that.ticking = true;
-      }
     },
   },
 };

pages/index/index.vue

@@ -43,6 +43,7 @@
         </div>
       </div>
     </div>
+    <TabbarFixed :scroll-top="scrollTop" />
   </div>
 </template>
 
@@ -61,11 +62,12 @@ import {
 import Banner from "./module/Banner.vue";
 import Seckil from "./module/Seckill.vue";
 import Pick from "./module/Pick.vue";
+import TabbarFixed from "./module/TabbarFixed.vue";
 const SECKILL_COUNT = 20; // 秒杀商品数
 const NEW_COUNT = 5; // 新品上架商品数
 
 export default {
-  components: { Banner, Seckil, Pick, UiGoodsItem, UiPagination },
+  components: { Banner, Seckil, Pick, UiGoodsItem, UiPagination, TabbarFixed },
   async asyncData({ store }) {
     // 获取秒杀数据
     let seckillData = { activityTimeVO: null };
@@ -122,12 +124,24 @@ export default {
       total: 0,
       loading: false,
       currentPage: 0,
+      scrollTop: 0,
     };
   },
   created() {
     this.getSelectProducts();
   },
+  mounted() {
+    // 监听滚动事件
+    window.addEventListener("scroll", this.scrollEventMethod);
+  },
+  destroyed() {
+    window.removeEventListener("scroll", this.scrollEventMethod);
+  },
   methods: {
+    scrollEventMethod() {
+      this.scrollTop = window.scrollY;
+    },
+
     // 刷新秒杀活动状态
     async handleSeckillRefresh() {
       const { result: seckillData } = await ApiGetHomeSeckill();

pages/index/module/Banner.vue

@@ -26,11 +26,11 @@ export default {
     return {
       bannerList: [
         {
-          url: "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/banner4.jpg",
+          url: "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/goods13.jpg",
           id: 13,
         },
         {
-          url: "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/1.png",
+          url: "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/goods30.jpg",
           id: 30,
         },
         {
@@ -38,7 +38,7 @@ export default {
           id: 15,
         },
         {
-          url: "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/3banner.png",
+          url: "https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/uc/account-avatar/goods40.jpg",
           id: 40,
         },
       ],

pages/index/module/TabbarFixed.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="home-tabbar-fixed flex">
+    <div v-show="appHover" class="home-tabbar-fixed__qrcode">
+      <img src="~/assets/img/common/app-qrcode.png" />
+      <p>扫一扫上方二维码 下载APP</p>
+    </div>
+    <div
+      class="home-tabbar-fixed__box flex flex-column flex-middle"
+      :class="{ 'home-tabbar-fixed__box--height-short': !showToTop }"
+    >
+      <div
+        @mouseenter="appHover = true"
+        @mouseleave="appHover = false"
+        class="tabbar-fixed-box__common flex flex-middle"
+      >
+        <span v-show="appHover">下载app</span>
+        <img v-show="!appHover" src="~/assets/img/home/icon-app.png" />
+      </div>
+      <div class="tabbar-fixed-box__line"></div>
+      <div
+        @mouseenter="customerHover = true"
+        @mouseleave="customerHover = false"
+        @click="onConcatCustomer"
+        class="tabbar-fixed-box__common flex flex-middle"
+      >
+        <span v-show="customerHover">联系客服</span>
+        <img
+          v-show="!customerHover"
+          src="~/assets/img/home/icon-customer.png"
+        />
+      </div>
+      <div v-show="showToTop">
+        <div class="tabbar-fixed-box__line"></div>
+        <div
+          @mouseenter="totopHover = true"
+          @mouseleave="totopHover = false"
+          @click="toPageTop"
+          class="tabbar-fixed-box__common flex flex-middle"
+        >
+          <img
+            v-show="totopHover"
+            src="~/assets/img/home/icon-totop-light.png"
+          />
+          <img v-show="!totopHover" src="~/assets/img/home/icon-totop.png" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "HomeTabbarFixed",
+  props: {
+    scrollTop: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      appHover: false,
+      customerHover: false,
+      totopHover: false,
+    };
+  },
+  computed: {
+    showToTop() {
+      return this.scrollTop > 400;
+    },
+  },
+  methods: {
+    onConcatCustomer() {
+      if (!this.$isLoginValidate()) {
+        return;
+      }
+    },
+    toPageTop() {
+      document.querySelector("body").scrollIntoView({ behavior: "smooth" });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.home-tabbar-fixed {
+  position: fixed;
+  right: 270px;
+  top: 568px;
+  z-index: 10;
+  .home-tabbar-fixed__qrcode {
+    width: 230px;
+    height: 260px;
+    background: #ffffff;
+    box-shadow: 0px 4px 30px 1px rgba(0, 0, 0, 0.1);
+    font-size: 14px;
+    color: #666666;
+    padding: 22px;
+    margin-right: 10px;
+    img {
+      width: 186px;
+      height: 186px;
+      margin-bottom: 14px;
+    }
+  }
+  .home-tabbar-fixed__box {
+    width: 60px;
+    height: 180px;
+    background: #ffffff;
+    border-radius: 2px;
+    &--height-short {
+      height: 120px;
+    }
+    .tabbar-fixed-box__common {
+      height: 60px;
+      padding: 0 15px;
+      cursor: pointer;
+      font-size: 14px;
+      color: #ff875b;
+      img {
+        width: 22px;
+        height: 22px;
+      }
+    }
+    .tabbar-fixed-box__line {
+      width: 30px;
+      height: 1px;
+      background: #eeeeee;
+      margin: 0 auto;
+    }
+  }
+}
+</style>

store/index.js

@@ -44,11 +44,11 @@ const mutations = {
   },
 };
 const actions = {
-  async nuxtServerInit({ state, commit, dispatch }) {
+  nuxtServerInit({ state, commit, dispatch }) {
     const token = this.$cookies.get(TOKEN_KEY);
     if (!state.token && token) {
       commit("setToken", token);
-      await dispatch("getUserInfo");
+      dispatch("getUserInfo");
     }
   },
   async getUserInfo({ commit }) {