2021-06-03 16:17:11 +08:00

124 lines
2.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div>
<div class="wrapper" v-if="type === 'goodsDetail'">
<div class="wr-l"><Icon size="23" type="ios-alarm-outline" /> 秒杀活动</div>
<div class="count-down" v-if="end === ''">
<p>倒计时</p><span>{{ hours }}</span><span>{{ minutes }}</span><span>{{ seconds }}</span>
</div>
<div v-else>{{end}}</div>
</div>
<span v-else class="cart-promotion">
<span v-if="end === ''">据活动结束<span>{{ hours }}</span> : <span>{{ minutes }}</span> : <span>{{ seconds }}</span></span>
<span v-else>活动已结束</span>
</span>
</div>
</template>
<script>
export default {
props: {
time: { // 传入的初始时间
default: 1718977559428
},
type: { // 区分是在详情还是购物车调用
default: 'goodsDetail', // 设置两个值goodsDetail和cart样式不同
type: String
}
},
data () {
return {
end: '', // 结束状态
hours: '', // 小时
minutes: '', // 分钟
seconds: '', // 秒
interval: '' // 定时器
};
},
mounted () {
this.init()
},
methods: {
countDown (val) { // 倒计时方法
function addZero (i) {
return i < 10 ? '0' + i : i + '';
}
var nowtime = new Date();
var endtime = new Date(val);
var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
var h = parseInt((lefttime / (60 * 60)) % 24);
var m = parseInt((lefttime / 60) % 60);
var s = parseInt(lefttime % 60);
h = addZero(h);
m = addZero(m);
s = addZero(s);
this.hours = h;
this.minutes = m
this.seconds = s;
if (lefttime <= 0) {
this.end = `活动已结束`;
clearInterval(this.interval)
}
},
init () { // 初始化
this.interval = setInterval(() => {
this.countDown(this.time);
}, 1000);
}
}
};
</script>
<style scoped lang="scss">
.cart-promotion{
font-size: 13px;
color: #999;
margin-left: 10px;
}
.wrapper {
background-image: linear-gradient(266deg, #ff0b33, #ff4257, #ff5f7c, #fa78a2);
height: 32px;
color: #fff;
line-height: 32px;
font-size: 16px;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
.wr-r{
font-size: 13px;
}
.count-down {
margin-right: -20px;
p{
float: left;
line-height: 20px;
}
> span {
position: relative;
float: left;
width: 20px;
height: 20px;
text-align: center;
background-color: #2f3430;
margin-right: 20px;
color: white;
font-size: 14px;
line-height: 20px;
&::after {
content: ":";
display: block;
position: absolute;
right: -20px;
font-weight: bolder;
font-size: 14px;
width: 20px;
height: 100%;
top: 0;
}
}
> span:last-child::after {
content: "";
}
}
</style>