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.
161 lines
3.8 KiB
161 lines
3.8 KiB
<template> |
|
<view class="time"> |
|
{{ tipText }} |
|
<text class="styleAll" :style="styleAllStyle?styleAllStyle:''" v-if="isDay === true">{{ day }}</text> |
|
<text class="timeTxt" :style="timeTxtStyle?timeTxtStyle:''">{{ dayText }}</text> |
|
<text class="styleAll" :style="styleAllStyle?styleAllStyle:''">{{ hour }}</text> |
|
<text class="timeTxt" :style="timeTxtStyle?timeTxtStyle:''">{{ hourText }}</text> |
|
<text class="styleAll" :style="styleAllStyle?styleAllStyle:''">{{ minute }}</text> |
|
<text class="timeTxt" :style="timeTxtStyle?timeTxtStyle:''">{{ minuteText }}</text> |
|
<text class="styleAll" :style="styleAllStyle?styleAllStyle:''" v-if="isSecond">{{ second }}</text> |
|
<text class="timeTxt" :style="timeTxtStyle?timeTxtStyle:''" v-if="isSecond">{{ secondText }}</text> |
|
</view> |
|
</template> |
|
<script> |
|
export default { |
|
name: 'CountDown', |
|
props: { |
|
//距离开始提示文字 |
|
tipText: { |
|
type: String, |
|
default: '', |
|
}, |
|
dayText: { |
|
type: String, |
|
default: '天', |
|
}, |
|
hourText: { |
|
type: String, |
|
default: '时', |
|
}, |
|
minuteText: { |
|
type: String, |
|
default: '分', |
|
}, |
|
secondText: { |
|
type: String, |
|
default: '秒', |
|
}, |
|
datatime: {}, |
|
isDay: { |
|
type: Boolean, |
|
default: true, |
|
}, |
|
isSecond: { |
|
type: Boolean, |
|
default: true, |
|
}, |
|
styleAllStyle: { |
|
type: String, |
|
default: '', |
|
}, |
|
timeTxtStyle: { |
|
type: String, |
|
default: '', |
|
} |
|
}, |
|
data() { |
|
return { |
|
timeInterval: null, |
|
time: this.datatime, |
|
day: '00', |
|
hour: '00', |
|
minute: '00', |
|
second: '00', |
|
} |
|
}, |
|
created() { |
|
this.show_time() |
|
}, |
|
watch: { |
|
datatime(val) { |
|
clearInterval(this.timeInterval) |
|
this.time = val |
|
this.show_time() |
|
}, |
|
}, |
|
mounted() { |
|
}, |
|
methods: { |
|
show_time() { |
|
console.log('this.datatime', this.datatime, 'this.time', this.time) |
|
if (this.time.toString().length == 13) { |
|
// 毫秒级 |
|
// console.log('毫秒') |
|
this.time = this.time / 1000 |
|
} else if (this.time.toString().length == 10) { |
|
// console.log('秒') |
|
// 秒级 |
|
} else { |
|
// 时间 |
|
// console.log('时间') |
|
this.time = Date.parse(this.time) / 1000 |
|
} |
|
this.runTime() |
|
this.timeInterval = setInterval(this.runTime, 1000) |
|
}, |
|
runTime() { |
|
//时间函数 |
|
let intDiff = this.time - Date.parse(new Date()) / 1000 //获取数据中的时间戳的时间差 |
|
let day = 0, |
|
hour = 0, |
|
minute = 0, |
|
second = 0 |
|
if (intDiff > 0) { |
|
//转换时间 |
|
if (this.isDay === true) { |
|
day = Math.floor(intDiff / (60 * 60 * 24)) |
|
} else { |
|
day = 0 |
|
} |
|
hour = Math.floor(intDiff / (60 * 60)) - day * 24 |
|
minute = Math.floor(intDiff / 60) - day * 24 * 60 - hour * 60 |
|
second = Math.floor(intDiff) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60 |
|
if (hour <= 9) hour = '0' + hour |
|
if (minute <= 9) minute = '0' + minute |
|
if (second <= 9) second = '0' + second |
|
if(day) { |
|
this.day = day |
|
} else { |
|
this.day = '00' |
|
} |
|
this.hour = hour |
|
this.minute = minute |
|
this.second = second |
|
} else { |
|
this.day = '00' |
|
this.hour = '00' |
|
this.minute = '00' |
|
this.second = '00' |
|
} |
|
} |
|
}, |
|
destroyed() { |
|
clearTimeout(this.timeInterval) |
|
} |
|
} |
|
</script> |
|
<style lang="less" scoped> |
|
.time { |
|
.styleAll { |
|
display: inline-block; |
|
width: 42rpx; |
|
height: 38rpx; |
|
background: #2DB5AE; |
|
border-radius: 4rpx; |
|
font-size: 26rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #FFFFFF; |
|
line-height: 38rpx; |
|
text-align: center; |
|
} |
|
.timeTxt { |
|
font-size: 24rpx; |
|
font-family: PingFang SC; |
|
font-weight: 600; |
|
color: #3A3A3C; |
|
line-height: 38rpx; |
|
} |
|
} |
|
</style>
|
|
|