You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
shop-pc/pages/index/module/Seckill.vue

279 lines
7.3 KiB

<!--
* @Author: ch
* @Date: 2022-05-04 17:51:11
* @LastEditors: ch
* @LastEditTime: 2022-05-04 22:15:37
* @Description: file content
-->
<template>
<div class="home-sckill flex" @click="onJumpSeckill">
<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>{{ data.activityTimeVO.timeName }}</strong>
<span>{{ seckillText }}</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"
@click.stop="onJumpGoodsDetail(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";
import { FormatDate } from "@/plugins/utils";
const CAROUSEL_COUNT = 5; // 走马灯每页展示商品数
export default {
name: "HomeSeckill",
props: {
data: {
type: Object,
default: () => ({}),
},
},
data() {
return {
bkgUrl: require("~/assets/img/sckill/bkg-small.png"),
goodsList: [],
seckillTime: 0, // 秒杀时间
seckillText: "", // 秒杀文案
timeInterval: null, // 倒计时定时器
};
},
watch: {
data: {
deep: true,
immediate: true,
handler(val) {
const {
currentTime,
activityProductListVO: products,
activityTimeVO: { activityEndTime, activityStartTime },
} = val;
if (products && products.length > 0) {
this.getFormatData(products);
}
this.getSeckillData({
currentTime,
startTime: activityStartTime,
endTime: activityEndTime,
});
},
},
},
computed: {
// 秒杀活动倒计时
countdown() {
const date = FormatDate(this.seckillTime, "hh:mm:ss");
const [hour, minute, second] = date.split(":");
return {
hour,
minute,
second,
};
},
},
destroyed() {
clearInterval(this.timeInterval);
},
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);
}
},
// 获取秒杀时间数据
getSeckillData({ current, startTime, endTime }) {
current = new Date(current);
startTime = new Date(startTime);
endTime = new Date(endTime);
if (current > startTime && current < endTime) {
// 活动进行中
this.seckillText = "距结束";
this.seckillTime = endTime - current;
} else {
// 活动未开始
this.seckillText = "距开始";
this.seckillTime = startTime - current;
}
this.setCountDownInterval();
},
// 秒杀倒计时
setCountDownInterval() {
this.timeInterval = setInterval(() => {
if (this.seckillTime <= 0) {
clearInterval(this.timeInterval);
}
this.seckillTime -= 1000;
}, 1e3);
},
onJumpSeckill() {
this.$router.push("/seckill");
},
onJumpGoodsDetail(id) {
this.$router.push(`/goods/detail/${id}`);
},
},
};
</script>
<style lang="scss" scoped>
.home-sckill {
height: 260px;
cursor: pointer;
.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;
margin-right: 4px;
}
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>