yihuo/components/spike-timer.vue

<template>
    <div v-if="timerFlag" class="countdown_none">
        {{ formattedDatetime }}
    </div>
    <div v-else class="countdown marginT4">
        <div class="countdown-digit">
            <div class="countdown-item hours">{{ doubleDigit(hours)[0] }}</div>
            <div class="countdown-item hours">{{ doubleDigit(hours)[1] }}</div>
        </div>
        <div class="paddingB2 marginX4" style="font-size: 64rpx">:</div>
        <div class="countdown-digit">
            <div class="countdown-item minutes">{{ doubleDigit(minutes)[0] }}</div>
            <div class="countdown-item minutes">{{ doubleDigit(minutes)[1] }}</div>
        </div>
        <div class="paddingB2 marginX4" style="font-size: 64rpx">:</div>
        <div class="countdown-digit">
            <div class="countdown-item seconds">{{ doubleDigit(seconds)[0] }}</div>
            <div class="countdown-item seconds">{{ doubleDigit(seconds)[1] }}</div>
        </div>
    </div>
</template>
  
  <script>
export default {
    props: {
        targetTime: {
            type: String,
            required: true
        },
        timerFlag: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            hours: 0,
            minutes: 0,
            seconds: 0,
            formattedDatetime: ''
        }
    },
    computed: {
        doubleDigit() {
            return (n) => (n < 10 ? `0${n}` : `${n}`)
        }
    },
    created() {
        this.starCountTime()
    },
    watch: {
        targetTime: {
            deep: true,
            handler(newVal, oldVal) {
                this.starCountTime()
            }
        }
    },
    methods: {
        starCountTime() {
            if (this.timerFlag) {
                this.formattedDatetime = this.greaterThanAday()
            } else {
                this.intervalId = setInterval(() => this.countDown(), 1000)
            }
        },
        countDown() {
            const targetDate = new Date(this.targetTime)
            const nowDate = new Date()
            const diffSeconds = Math.round((targetDate - nowDate) / 1000)

            if (diffSeconds < 0) {
                clearInterval(this.intervalId)
                this.$emit('timeDone')
                return
            }
            this.hours = Math.floor((diffSeconds % (3600 * 24)) / 3600)
            this.minutes = Math.floor((diffSeconds % 3600) / 60)
            this.seconds = diffSeconds % 60
        },
        greaterThanAday() {
            const date = new Date(this.targetTime)
            const month = date.getMonth() + 1
            const day = date.getDate()
            const hour = date.getHours()
            const minute = date.getMinutes()
            return `${month.toString().padStart(2, '0')}月${day
                .toString()
                .padStart(2, '0')}日 ${hour.toString().padStart(2, '0')}:${minute
                .toString()
                .padStart(2, '0')}`
        }
    },
    beforeDestroy() {
        clearInterval(this.intervalId)
    }
}
</script>
  
  <style lang="scss">
@font-face {
    font-family: DS_DIGIB;
    src: url(https://supermart1.oss-cn-hangzhou.aliyuncs.com/resource/magic/DS-DIGIB-2.ttf);
}
.countdown {
    display: flex;
    align-items: center;
    justify-content: center;
}

.countdown-digit {
    display: flex;
    flex-direction: row;
}

.countdown-item {
    font-family: DS_DIGIB;
    font-size: 64rpx;
    text-align: center;
    margin: 0 8rpx;
    color: white;
    width: 56rpx;
    height: 92rpx;
    line-height: 92rpx;
    background: #000;
    border-radius: 8rpx;
    text-shadow: none;
}
.countdown_none {
    width: 472rpx !important;
    height: 90rpx !important;
    font-size: 64rpx;
    text-align: center;
    margin: 0 8rpx;
    color: white;
    width: 56rpx;
    height: 92rpx;
    line-height: 92rpx;
    text-shadow: none;
}
</style>