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

294 lines
7.6 KiB

3 years ago
<!--
* @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"
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>
3 years ago
</template>
<script>
import _ from "lodash";
const CAROUSEL_COUNT = 5; // 走马灯每页展示商品数
3 years ago
export default {
name: "HomeSeckill",
props: {
data: {
type: Object,
default: () => ({}),
},
list: {
Type: Object,
default: () => [],
},
current: {
type: Number,
default: 0,
},
},
data() {
return {
bkgUrl: require("~/assets/img/sckill/bkg-small.png"),
goodsList: [],
seckillTime: 0, // 秒杀时间
seckillText: "", // 秒杀文案
timeInterval: null, // 倒计时定时器
};
},
watch: {
list: {
deep: true,
immediate: true,
handler(val) {
if (val.length > 0) {
this.setCarouselData(val);
}
},
},
data: {
deep: true,
immediate: true,
handler(val) {
const {
activityTimeVO: { activityStartTime, activityEndTime },
} = val;
this.setTimerInterval({
startTime: activityStartTime,
endTime: activityEndTime,
});
},
},
},
computed: {
// 秒杀活动倒计时
countdown() {
const data = parseInt(this.seckillTime / 1e3);
const hour = Math.floor(data / 60 / 60);
const minute = Math.floor((data / 60) % 60);
const second = Math.floor(data % 60);
return {
hour: hour < 10 ? `0${hour}` : `${hour}`,
minute: minute < 10 ? `0${minute}` : `${minute}`,
second: second < 10 ? `0${second}` : `${second}`,
};
},
},
destroyed() {
clearInterval(this.timeInterval);
},
methods: {
// 走马灯商品列表,五个商品为一组
setCarouselData(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);
}
},
// 获取秒杀倒计时时间
setTimerInterval({ startTime, endTime }) {
startTime = new Date(startTime).getTime();
endTime = new Date(endTime).getTime();
if (this.current > startTime && this.current < endTime) {
// 活动进行中
this.seckillText = "距结束";
this.seckillTime = endTime - this.current;
} else {
// 活动未开始
this.seckillText = "距开始";
this.seckillTime = startTime - this.current;
}
this.timeInterval = setInterval(() => {
if (this.seckillTime <= 0) {
clearInterval(this.timeInterval);
this.$emit("refresh");
return;
}
this.seckillTime -= 1000;
}, 1e3);
},
onJumpSeckill() {
window.open(`${location.origin}/seckill`);
},
},
};
3 years ago
</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%;
border-radius: 4px 0 0 4px;
.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;
border-radius: 4px;
.el-carousel__container {
padding: 0 10px;
background: #ffffff;
.el-carousel__arrow {
border-radius: 45%;
i {
font-size: 14px;
font-weight: bold;
}
&--left {
left: -11px;
i {
margin-left: 5px;
}
}
&--right {
right: -11px;
i {
margin-right: 5px;
}
}
}
}
.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>