1、常规操作:自定义倒计时组件 ui-count-down
<template>
<view class="countdown-view">
<u-count-down @change="finishDown" :time="startTimeDown" :startTime="startTime" format="HH:mm:ss">
</u-count-down>
</view>
</template>
<script>
export default {
props: {
startTime: {
type: [Number, String],
default: 0,
},
},
data() {
return {
startTimeDown: '' //倒计时时间戳
}
},
mounted() {
this.intervalTime(this.startTime)
},
methods: {
//日期转时间戳
timeProcessing(timeDate) {
// let timeDate = "2019-06-24 11:08:48"
let Time = new Date(timeDate);
// console.log(Time) //Mon Jun 24 2019 11:08:48 GMT+0800 (中国标准时间)
let timestemp = Time.getTime();
return timestemp
},
//获取时间差
intervalTime(endTime) {
// var timestamp=new Date().getTime(); //计算当前时间戳
var date1 = (Date.parse(new Date())) / 1000; //计算当前时间戳 (毫秒级)
var date2 = (this.timeProcessing(endTime)) / 1000; //1688817600; //计算当前时间戳 (毫秒级)
// var date2 = endTime; //结束时间
// var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
var date3 = (date2 - date1) * 1000; //时间差的毫秒数
this.startTimeDown = date3
//触发当前组件上的 事件,让父类能够监听到
this.$emit('countDownTime', date3)
return
},
}
}
</script>
<style lang="scss">
.countdown-view {
margin-left: 10rpx;
}
</style>
2、引用自定义组件
<ui-count-down @finishDown="finishDown(index)" :startTime="2023-07-17 18:02:00">
</ui-count-down>
@finishDown:让父类监听引用组件倒计时的相关操作
//倒计时结束
finishDown(index) {
//0:未开播 1:待开播 2:直播中 3:直播结束
this.liveList[index].status = 2
}