feat: 添加首页秒杀模块

assets/scss/util.scss

@@ -92,3 +92,19 @@ $baseFontSize: 100 !default;
   width: 1200px;
   margin: 0 auto;
 }
+
+/*单行溢出*/
+@mixin ellipsis {
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap
+}
+
+/*多行溢出*/
+@mixin ellipses($line) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $line;
+  -webkit-box-orient: vertical;
+}

package.json

@@ -20,6 +20,7 @@
     "core-js": "^3.19.3",
     "element-ui": "^2.15.8",
     "js-util-all": "^1.0.6",
+    "lodash": "^4.17.21",
     "nuxt": "^2.15.8",
     "vue": "^2.6.14",
     "vue-server-renderer": "^2.6.14",

pages/index/index.vue

@@ -6,16 +6,35 @@
  * @Description: file content
 -->
 <template>
-  <div>
+  <div class="home">
     <Banner />
-    <!-- <Seckil /> -->
+    <div class="home-wrap">
+      <Seckil v-if="true || seckillData.activityTimeVO" :data="seckillData" />
+    </div>
   </div>
 </template>
 
 <script>
+import { ApiGetHomeSeckill } from "@/plugins/api/seckill";
 import Banner from "./module/Banner.vue";
 import Seckil from "./module/Seckill.vue";
 export default {
   components: { Banner, Seckil },
+  async asyncData() {
+    // 获取秒杀数据
+    const { result } = await ApiGetHomeSeckill();
+    return {
+      seckillData: result,
+    };
+  },
 };
 </script>
+<style lang="scss" scoped>
+.home {
+  background: #f8f8f8;
+  .home-wrap {
+    @include layout-box;
+    padding: 30px 0 30px 0;
+  }
+}
+</style>

pages/index/module/Seckill.vue

@@ -7,18 +7,218 @@
 -->
 
 <template>
-	<div>我是秒杀模块</div>
+  <div class="home-sckill flex">
+    <div class="home-sckill-bar" :style="{ backgroundImage: `url(${bkgUrl})` }">
+      <strong class="home-sckill-title">限时秒杀</strong>
+      <div class="home-sckill-wrap">
+        <div class="home-sckill-wrap__tip">
+          <strong>10:00</strong>
+          <span>点场 距结束</span>
+        </div>
+        <div class="home-sckill-wrap__countdown flex flex-middle flex-center">
+          <div class="sckill-wrap-countdown__time">{{ countdown.hour }}</div>
+          <span class="sckill-wrap-countdown--mark">:</span>
+          <div class="sckill-wrap-countdown__time">{{ countdown.minute }}</div>
+          <span class="sckill-wrap-countdown--mark">:</span>
+          <div class="sckill-wrap-countdown__time">{{ countdown.second }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="home-sckill-carousel">
+      <el-carousel
+        height="260px"
+        arrow="always"
+        :autoplay="false"
+        :loop="false"
+      >
+        <el-carousel-item v-for="(item, index) in goodsList" :key="index">
+          <div class="carousel-goods flex">
+            <div
+              v-for="(itemChild, indexChild) in item"
+              :key="itemChild.productId"
+              class="carousel-goods-box flex flex-middle"
+            >
+              <div
+                v-if="indexChild !== 0"
+                class="carousel-goods-box--line"
+              ></div>
+              <div class="carousel-goods-box__item">
+                <img
+                  class="goods-box-item__cover"
+                  :src="itemChild.productMainPicture"
+                />
+                <div class="goods-box-item__wrap">
+                  <p class="box-item-wrap__title">
+                    {{ itemChild.productName }}
+                  </p>
+                  <strong class="box-item-wrap__price"
+                    >￥{{ itemChild.activityPrice }}</strong
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+  </div>
 </template>
 <script>
-export default {
-	name : 'Seckill',
-	data(){
-		return {
+import _ from "lodash";
 
-		}
-	}
-}
+const CAROUSEL_COUNT = 5; // 走马灯每页展示商品数
+
+export default {
+  name: "HomeSeckill",
+  props: {
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      bkgUrl: require("~/assets/img/sckill/bkg-small.png"),
+      goodsList: [],
+    };
+  },
+  watch: {
+    data: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        const { activityProductListVO: products } = val;
+        if (products && products.length > 0) {
+          this.getFormatData(products);
+        }
+      },
+    },
+  },
+  computed: {
+    countdown() {
+      return {
+        hour: "01",
+        minute: "32",
+        second: "09",
+      };
+    },
+  },
+  methods: {
+    // 走马灯商品列表，五个商品为一组
+    getFormatData(list) {
+      const listCopy = _.cloneDeep(list);
+      const part = Math.ceil(listCopy.length / CAROUSEL_COUNT);
+      if (part === 1) {
+        this.goodsList = [listCopy.splice(0, CAROUSEL_COUNT)];
+        return;
+      }
+      for (let i = 0; i < part; i++) {
+        const goodsListItem = listCopy.splice(0, CAROUSEL_COUNT);
+        this.goodsList.push(goodsListItem);
+      }
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-
+.home-sckill {
+  height: 260px;
+  .home-sckill-bar {
+    width: 190px;
+    height: 100%;
+    padding: 45px 0 28px 0;
+    text-align: center;
+    color: #ffffff;
+    background-size: 100% 100%;
+    .home-sckill-title {
+      display: block;
+      font-size: 28px;
+      margin-bottom: 90px;
+    }
+    .home-sckill-wrap {
+      margin-bottom: 10px;
+      .home-sckill-wrap__tip {
+        font-size: 0;
+        strong {
+          font-size: 18px;
+        }
+        span {
+          font-size: 14px;
+        }
+      }
+      .home-sckill-wrap__countdown {
+        margin-top: 10px;
+        .sckill-wrap-countdown__time {
+          width: 30px;
+          height: 30px;
+          line-height: 30px;
+          text-align: center;
+          color: #ffffff;
+          font-size: 18px;
+          font-weight: bold;
+          background: #2f3430;
+        }
+        .sckill-wrap-countdown--mark {
+          display: block;
+          font-size: 20px;
+          margin: 0 8px;
+        }
+      }
+    }
+  }
+  .home-sckill-carousel {
+    /deep/.el-carousel {
+      width: 1010px;
+      .el-carousel__container {
+        padding: 0 10px;
+        background: #ffffff;
+        .el-carousel__arrow {
+          i {
+            font-size: 14px;
+            font-weight: bold;
+          }
+          &--left {
+            left: -11px;
+          }
+          &--right {
+            right: -11px;
+          }
+        }
+      }
+      .carousel-goods {
+        height: 100%;
+        .carousel-goods-box {
+          .carousel-goods-box--line {
+            height: 160px;
+            width: 1px;
+            background: #eeeeee;
+          }
+          .carousel-goods-box__item {
+            width: 198px;
+            padding: 20px 24px;
+            .goods-box-item__cover {
+              width: 150px;
+              height: 150px;
+              object-fit: productMainPicture;
+              margin-bottom: 14px;
+            }
+            .goods-box-item__wrap {
+              font-size: 14px;
+              color: #333333;
+              text-align: center;
+              .box-item-wrap__title {
+                @include ellipsis;
+                margin-bottom: 8px;
+              }
+              .box-item-wrap__price {
+                color: #ff512b;
+                text-align: center;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>