效果
<view class="issue-price-countdown">
<CountDown :endTimestamp="1745996085000"></CountDown>
</view>
引入组件
import CountDown from '@/components/CountDown.vue';
<template>
<view class="countdown">
<view class="time-box hour">{{ currentHours }}</view>
<text class="colon">:</text>
<view class="time-box minute">{{ currentMinutes }}</view>
<text class="colon">:</text>
<view class="time-box second">{{ currentSeconds }}</view>
</view>
</template>
<script>
export default {
props: {
// 接收13位时间戳（结束时间）
endTimestamp: {
type: Number,
required: true
}
},
data() {
return {
remainingTime: 0, // 剩余总秒数
timer: null,
currentHours: 0,
currentMinutes: 0,
currentSeconds: 0
}
},
methods: {
// 初始化倒计时
initCountdown() {
this.clearTimer()
this.calculateRemaining()
if (this.remainingTime > 0) {
this.timer = setInterval(() => {
this.updateTime()
}, 1000)
}
},
// 计算剩余时间
calculateRemaining() {
const now = Date.now()
this.remainingTime = Math.max(0, Math.floor((this.endTimestamp - now) / 1000))
this.updateDisplayTime()
},
// 更新时间显示
updateDisplayTime() {
let seconds = this.remainingTime % 60
let minutes = Math.floor(this.remainingTime / 60) % 60
const hours = Math.floor(this.remainingTime / 3600)
// 实现级联更新效果
if (this.currentSeconds === 0 && seconds === 59) {
this.currentMinutes = minutes
}
if (this.currentMinutes === 0 && minutes === 59) {
this.currentHours = hours
}
this.currentSeconds = this.pad(seconds)
this.currentMinutes = this.pad(minutes)
this.currentHours = this.pad(hours)
},
// 每秒更新
updateTime() {
this.remainingTime = Math.max(0, this.remainingTime - 1)
this.updateDisplayTime()
if (this.remainingTime <= 0) {
this.clearTimer()
this.$emit('timeup')
}
},
// 补零函数
pad(n) {
return n < 10 ? '0' + n : n
},
// 清除定时器
clearTimer() {
if (this.timer) {
clearInterval(this.timer)
this.timer = null
}
}
},
watch: {
endTimestamp: {
immediate: true,
handler(newVal) {
this.initCountdown()
}
}
},
created() {
}
}
</script>
<style lang="scss" scoped>
.countdown {
display: flex;
align-items: center;
justify-content: space-between;
.time-box {
width: 52rpx;
height: 52rpx;
background: #313131;
line-height: 52rpx;
text-align: center;
border-radius: 10rpx 10rpx 10rpx 10rpx;
font-weight: bold;
}
.colon {
color: #313131;
margin: 0 12rpx;
}
}
</style>
)
