<template>
<view v-if="show">
<view class="down-time-char">
<text style="margin-right: 15rpx;">仅剩</text>
<uni-countdown color="#f52f46" :show-day="false" :hour="hour" :minute="minute" :second="second"></uni-countdown>
</view>
</view>
</template>
<script>
import moment from "moment"
export default {
name: "down-for-time",
props: ["createTime"],
data() {
return {
show: false,
hour: 0,
minute: 0,
second: 0
}
},
mounted() {
if(moment(this.createTime).add(30, "minutes").isAfter(moment())) {
this.show = true
this.timer()
}
},
destroyed() {
},
methods: {
timer() {
let dTime = moment(this.createTime).add(30, "minutes").diff(moment())
console.log(moment.duration(dTime),'ddd')
const duration = moment.duration(dTime)
this.hour = duration.hours()
this.minute = duration.minutes()
this.seconds = duration.seconds()
// this.downTime = "00:" + duration.minutes() + ":" + duration.seconds()
},
}
}
</script>
<style lang="scss" scoped>
.down-time-char {
display: flex;
align-items: center;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC-Bold;
font-weight: 700;
text-align: center;
color: #f52f46;
margin-right: 49rpx;
}
</style>
使用:<DownTime :createTime="item.createTime"></DownTime>//传递时间就可以了
export default {
components: {
DownTime
},