From a646a2bad4aeee6e65f96ba07e603d92f8677eba Mon Sep 17 00:00:00 2001
From: xiaoguang <aadsdas1@dingtalk.com>
Date: Thu, 12 May 2022 17:57:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E7=A7=92=E6=9D=80?=
 =?UTF-8?q?=E5=95=86=E5=93=81=E6=95=B0=E6=8D=AE=E5=8F=A6=E5=A4=96=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/img/common/icon-jump.png | Bin 0 -> 904 bytes
 pages/index/index.vue           |  37 ++++++-
 pages/index/module/Pick.vue     | 190 ++++++++++++++++++++++++++++++++
 pages/index/module/Seckill.vue  |  17 ++-
 4 files changed, 237 insertions(+), 7 deletions(-)
 create mode 100644 assets/img/common/icon-jump.png
 create mode 100644 pages/index/module/Pick.vue

diff --git a/assets/img/common/icon-jump.png b/assets/img/common/icon-jump.png
new file mode 100644
index 0000000000000000000000000000000000000000..ef54b8dd35e732f4e2410c4a2b45f65fbefb2576
GIT binary patch
literal 904
zcmV;319$w1P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px&LP<nHR9HvFS3OS@Q4~FQHVamQ{sADdFgqZ-(bB}Fw2>KWjbOAjm}o85n)uO5
zWC=Yp*jTcgSV|a#*;tss9}v+>K6b8o@6F84&MrG28{)L@y}9R|d+xdS5mJ79`^rTO
z58VOLEr2TkO#m46j~@cO2hbLn8#p@tM4x~BN%Lz;+QhR{Q_#F803HI+lJ@)S9)OSV
zwD+{Wv(xWPUjS@Qz5@7J`v=?rkqwU=;B=qt@B3nnjZzuVMxk*Tj5z?)?KAY6tlj5l
zf#?Z9-MY05&~^Xd3b?fx1WaOqjjQ9J!XkhNYA<iXE6n#|qYD6=rJDe)1Go%e8_aWL
zH=U%Qz1Af&f-ztWzyZLsWHrA;_jUmA^IccLxd9$B$aW6%1P{)zQ62>y+kg-+4&Z6k
zC=;Ck%+gmyJ2%K`RtE_jKg(vRu0Zf6S<M^4dI%sQxNUH;I_S;207xcIL@LLCwlF0C
zpZae~FI?%Db2fF6(^)VrkiGjZ3roHxw&WR4yCzbh0GRp*0FMBykmZUpI`d;w7o{ge
z1rTbq=FVpVVd^!%I+n<CACq*r3&X#p$#82TsnpahAo4kq2ZUdudx8V}J-S3}l<t9O
zHH+|+vQI>{D8tFf1e?0h!ZeugQ%FDIDXqD0)6&@m0&u{^nKa_%yZQncZvZS22c^d}
zL-ww?Rq8J<2sS3GAl{HA$)^5O8c&M+_jWs(4#AvnyU9#Ms^LHYXbAz5<tBE<gz5;?
zEw(vixs`<dEQEMo0Jh0;%V_}&o&xQ38O(+sFwse4De(P2zX&$~1h-8LE{!iHLgj+_
z$}n?q38144^BYk#c%p?z^}wbs`axM4Q7$Vc5j+@3vjtbvQrn6LYDOuVSG*E9-i#yw
zHTkA($Ew~lYDS4qj%eNOSg{aJ!2950C5@-2_G}qkI;IFd-ZhW}KMMN-P$$cs$r2!G
zZz#O8MzTmM{Gk+eaM2u;3IFC605N0sA4*j!I>vGb%<}_|<s$fas<AvwMf_nxsKIN!
zOq!O$^P<$W!VCYEl<i^CX&CXRnP|0C1Cax6{SKH>>Mo3cxeQ`4Q$`w5j;C1%i2wOG
e?ErF4&+~tA4gN-Mbo6fk0000<MNUMnLSTa5)0Ol9

literal 0
HcmV?d00001

diff --git a/pages/index/index.vue b/pages/index/index.vue
index 53842f2..4ce5936 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -12,27 +12,58 @@
       <Seckil
         v-if="seckillData.activityTimeVO"
         :data="seckillData"
+        :list="sekillGoodsList"
         :current="currentTime"
         @refresh="handleSeckillRefresh"
       />
+      <Pick v-if="pickData.length >= PICK_COUNT_MIN" :data="pickData" />
     </div>
   </div>
 </template>
 
 <script>
-import { ApiGetHomeSeckill, ApiGetCurrentTime } from "@/plugins/api/seckill";
+import {
+  ApiGetHomeSeckill,
+  ApiGetCurrentTime,
+  ApiGetSeckillGoods,
+} from "@/plugins/api/seckill";
+import { ApiGetRecommendedGoodsList } from "@/plugins/api/goods";
 import Banner from "./module/Banner.vue";
 import Seckil from "./module/Seckill.vue";
+import Pick from "./module/Pick.vue";
+const PICK_COUNT_MIN = 3; // 甄选推荐最小商品数
+
 export default {
-  components: { Banner, Seckil },
+  components: { Banner, Seckil, Pick },
   async asyncData() {
     // 获取秒杀数据
     const { result: seckillData } = await ApiGetHomeSeckill();
+    // 获取秒杀商品列表
+    let sekillGoodsList = [];
+    if (seckillData.activityTimeVO) {
+      const { result } = await ApiGetSeckillGoods({
+        pageIndex: 1,
+        length: 20,
+        activityTimeId: seckillData.activityTimeVO.id,
+      });
+      if (result) {
+        sekillGoodsList = result.records;
+      }
+    }
     // 获取服务器当前时间
     const { result: currentTime } = await ApiGetCurrentTime();
+
+    const { result: pickData } = await ApiGetRecommendedGoodsList();
     return {
       currentTime,
-      seckillData,
+      seckillData: seckillData || { activityTimeVO: null },
+      sekillGoodsList,
+      pickData: pickData || [],
+    };
+  },
+  data() {
+    return {
+      PICK_COUNT_MIN,
     };
   },
   methods: {
diff --git a/pages/index/module/Pick.vue b/pages/index/module/Pick.vue
new file mode 100644
index 0000000..d8a8454
--- /dev/null
+++ b/pages/index/module/Pick.vue
@@ -0,0 +1,190 @@
+<template>
+  <div class="home-pick flex flex-between">
+    <!-- 甄选推荐 -->
+    <div class="home-pick-wrap">
+      <div class="home-pick--label flex flex-middle">
+        <strong>甄选推荐</strong>
+        <img src="~/assets/img/common/icon-jump.png" />
+      </div>
+      <div class="home-pick-wrap__products flex flex-middle flex-between">
+        <!-- 左侧商品一 -->
+        <div class="pick-wrap-products__left">
+          <strong class="home-pick-wrap--title">{{ goodsOne.title }}</strong>
+          <!-- 商品标签 -->
+          <div
+            v-for="item in goodsOne.labelList"
+            :key="item.code"
+            class="home-pick-wrap--tag-wrap flex"
+          >
+            <div :class="`tag-wrap__item tag-wrap__item--${item.code}`">
+              {{ item.text }}
+            </div>
+          </div>
+          <strong class="home-pick--price"
+            >￥{{ goodsOne.startingPrice }}</strong
+          >
+          <div class="wrap-products-left__cover">
+            <img :src="goodsOne.recommendPicture" />
+          </div>
+        </div>
+        <!-- 右侧商品 -->
+        <div class="pick-wrap-products__right flex flex-column flex-between">
+          <div
+            v-for="(item, index) in goodsRight"
+            :key="index"
+            class="wrap-products-right__item"
+          >
+            <strong class="home-pick-wrap--title">{{ item.title }}</strong>
+            <!-- 商品标签 -->
+            <div
+              v-for="itemLabel in goodsOne.labelList"
+              :key="itemLabel.code"
+              class="home-pick-wrap--tag-wrap flex"
+            >
+              <div :class="`tag-wrap__item tag-wrap__item--${itemLabel.code}`">
+                {{ itemLabel.text }}
+              </div>
+            </div>
+            <strong class="home-pick--price">￥{{ item.startingPrice }}</strong>
+            <div class="wrap-products-right__cover flex-1">
+              <img :src="item.recommendPicture" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 新品上架 -->
+    <div class="home-pick-new">
+      <div class="home-pick--label flex flex-middle">
+        <strong>新品上架</strong>
+        <img src="~/assets/img/common/icon-jump.png" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "HomePick",
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    goodsOne() {
+      return this.data[0];
+    },
+    goodsRight() {
+      return [this.data[1], this.data[2]];
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.home-pick {
+  color: #333333;
+  margin-top: 30px;
+  &--label {
+    font-size: 24px;
+    margin-bottom: 16px;
+    img {
+      width: 16px;
+      height: 16px;
+      margin-left: 10px;
+    }
+  }
+  &--price {
+    font-size: 14px;
+    color: #ff512b;
+  }
+
+  .home-pick-wrap {
+    width: 590px;
+    height: 340px;
+    padding: 16px 20px;
+    background: #ffffff;
+    border-radius: 2px;
+    cursor: pointer;
+    &--tag-wrap {
+      margin-bottom: 16px;
+      .tag-wrap__item {
+        width: 40px;
+        height: 20px;
+        font-size: 12px;
+        line-height: 20px;
+        text-align: center;
+        margin-right: 4px;
+        &:last-child {
+          margin-right: 0;
+        }
+        &--second_kill {
+          color: #3083ff;
+          background: #3083ff;
+        }
+        &--recommended {
+          color: #ff875b;
+          background: #ff875b;
+        }
+      }
+    }
+    &--title {
+      display: block;
+      font-size: 18px;
+      margin-bottom: 10px;
+      @include ellipsis;
+    }
+    .home-pick-wrap__products {
+      height: 264px;
+      .pick-wrap-products__left {
+        position: relative;
+        width: 264px;
+        height: 100%;
+        background: #f8f8f9;
+        padding: 12px 0 0 20px;
+        .wrap-products-left__cover {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          width: 158px;
+          height: 158px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+    .pick-wrap-products__right {
+      width: 266px;
+      height: 100%;
+      .wrap-products-right__item {
+        width: 100%;
+        height: 122px;
+        position: relative;
+        background: #f8f7f8;
+        padding: 14px 0 14px 20px;
+      }
+      .wrap-products-right__cover {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translate(0, -50%);
+        width: 110px;
+        height: 110px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+  .home-pick-new {
+    width: 590px;
+    height: 340px;
+    padding: 14px 20px 16px 20px;
+    background: #ffffff;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/pages/index/module/Seckill.vue b/pages/index/module/Seckill.vue
index 945211a..ed3cd54 100644
--- a/pages/index/module/Seckill.vue
+++ b/pages/index/module/Seckill.vue
@@ -76,6 +76,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    list: {
+      Type: Object,
+      default: () => [],
+    },
     current: {
       type: Number,
       default: 0,
@@ -91,17 +95,22 @@ export default {
     };
   },
   watch: {
+    list: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        if (val.length > 0) {
+          this.setCarouselData(val);
+        }
+      },
+    },
     data: {
       deep: true,
       immediate: true,
       handler(val) {
         const {
-          activityProductListVO: products,
           activityTimeVO: { activityStartTime, activityEndTime },
         } = val;
-        if (products && products.length > 0) {
-          this.setCarouselData(products);
-        }
         this.setTimerInterval({
           startTime: activityStartTime,
           endTime: activityEndTime,