From 07b895568ebac7ab6feb0bb0e8785749bb1c5102 Mon Sep 17 00:00:00 2001
From: xiaoguang <aadsdas1@dingtalk.com>
Date: Thu, 12 May 2022 21:52:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E4=B8=BA=E4=BD=A0=E7=B2=BE=E9=80=89=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/img/common/icon-select.png | Bin 0 -> 689 bytes
 pages/index/index.vue             |  75 +++++++++++++++++++++++++++++-
 pages/seckill/index.vue           |  50 ++++++++++----------
 3 files changed, 100 insertions(+), 25 deletions(-)
 create mode 100644 assets/img/common/icon-select.png

diff --git a/assets/img/common/icon-select.png b/assets/img/common/icon-select.png
new file mode 100644
index 0000000000000000000000000000000000000000..2dd1305980047ff587a90405c516e85f83522ce0
GIT binary patch
literal 689
zcmV;i0#5yjP)<h;3K|Lk000e1NJLTq001xm001lq1^@s6BNjVn00001b5ch_0Itp)
z=>Px%Ye_^wRA@u(S3PXgKoox85y6~f$WRF+lCUw^iBv`w7}!ASR<#=pbb}SK!qyIS
zYsFRxHU?N2K}wv7sf}HUN(>p2%oKAEIf|<`ZOHlV>K}ne`~7_1d*8i#2F-bTz1|uT
zJz(Y*GcQGE0Db`I643|8adzkVruiPT$vU0Rnh@e85nW#Z<VZ^SqTOz1O5_Xy&+|5k
z=xM?VZn>_zk<iDQ`3V6{@G+3gNK6P!WwT>a7AfU=7IK;p@I3Fkg60?TJ91t3#v&uz
z-w{n4W;UvR3<|({+S4f_@Q#@u+NcbG_m1N{vJp!)1}w=Z&X>B3(Cv0Z09RBQ|ILn>
zf45q#l8soZF^W&1@Dj?~A@2A4%R-1%BD%}WH>W$;ArXC+Qoe0An_o}MD_3JQ2!c06
z^mu{(x9j!#latY%my68z{f_|dsT^Kr{?uqR?oYathgCwc^0V9~oydHdn`-`xO66y5
zq?C6uU#B&zA9LBx{D&q8f_);orPBc-Iygrl4wTj}rSJQ{0BGIb%pA@opjnZ`ZiOds
zX%b3YN=*mrhgcJbwwu*4s*S?XQL_tYFET?6#_mR|gmHFD0TerNewnkB-%6Oo>$H`u
z83xJxA~WUwpMYrvP5q5JFdB`XG4qNL;&uc?O8E`IUZqlbZ3;})UyHzCFsPSGr9A-7
zMTwZX7lz?VtyT+Ef#}+45f~1K-aPOzkcdRJT6J}Ssrn@*5Xpv!UMVJce%W$LOhBdj
zX?7tof$@0!lbNrobO69{xm>=cVykQO?-3}xgbII%Bdw}*A-7{RB2f5?ES?y7SS9`d
X_X}z&)|XRA00000NkvXXu0mjfp{_Y1

literal 0
HcmV?d00001

diff --git a/pages/index/index.vue b/pages/index/index.vue
index 9eec998..ac2c830 100644
--- a/pages/index/index.vue
+++ b/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>
diff --git a/pages/seckill/index.vue b/pages/seckill/index.vue
index 1190e06..e0965f0 100644
--- a/pages/seckill/index.vue
+++ b/pages/seckill/index.vue
@@ -42,31 +42,33 @@
       </div>
     </div>
     <!-- 秒杀商品列表 -->
-    <div v-loading="loading" class="seckill-products flex flex-wrap">
-      <div
-        v-for="item in goodsList"
-        :key="item.productId"
-        @click="onJumpGoodsDetail(item.productId)"
-        class="seckill-products-wrap"
-      >
-        <img
-          :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="products-wrap-content__price">
-            <strong>￥{{ item.activityPrice }}</strong>
-            <del>￥{{ item.originalPrice }}</del>
-          </div>
-          <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>
-              <p>仅剩{{ item.stock }}件</p>
+    <div v-loading="loading">
+      <div class="seckill-products flex flex-wrap">
+        <div
+          v-for="item in goodsList"
+          :key="item.productId"
+          @click="onJumpGoodsDetail(item.productId)"
+          class="seckill-products-wrap"
+        >
+          <img
+            :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="products-wrap-content__price">
+              <strong>￥{{ item.activityPrice }}</strong>
+              <del>￥{{ item.originalPrice }}</del>
+            </div>
+            <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>
+                <p>仅剩{{ item.stock }}件</p>
+              </div>
+              <div class="wrap-content-footer__btn">立即抢购</div>
             </div>
-            <div class="wrap-content-footer__btn">立即抢购</div>
           </div>
         </div>
       </div>