feat: 首页支持上拉刷新，首页固定图标位置适配屏宽，UI调整

layouts/module/header/HeaderCart.vue

@@ -158,7 +158,7 @@ export default {
 </script>
 <style lang="scss">
 .header-cart-popover {
-  padding: 16px 20px !important;
+  padding: 16px 20px 50px 20px !important;
 }
 </style>
 <style lang="scss" scoped>
@@ -194,17 +194,19 @@ export default {
   }
 }
 .header-cart-popover {
-  padding: 20px 16px;
   .header-cart-products {
-    padding: 0 10px 20px 0;
     max-height: 360px;
     overflow: auto;
+    padding: 0 10px 16px 0;
     &--failure-color {
       color: #999999 !important;
     }
     .header-cart-products__wrap {
       margin-bottom: 20px;
       cursor: pointer;
+      &:last-child {
+        margin-bottom: 0;
+      }
       .cart_products-wrap_cover {
         width: 60px;
         height: 60px;

layouts/module/header/HeaderCategory.vue

@@ -195,14 +195,14 @@ export default {
         }
       }
       .tab-category-menu__right {
-        padding: 15px 26px;
+        padding: 30px 26px 35px 26px;
         box-shadow: 7px 0px 10px 1px rgba(0, 0, 0, 0.1);
         border: 1px solid #eeeeee;
         background: #ffffff;
         border-radius: 0 4px 4px 0;
         .category-menu-right__wrap {
           height: 36px;
-          margin-top: 23px;
+          margin-top: 15px;
           line-height: 36px;
           padding: 0 16px;
           font-size: 12px;

layouts/module/header/index.vue

@@ -228,6 +228,7 @@ export default {
   z-index: 10;
   background: #ffffff;
   box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
+  z-index: 9999;
   &--hide-shadow {
     box-shadow: none;
     /deep/.el-menu {

pages/account/index/home/index.vue

@@ -128,6 +128,9 @@ export default {
       background-size: 100% 100%;
       padding: 49px 26px;
       margin-right: 30px;
+      border: 1px solid #ffffff;
+      box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.06);
+      border-radius: 4px;
       .home-head-info__avatar {
         width: 65px;
         height: 65px;
@@ -154,13 +157,16 @@ export default {
       padding: 0 58px;
       background: #ffffff;
       border-radius: 4px;
-      box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
+      box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.06);
       cursor: pointer;
       .account-home-content__item {
         position: relative;
         font-size: 14px;
         color: #333333;
         text-align: center;
+        &:last-child {
+          padding-right: 0;
+        }
         .account-home-content__item--count {
           position: absolute;
           top: -3px;

pages/account/index/userInfo.vue

@@ -37,7 +37,7 @@
             </el-upload>
           </div>
         </el-form-item>
-        <el-form-item label="昵称" prop="nickname">
+        <el-form-item label="昵称" prop="nickname" class="form-item__nickname">
           <el-input
             class="user-info-content__nickname"
             placeholder="请输入昵称"
@@ -203,6 +203,9 @@ export default {
           border: 1px solid #eeeeee;
         }
       }
+      .form-item__nickname {
+        margin-left: -10px;
+      }
       .user-info-content__nickname {
         height: 35px;
         width: 210px;

pages/index/index.vue

@@ -31,12 +31,6 @@
               :key="item.id"
             ></UiGoodsItem>
           </div>
-          <UiPagination
-            :current-page="currentPage"
-            :page-size="query.length"
-            :total="total"
-            @current-change="handleCurrentChange"
-          />
         </div>
       </div>
     </div>
@@ -45,8 +39,8 @@
 </template>
 
 <script>
+import _ from "lodash";
 import UiGoodsItem from "@/components/UiGoodsItem.vue";
-import UiPagination from "@/components/UiPagination.vue";
 import {
   ApiGetHomeSeckill,
   ApiGetCurrentTime,
@@ -62,9 +56,10 @@ import Pick from "./module/Pick.vue";
 import TabbarFixed from "./module/TabbarFixed.vue";
 const SECKILL_COUNT = 20; // 秒杀商品数
 const NEW_COUNT = 5; // 新品上架商品数
+const FOOTER_BAR_HEIGHT = 200; // 公共底部高度
 
 export default {
-  components: { Banner, Seckil, Pick, UiGoodsItem, UiPagination, TabbarFixed },
+  components: { Banner, Seckil, Pick, UiGoodsItem, TabbarFixed },
   async asyncData({ store }) {
     // 获取秒杀数据
     let seckillData = { activityTimeVO: null };
@@ -120,6 +115,7 @@ export default {
       loading: false,
       currentPage: 0,
       scrollTop: 0,
+      ticking: false,
     };
   },
   created() {
@@ -133,9 +129,21 @@ export default {
     window.removeEventListener("scroll", this.scrollEventMethod);
   },
   methods: {
-    scrollEventMethod() {
+    scrollEventMethod: _.debounce(function () {
       this.scrollTop = window.scrollY;
-    },
+      const contentHeight = document.body.scrollHeight; // 内容高度
+      const clientHeight = document.body.clientHeight; // 屏幕高度
+      if (
+        window.scrollY + clientHeight >= contentHeight - FOOTER_BAR_HEIGHT &&
+        this.total &&
+        this.selectProducts.length < this.total
+      ) {
+        this.query.pageIndex += 1;
+
+        // “为你精选”上拉加载
+        this.getSelectProducts();
+      }
+    }, 200),
 
     // 刷新秒杀活动状态
     async handleSeckillRefresh() {
@@ -153,13 +161,9 @@ export default {
       if (result) {
         const { total, records } = result;
         this.total = total;
-        this.selectProducts = records;
+        this.selectProducts = this.selectProducts.concat(records);
       }
     },
-    handleCurrentChange(page) {
-      this.query.pageIndex = page;
-      this.getSelectProducts();
-    },
   },
 };
 </script>

pages/index/module/Pick.vue

@@ -212,8 +212,8 @@ export default {
 
   .home-pick-recommend {
     width: 590px;
-    height: 340px;
+    min-height: 340px;
-    padding: 16px 20px;
+    padding: 16px 20px 20px;
     background: #ffffff;
     border-radius: 4px;
     &--tag-wrap {
@@ -263,8 +263,8 @@ export default {
           position: absolute;
           right: 0;
           bottom: 0;
-          width: 158px;
+          width: 170px;
-          height: 158px;
+          height: 170px;
           img {
             width: 100%;
             height: 100%;
@@ -298,8 +298,8 @@ export default {
   }
   .home-pick-new {
     width: 590px;
-    height: 340px;
+    min-height: 340px;
-    padding: 14px 20px 16px 20px;
+    padding: 16px 20px 20px;
     background: #ffffff;
     border-radius: 4px;
     &__products {

pages/index/module/TabbarFixed.vue

@@ -3,6 +3,7 @@
     v-if="tabBarVisible"
     class="home-tabbar-fixed flex"
     :class="{ 'home-tabbar-fixed--change': appHover }"
+    :style="tabBarStyle"
   >
     <div v-show="appHover" class="home-tabbar-fixed__qrcode">
       <img src="~/assets/img/common/app-qrcode.png" />
@@ -63,6 +64,7 @@ export default {
       messageHover: false,
       totopHover: false,
       tabBarVisible: false,
+      tabBarStyle: null,
     };
   },
   computed: {
@@ -72,6 +74,7 @@ export default {
   },
   mounted() {
     this.getTabBarVisible();
+    this.getTabBarStyle();
   },
   methods: {
     getTabBarVisible() {
@@ -80,6 +83,16 @@ export default {
         this.tabBarVisible = true;
       }
     },
+
+    // 根据屏高计距离顶部高度
+    getTabBarStyle() {
+      const clientHeight = document.body.clientHeight;
+      const TOP = 630;
+      const NORMAL_HEIGHT = 1080;
+      this.tabBarStyle = {
+        top: `${(TOP / NORMAL_HEIGHT) * clientHeight}px`,
+      };
+    },
     onOpenMessagePage() {
       if (!this.$isLoginValidate()) {
         return;
@@ -97,7 +110,6 @@ export default {
   position: fixed;
   z-index: 99;
   left: 50%;
-  top: 568px;
   margin-left: 630px;
   border: 1px solid #f8f8f8;
   &--change {

pages/seckill/index.vue

@@ -131,7 +131,6 @@ export default {
         length: PAGE_SIZE,
         activityTimeId: 0,
       },
-      ticking: false,
       isSticky: false,
       timeInterval: null, // 倒计时定时器
       seckillTip: "", // 秒杀提示文案
@@ -193,15 +192,7 @@ export default {
   },
   methods: {
     scrollEventMethod() {
-      const that = this;
+      this.isSticky = window.scrollY > 400;
-      // 节流
-      if (!that.ticking) {
-        window.requestAnimationFrame(function () {
-          that.ticking = false;
-          that.isSticky = window.scrollY > 400;
-        });
-        that.ticking = true;
-      }
     },
     async getSeckillTimes() {
       const { result } = await ApiGetSeckillTimes();
@@ -233,7 +224,7 @@ export default {
             percentage:
               saleNumber === 0
                 ? 0
-                : (saleNumber / item.number).toFixed(2) * 100,
+                : (saleNumber / item.number).toFixed(3) * 100,
           };
         });
       }
@@ -387,6 +378,7 @@ export default {
         position: relative;
         width: 100%;
         height: 288px;
+        padding: 20px;
         img {
           width: 100%;
           height: 100%;