|
|
|
@ -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>
|
|
|
|
|
import _ from "lodash";
|
|
|
|
|
|
|
|
|
|
const CAROUSEL_COUNT = 5; // 走马灯每页展示商品数
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name : 'Seckill',
|
|
|
|
|
data(){
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
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>
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
.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>
|
|
|
|
|