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,31 +42,33 @@
       </div>
     </div>
     <!-- 秒杀商品列表 -->
-    <div v-loading="loading" class="seckill-products flex flex-wrap">
+    <div v-loading="loading">
-      <div
+      <div class="seckill-products flex flex-wrap">
-        v-for="item in goodsList"
+        <div
-        :key="item.productId"
+          v-for="item in goodsList"
-        @click="onJumpGoodsDetail(item.productId)"
+          :key="item.productId"
-        class="seckill-products-wrap"
+          @click="onJumpGoodsDetail(item.productId)"
-      >
+          class="seckill-products-wrap"
-        <img
+        >
-          :src="item.productMainPicture"
+          <img
-          class="seckill-products-wrap__cover"
+            :src="item.productMainPicture"
-        />
+            class="seckill-products-wrap__cover"
-        <div class="seckill-products-wrap__content">
+          />
-          <p class="products-wrap-content__title">{{ item.productName }}</p>
+          <div class="seckill-products-wrap__content">
-          <div class="products-wrap-content__price">
+            <p class="products-wrap-content__title">{{ item.productName }}</p>
-            <strong>￥{{ item.activityPrice }}</strong>
+            <div class="products-wrap-content__price">
-            <del>￥{{ item.originalPrice }}</del>
+              <strong>￥{{ item.activityPrice }}</strong>
-          </div>
+              <del>￥{{ item.originalPrice }}</del>
-          <div
+            </div>
-            class="products-wrap-content__footer flex flex-middle flex-between"
+            <div
-          >
+              class="products-wrap-content__footer flex flex-middle flex-between"
-            <div class="wrap-content-footer__stock">
+            >
-              <el-progress :percentage="40" :show-text="false"></el-progress>
+              <div class="wrap-content-footer__stock">
-              <p>仅剩{{ item.stock }}件</p>
+                <el-progress :percentage="40" :show-text="false"></el-progress>
+                <p>仅剩{{ item.stock }}件</p>
+              </div>
+              <div class="wrap-content-footer__btn">立即抢购</div>
             </div>
-            <div class="wrap-content-footer__btn">立即抢购</div>
           </div>
         </div>
       </div>