<template>
<view>
<view class="TimeDate" :style="'font-size:'+fontSize+'rpx'">
<view v-if="dateTime.day" class="day">{{dateTime.day || ''}}天</view>
<view class="hours"><span class="redBox">{{dateTime.hours=='0'?'00':dateTime.hours}}</span>时</view>
<view class="minute"><span class="redBox">{{dateTime.minute=='0'?'00':dateTime.minute}}</span>分</view>
<view class="Second"><span class="redBox">{{countdown>-1?countdown:'00'}}</span>秒</view>
</view>
</view>
</template>
<script>
export default {
props: {
StartDateTime: {
type: String,
default: ""
},
fontSize: {
type: String,
default: 30
}
},
data() {
return {
dateTime :{
day : 0,
hours: 0,
minute: 0,
Second: 0
},
DateNow: new Date(),
activityId: 0,
countdown: 0
}
},
watch: {
StartDateTime: {
handler(nVal,oVal) {
this.StartDateTime = nVal
this.getdate(this.StartDateTime);
}
}
},
onLoad() {
},
onShow() {
},
mounted() {
// 组件挂载后调用
this.getdate(this.StartDateTime);
console.log("执行", this.StartDateTime)
},
methods: {
//开始倒计时
timeFn() {
this.timer = setInterval(() => {
if (this.countdown > -1) {
this.countdown--;
if (this.countdown ==0 && this.dateTime.day == 0 && this.dateTime.hours==0 && this.dateTime.minute ==0 ) {
this.countdown = -1;
} else if (this.countdown == 0 ) {
if (this.dateTime.minute > 0) {
this.dateTime.minute = this.dateTime.minute -1;
this.countdown = 59;
} else if (this.dateTime.hours > 0) {
if (this.dateTime.minute == 0) {
this.dateTime.hours = this.dateTime.hours -1;
this.dateTime.minute = 59;
this.countdown = 59;
} else {
this.dateTime.minute = this.dateTime.minute -1;
this.countdown = 59;
}
}else if (this.dateTime.day >0 ) {
if (this.dateTime.minute == 0 && this.dateTime.hours == 0) {
this.dateTime.day = this.dateTime.day -1;
this.dateTime.hours = 23;
this.dateTime.minute = 59;
this.countdown = 59;
}
}
}
} else {
clearInterval(this.timer);
// 倒计时结束后需要执行的操作
}
}, 1000);
},
//date-picker改变的时候 选取时间值
getdate(dateTime) {
// this.form.duration = ''
this.difference(dateTime);
},
localTime(DateObject) {
let offset = new Date().getTimezoneOffset() * 1000; // 转换为毫秒
// if (offset < 0) {
// offset = 0 - offset;
// } else {
// offset = 0 + offset;
// }
// return new Date(DateObject.getTime() + offset); // 转换为本地时间
return new Date(DateObject.getTime() ); // 转换为本地时间
},
// 时间计算
difference(endTime) {
var dateBejin = new Date();
var dateEnd = new Date(endTime);
dateEnd = this.localTime(dateEnd); // 计算本地时间
console.log(dateEnd, dateBejin);
var dateDiff = dateEnd.getTime() - dateBejin.getTime(); //时间差的毫秒数
var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
var leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
var hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
//计算相差分钟数
var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
var minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
//计算相差秒数
var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
var seconds = Math.round(leave3 / 1000);
console.log(
"相差" +
dayDiff +
"天" +
hours +
"小时" +
minutes +
"分钟" +
seconds +
"秒"
);
// this.DateTime = dayDiff + '天' + hours + '时'
this.dateTime = {
day : dayDiff,
hours: hours,
minute: minutes,
Second: seconds
}
this.countdown = seconds;
this.timeFn();
}
}
}
</script>
<style lang="scss">
.TimeDate {
display: flex;
justify-content: center;
align-items: center;
font-size: 23rpx;
.redBox {
display: inline-block;
width: 34rpx;
height: 34rpx;
background-color: #FB3737;
color: white;
border-radius: 5rpx;
text-align: center;
margin: 0 auto;
letter-spacing: 0px;
padding-right: 5rpx;
}
}
</style>
<TimeDate :StartDateTime="item.endTime" :fontSize="'30'"></TimeDate>