feat: 添加首页为你精选模块

pages/index/index.vue

@@ -17,11 +17,31 @@
         @refresh="handleSeckillRefresh"
       />
       <Pick :recommend-data="recommendData" :new-data="newData" />
+      <div class="home-wrap-select">
+        <div class="home-wrap-select__header flex flex-center flex-middle">
+          <img src="~/assets/img/common/icon-select.png" />
+          <strong>为你精选</strong>
+          <img
+            class="wrap-select-header__img--rotate"
+            src="~/assets/img/common/icon-select.png"
+          />
+        </div>
+        <div v-loading="loading">
+          <div class="home-wrap-select__content flex flex-wrap">
+            <UiGoodsItem
+              :item="item"
+              v-for="item in selectProducts"
+              :key="item.id"
+            ></UiGoodsItem>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import UiGoodsItem from "@/components/UiGoodsItem.vue";
 import {
   ApiGetHomeSeckill,
   ApiGetCurrentTime,
@@ -38,7 +58,7 @@ const SECKILL_COUNT = 20; // 秒杀商品数
 const NEW_COUNT = 5; // 新品上架商品数
 
 export default {
-  components: { Banner, Seckil, Pick },
+  components: { Banner, Seckil, Pick, UiGoodsItem },
   async asyncData() {
     // 获取秒杀数据
     const { result: seckillData } = await ApiGetHomeSeckill();
@@ -78,6 +98,20 @@ export default {
       recommendData: recommendData || [],
     };
   },
+  data() {
+    return {
+      query: {
+        pageIndex: 1,
+        length: 15,
+      },
+      selectProducts: [],
+      total: 0,
+      loading: false,
+    };
+  },
+  created() {
+    this.getSelectProducts();
+  },
   methods: {
     // 刷新秒杀活动状态
     async handleSeckillRefresh() {
@@ -86,6 +120,18 @@ export default {
       this.seckillData = seckillData;
       this.currentTime = currentTime;
     },
+
+    // 获取“为你精选”数据
+    async getSelectProducts() {
+      this.loading = true;
+      const { result } = await ApiGetGoodsList({ ...this.query });
+      this.loading = false;
+      if (result) {
+        const { total, records } = result;
+        this.total = total;
+        this.selectProducts = this.selectProducts.concat(records);
+      }
+    },
   },
 };
 </script>
@@ -95,6 +141,33 @@ export default {
   .home-wrap {
     @include layout-box;
     padding: 30px 0 30px 0;
+    .home-wrap-select {
+      margin-top: 30px;
+      &__header {
+        font-size: 24px;
+        color: #333333;
+        margin-bottom: 30px;
+        .wrap-select-header__img--rotate {
+          transform: rotate(180deg);
+        }
+        img {
+          width: 24px;
+          height: 22px;
+        }
+        strong {
+          margin: 0 10px;
+        }
+      }
+      &__content {
+        /deep/.goods-item {
+          margin-bottom: 10px;
+          width: 19%;
+          &:not(:nth-child(5n)) {
+            margin-right: calc(5% / 4);
+          }
+        }
+      }
+    }
   }
 }
 </style>

pages/seckill/index.vue

@@ -42,7 +42,8 @@
       </div>
     </div>
     <!-- 秒杀商品列表 -->
-    <div v-loading="loading" class="seckill-products flex flex-wrap">
+    <div v-loading="loading">
+      <div class="seckill-products flex flex-wrap">
         <div
           v-for="item in goodsList"
           :key="item.productId"
@@ -71,6 +72,7 @@
           </div>
         </div>
       </div>
+    </div>
     <!-- 分页 -->
     <div class="seckill-pagination flex flex-right">
       <el-pagination