浅念
104 lines
2.1 KiB
Vue
104 lines
2.1 KiB
Vue
<template>
|
|
<view class="countdown">
|
|
<view class="time green" v-if="!isend">
|
|
<image src="/static/image/gtime.png" mode=""></image>
|
|
<text v-if="showDays && timeObj.days > 0" >{{ timeObj.days }}{{$t('day')}} </text>
|
|
<text> {{ timeObj.hours | padZero }} : </text>
|
|
<text> {{ timeObj.minutes | padZero }} : </text>
|
|
<text> {{ timeObj.seconds | padZero }}</text>
|
|
</view>
|
|
<view class="time timered" v-else>
|
|
<image src="/static/image/redtime.png" mode=""></image>
|
|
<text>{{$t('timeout')}}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
// 倒计时总秒数
|
|
totalSeconds: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
// 是否显示天数
|
|
showDays: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
timeObj: {
|
|
days: 0,
|
|
hours: 0,
|
|
minutes: 0,
|
|
seconds: 0
|
|
},
|
|
isend:false,
|
|
timer: null,
|
|
totalSeconds1:this.totalSeconds
|
|
}
|
|
},
|
|
filters: {
|
|
padZero(value) {
|
|
return value.toString().padStart(2, '0');
|
|
}
|
|
},
|
|
mounted() {
|
|
if(this.totalSeconds>0){
|
|
this.runCountdown();
|
|
}else{
|
|
this.isend=true
|
|
}
|
|
},
|
|
methods: {
|
|
runCountdown() {
|
|
this.updateTime(this.totalSeconds1);
|
|
this.timer = setInterval(() => {
|
|
if (this.totalSeconds1 <= 0) {
|
|
clearInterval(this.timer);
|
|
this.isend=true
|
|
this.$emit('end');
|
|
return;
|
|
}
|
|
this.totalSeconds1--;
|
|
this.updateTime(this.totalSeconds1);
|
|
}, 1000);
|
|
},
|
|
updateTime(seconds) {
|
|
this.timeObj.days = Math.floor(seconds / (24 * 3600));
|
|
const remaining = seconds % (24 * 3600);
|
|
this.timeObj.hours = Math.floor(remaining / 3600);
|
|
this.timeObj.minutes = Math.floor((remaining % 3600) / 60);
|
|
this.timeObj.seconds = remaining % 60;
|
|
}
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.timer);
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.countdown{
|
|
.time{
|
|
display: flex;
|
|
align-items: center;
|
|
text{
|
|
margin: 0px 2px;
|
|
}
|
|
}
|
|
image{
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.green{
|
|
color: #27C89C;
|
|
}
|
|
.timered{
|
|
color: #FF4040;
|
|
}
|
|
</style> |