feat: 首页为你精选添加分页，分页组件封装

components/UiPagination.vue

@@ -0,0 +1,77 @@
+<!--
+* @Description：使用请参考https://element.eleme.cn/#/zh-CN/component/pagination
+-->
+<template>
+  <div class="bs-pagination flex flex-right">
+    <el-pagination
+      background
+      v-bind="$attrs"
+      :current-page="currentPage"
+      :page-size="pageSize"
+      :layout="layout"
+      :total="total"
+      @size-change="$emit('size-change', $event)"
+      @current-change="$emit('current-change', $event)"
+    >
+    </el-pagination>
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "BsPagination",
+  props: {
+    total: {
+      type: Number,
+      default: 0,
+    },
+    pageSize: {
+      type: Number,
+      default: 0,
+    },
+    layout: {
+      type: String,
+      default: "prev, pager, next, jumper",
+    },
+    currentPage: {
+      type: Number,
+      default: 0,
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.bs-pagination {
+  @include layout-box;
+  margin-top: 60px;
+  /deep/.el-pagination {
+    .btn-prev,
+    .btn-next {
+      width: 32px;
+      height: 32px;
+      background: #ffffff;
+      border-radius: 2px;
+      border: 1px solid rgba(0, 0, 0, 0.2);
+    }
+    .el-pagination__jump {
+      color: #333333;
+    }
+    .el-pager {
+      .number {
+        width: 32px;
+        height: 32px;
+        line-height: 32px;
+        font-size: 14px;
+        background: #ffffff;
+        border: 1px solid rgba(0, 0, 0, 0.2);
+        border-radius: 2px;
+      }
+      .active {
+        color: #ffffff;
+        background: #ff512b;
+        border: none;
+      }
+    }
+  }
+}
+</style>

pages/index/index.vue

@@ -34,6 +34,12 @@
               :key="item.id"
             ></UiGoodsItem>
           </div>
+          <UiPagination
+            :current-page="currentPage"
+            :page-size="query.length"
+            :total="total"
+            @current-change="handleCurrentChange"
+          />
         </div>
       </div>
     </div>
@@ -42,6 +48,7 @@
 
 <script>
 import UiGoodsItem from "@/components/UiGoodsItem.vue";
+import UiPagination from "@/components/UiPagination.vue";
 import {
   ApiGetHomeSeckill,
   ApiGetCurrentTime,
@@ -58,7 +65,7 @@ const SECKILL_COUNT = 20; // 秒杀商品数
 const NEW_COUNT = 5; // 新品上架商品数
 
 export default {
-  components: { Banner, Seckil, Pick, UiGoodsItem },
+  components: { Banner, Seckil, Pick, UiGoodsItem, UiPagination },
   async asyncData() {
     // 获取秒杀数据
     const { result: seckillData } = await ApiGetHomeSeckill();
@@ -102,11 +109,12 @@ export default {
     return {
       query: {
         pageIndex: 1,
-        length: 15,
+        length: 20,
       },
       selectProducts: [],
       total: 0,
       loading: false,
+      currentPage: 0,
     };
   },
   created() {
@@ -129,9 +137,13 @@ export default {
       if (result) {
         const { total, records } = result;
         this.total = total;
-        this.selectProducts = this.selectProducts.concat(records);
+        this.selectProducts = records;
       }
     },
+    handleCurrentChange(page) {
+      this.query.pageIndex = page;
+      this.getSelectProducts();
+    },
   },
 };
 </script>

pages/seckill/index.vue

@@ -75,22 +75,20 @@
     </div>
     <!-- 分页 -->
     <div class="seckill-pagination flex flex-right">
-      <el-pagination
+      <UiPagination
-        background
         :current-page="currentPage"
         :page-size="query.length"
-        layout="prev, pager, next, jumper"
         :total="total"
-        @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       >
-      </el-pagination>
+        <el-button class="btn-confirm">确定</el-button>
-      <el-button class="btn-confirm">确定</el-button>
+      </UiPagination>
     </div>
     <DialogEnd :visible="seckillEndVisible" @close="handleClose" />
   </div>
 </template>
 <script>
+import UiPagination from "@/components/UiPagination.vue";
 import {
   ApiGetSeckillTimes,
   ApiGetSeckillGoods,
@@ -103,7 +101,7 @@ const PAGE_SIZE = 16;
 
 export default {
   name: "Sckill",
-  components: { TabBar, DialogEnd },
+  components: { TabBar, DialogEnd, UiPagination },
   data() {
     return {
       bkgSckill: require("~/assets/img/sckill/bkg-large.png"),
@@ -263,10 +261,6 @@ export default {
     onJumpGoodsDetail(id) {
       this.$router.push(`/goods/detail/${id}`);
     },
-    handleSizeChange(size) {
-      this.query.length = size;
-      this.getGoodsList();
-    },
     handleCurrentChange(page) {
       this.query.pageIndex = page;
       this.getGoodsList();
@@ -396,35 +390,6 @@ export default {
   }
   .seckill-pagination {
     margin-top: 60px;
-    /deep/.el-pagination {
-      .btn-prev,
-      .btn-next {
-        width: 32px;
-        height: 32px;
-        background: #ffffff;
-        border-radius: 2px;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-      }
-      .el-pagination__jump {
-        color: #333333;
-      }
-      .el-pager {
-        .number {
-          width: 32px;
-          height: 32px;
-          line-height: 32px;
-          font-size: 14px;
-          background: #ffffff;
-          border: 1px solid rgba(0, 0, 0, 0.2);
-          border-radius: 2px;
-        }
-        .active {
-          color: #ffffff;
-          background: #ff512b;
-          border: none;
-        }
-      }
-    }
     .btn-confirm {
       width: 81px;
       height: 32px;