feat: 首页秒杀商品数据另外查询

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: {

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>

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,