feat: 添加首页新品上架模块

pages/index/index.vue

@@ -16,7 +16,7 @@
         :current="currentTime"
         @refresh="handleSeckillRefresh"
       />
-      <Pick v-if="pickData.length >= PICK_COUNT_MIN" :data="pickData" />
+      <Pick :recommend-data="recommendData" :new-data="newData" />
     </div>
   </div>
 </template>
@@ -27,11 +27,15 @@ import {
   ApiGetCurrentTime,
   ApiGetSeckillGoods,
 } from "@/plugins/api/seckill";
-import { ApiGetRecommendedGoodsList } from "@/plugins/api/goods";
+import {
+  ApiGetRecommendedGoodsList,
+  ApiGetGoodsList,
+} 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; // 甄选推荐最小商品数
+const SECKILL_COUNT = 20; // 秒杀商品数
+const NEW_COUNT = 5; // 新品上架商品数
 
 export default {
   components: { Banner, Seckil, Pick },
@@ -43,7 +47,7 @@ export default {
     if (seckillData.activityTimeVO) {
       const { result } = await ApiGetSeckillGoods({
         pageIndex: 1,
-        length: 20,
+        length: SECKILL_COUNT,
         activityTimeId: seckillData.activityTimeVO.id,
       });
       if (result) {
@@ -53,17 +57,25 @@ export default {
     // 获取服务器当前时间
     const { result: currentTime } = await ApiGetCurrentTime();
 
-    const { result: pickData } = await ApiGetRecommendedGoodsList();
+    // 获取甄选商品
+    const { result: recommendData } = await ApiGetRecommendedGoodsList();
+
+    // 获取新品上架商品
+    let newData = [];
+    const { result: newDataResult } = await ApiGetGoodsList({
+      pageIndex: 1,
+      length: NEW_COUNT,
+    });
+    if (newDataResult) {
+      newData = newDataResult.records || [];
+    }
+
     return {
       currentTime,
-      seckillData: seckillData || { activityTimeVO: null },
+      newData,
       sekillGoodsList,
-      pickData: pickData || [],
+      seckillData: seckillData || { activityTimeVO: null },
-    };
+      recommendData: recommendData || [],
-  },
-  data() {
-    return {
-      PICK_COUNT_MIN,
     };
   },
   methods: {

pages/index/module/Pick.vue

@@ -1,52 +1,71 @@
 <template>
   <div class="home-pick flex flex-between">
     <!-- 甄选推荐 -->
-    <div class="home-pick-wrap">
+    <div v-if="showRecommend" class="home-pick-recommend">
-      <div class="home-pick--label flex flex-middle">
+      <div
+        @click="onJumpGoodsList('recommend')"
+        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="home-pick-recommend__products flex flex-middle flex-between">
         <!-- 左侧商品一 -->
-        <div class="pick-wrap-products__left">
+        <div
-          <strong class="home-pick-wrap--title">{{ goodsOne.title }}</strong>
+          @click="onJumpGoodsDetal(recommendGoodsOne.id)"
+          class="pick-recommend-products__left"
+        >
+          <strong class="home-pick-recommend--title">{{
+            recommendGoodsOne.title
+          }}</strong>
+          <p class="home-pick-recommend--subtitle">
+            {{ recommendGoodsOne.subtitle }}
+          </p>
           <!-- 商品标签 -->
           <div
-            v-for="item in goodsOne.labelList"
+            v-for="item in recommendGoodsOne.labelList"
             :key="item.code"
-            class="home-pick-wrap--tag-wrap flex"
+            class="home-pick-recommend--tag-wrap flex"
           >
             <div :class="`tag-wrap__item tag-wrap__item--${item.code}`">
               {{ item.text }}
             </div>
           </div>
-          <strong class="home-pick--price"
+          <strong class="home-pick--price__18">{{
-            >￥{{ goodsOne.startingPrice }}</strong
+            recommendGoodsOne.startingPrice
-          >
+          }}</strong>
-          <div class="wrap-products-left__cover">
+          <div class="recommend-products-left__cover">
-            <img :src="goodsOne.recommendPicture" />
+            <img :src="recommendGoodsOne.recommendPicture" />
           </div>
         </div>
         <!-- 右侧商品 -->
-        <div class="pick-wrap-products__right flex flex-column flex-between">
         <div
-            v-for="(item, index) in goodsRight"
+          class="pick-recommend-products__right flex flex-column flex-between"
+        >
+          <div
+            v-for="(item, index) in recommendArray"
             :key="index"
-            class="wrap-products-right__item"
+            @click="onJumpGoodsDetal(item.id)"
+            class="recommend-products-right__item"
           >
-            <strong class="home-pick-wrap--title">{{ item.title }}</strong>
+            <strong class="home-pick-recommend--title">{{ item.title }}</strong>
+            <p class="home-pick-recommend--subtitle">
+              {{ recommendGoodsOne.subtitle }}
+            </p>
             <!-- 商品标签 -->
             <div
-              v-for="itemLabel in goodsOne.labelList"
+              v-for="itemLabel in recommendGoodsOne.labelList"
               :key="itemLabel.code"
-              class="home-pick-wrap--tag-wrap flex"
+              class="home-pick-recommend--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>
+            <strong class="home-pick--price__18">{{
-            <div class="wrap-products-right__cover flex-1">
+              item.startingPrice
+            }}</strong>
+            <div class="recommend-products-right__cover flex-1">
               <img :src="item.recommendPicture" />
             </div>
           </div>
@@ -54,29 +73,110 @@
       </div>
     </div>
     <!-- 新品上架 -->
-    <div class="home-pick-new">
+    <div v-if="showNew" class="home-pick-new">
-      <div class="home-pick--label flex flex-middle">
+      <div
+        @click="onJumpGoodsList('new')"
+        class="home-pick--label flex flex-middle"
+      >
         <strong>新品上架</strong>
         <img src="~/assets/img/common/icon-jump.png" />
       </div>
+      <div
+        @click="onJumpGoodsDetal(newGoodsOne.id)"
+        class="home-pick-new__products flex"
+      >
+        <!-- 左侧商品 -->
+        <div class="pick-new-products__left">
+          <img
+            :src="newGoodsOne.mainPicture"
+            class="new-products-left__cover"
+          />
+          <div class="new-products-left__wrap">
+            <p>{{ newGoodsOne.name }}</p>
+            <strong class="home-pick--price__16">{{
+              newGoodsOne.startingPrice
+            }}</strong>
+          </div>
+        </div>
+        <div class="pick-new-products__right flex flex-wrap flex-between">
+          <div
+            v-for="(item, index) in newArray"
+            :key="index"
+            @click="onJumpGoodsDetal(item.id)"
+            class="new-products-right__wrap flex flex-middle"
+          >
+            <div class="products-right-wrap__cover">
+              <img :src="item.mainPicture" />
+            </div>
+            <div class="products-right-wrap__info">
+              <p>{{ item.name }}</p>
+              <strong class="home-pick--price__14">{{
+                item.startingPrice
+              }}</strong>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
+const RECOMMEND_MIN_COUNT = 3; // 甄选推荐商品数
+const NEW_MIN_COUNT = 5; // 新品上架商品数
+
 export default {
   name: "HomePick",
   props: {
-    data: {
+    recommendData: {
+      type: Array,
+      default: () => [],
+    },
+    newData: {
       type: Array,
       default: () => [],
     },
   },
-  computed: {
+  data() {
-    goodsOne() {
+    return {
-      return this.data[0];
+      recommendGoodsOne: null,
+      recommendArray: [],
+      showRecommend: false,
+      newGoodsOne: null,
+      newArray: [],
+      showNew: false,
+    };
   },
-    goodsRight() {
+  watch: {
-      return [this.data[1], this.data[2]];
+    recommendData: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length >= RECOMMEND_MIN_COUNT) {
+          this.showRecommend = true;
+          const [one, two, three] = val;
+          this.recommendGoodsOne = one;
+          this.recommendArray = [two, three];
+        }
+      },
+    },
+    newData: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length >= NEW_MIN_COUNT) {
+          this.showNew = true;
+          this.newGoodsOne = val[0];
+          this.newArray = val.slice(1, NEW_MIN_COUNT);
+        }
+      },
+    },
+  },
+  methods: {
+    onJumpGoodsDetal(id) {
+      this.$router.push(`/goods/detail/${id}`);
+    },
+    onJumpGoodsList(type) {
+      this.$router.push(`/goods/list?id=${type}`);
     },
   },
 };
@@ -88,6 +188,8 @@ export default {
   &--label {
     font-size: 24px;
     margin-bottom: 16px;
+    width: 150px;
+    cursor: pointer;
     img {
       width: 16px;
       height: 16px;
@@ -95,17 +197,38 @@ export default {
     }
   }
   &--price {
+    &__18 {
+      font-size: 18px;
+      color: #ff512b;
+      &::before {
+        content: "￥";
+        font-size: 14px;
+      }
+    }
+    &__16 {
+      font-size: 16px;
+      color: #ff512b;
+      &::before {
+        content: "￥";
+        font-size: 14px;
+      }
+    }
+    &__14 {
       font-size: 14px;
       color: #ff512b;
+      &::before {
+        content: "￥";
+        font-size: 14px;
+      }
+    }
   }
 
-  .home-pick-wrap {
+  .home-pick-recommend {
     width: 590px;
     height: 340px;
     padding: 16px 20px;
     background: #ffffff;
     border-radius: 2px;
-    cursor: pointer;
     &--tag-wrap {
       margin-bottom: 16px;
       .tag-wrap__item {
@@ -131,18 +254,24 @@ export default {
     &--title {
       display: block;
       font-size: 18px;
-      margin-bottom: 10px;
+      margin-bottom: 8px;
       @include ellipsis;
     }
-    .home-pick-wrap__products {
+    &--subtitle {
+      font-size: 12px;
+      color: #999999;
+      margin-bottom: 8px;
+    }
+    &__products {
       height: 264px;
-      .pick-wrap-products__left {
+      cursor: pointer;
+      .pick-recommend-products__left {
         position: relative;
         width: 264px;
         height: 100%;
         background: #f8f8f9;
         padding: 12px 0 0 20px;
-        .wrap-products-left__cover {
+        .recommend-products-left__cover {
           position: absolute;
           right: 0;
           bottom: 0;
@@ -154,18 +283,17 @@ export default {
           }
         }
       }
-    }
+      .pick-recommend-products__right {
-    .pick-wrap-products__right {
         width: 266px;
         height: 100%;
-      .wrap-products-right__item {
+        .recommend-products-right__item {
           width: 100%;
           height: 122px;
           position: relative;
           background: #f8f7f8;
           padding: 14px 0 14px 20px;
         }
-      .wrap-products-right__cover {
+        .recommend-products-right__cover {
           position: absolute;
           right: 0;
           top: 50%;
@@ -179,12 +307,63 @@ export default {
         }
       }
     }
+  }
   .home-pick-new {
     width: 590px;
     height: 340px;
     padding: 14px 20px 16px 20px;
     background: #ffffff;
+    &__products {
       cursor: pointer;
+      .pick-new-products__left {
+        width: 170px;
+        height: 264px;
+        background: #f8f8f9;
+        margin-right: 20px;
+        .new-products-left__cover {
+          width: 170px;
+          height: 170px;
+        }
+        .new-products-left__wrap {
+          padding: 10px 0;
+          text-align: center;
+          font-size: 14px;
+          p {
+            width: 140px;
+            margin: 0 auto 12px auto;
+            @include ellipsis;
+          }
+        }
+      }
+      .pick-new-products__right {
+        .new-products-right__wrap {
+          width: 170px;
+          height: 100px;
+          background: #ffffff;
+          padding: 16px 8px 16px 0;
+          &:nth-child(-n + 2) {
+            margin-bottom: 40px;
+          }
+          .products-right-wrap__cover {
+            width: 68px;
+            height: 68px;
+            margin-right: 16px;
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+          .products-right-wrap__info {
+            font-size: 14px;
+            p {
+              width: 78px;
+              margin-bottom: 8px;
+              @include ellipses(2);
+            }
+          }
+        }
+      }
+    }
   }
 }
 </style>