cfc/cfc-frontend/components/countdown-tag.vue

<template>
  <view class="countdown-tag" :style="{ backgroundColor: color }">
    <text class="countdown-text" :style="{ color: textColor }">{{ remainingText }}</text>
  </view>
</template>

<script>
import { parseDate } from '@/utils/format.js'

export default {
  name: 'CountdownTag',
  props: {
    endTime: { type: String, default: null },
    color: { type: String, default: '#FF6B00' },
    textColor: { type: String, default: '#FFFFFF' }
  },
  data() {
    return { remainingText: '' }
  },
  created() {
    this._timer = null
    this._tick()
    this._timer = setInterval(() => this._tick(), 1000)
  },
  beforeDestroy() {
    if (this._timer) clearInterval(this._timer)
  },
  methods: {
    _tick() {
      if (!this.endTime) {
        this.remainingText = ''
        return
      }
      var end = parseDate(this.endTime)
      if (!end) {
        this.remainingText = ''
        return
      }
      var diff = end.getTime() - Date.now()
      if (diff <= 0) {
        this.remainingText = '已结束'
        return
      }
      var days = Math.floor(diff / 86400000)
      var hours = Math.floor((diff % 86400000) / 3600000)
      var mins = Math.floor((diff % 3600000) / 60000)
      var secs = Math.floor((diff % 60000) / 1000)
      if (days > 0) {
        this.remainingText = days + '天' + hours + '时' + mins + '分' + secs + '秒'
      } else if (hours > 0) {
        this.remainingText = hours + '时' + mins + '分' + secs + '秒'
      } else {
        this.remainingText = mins + '分' + secs + '秒'
      }
      if (diff < 3600000) {
        this.remainingText = '即将结束'
      }
    }
  }
}
</script>

<style scoped>
.countdown-tag {
  display: inline-block;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  font-size: 22rpx;
  margin-top: 6rpx;
}
.countdown-text {
  font-weight: bold;
}
</style>