sulibao-mini/tuniao-ui/components/tn-count-down/tn-count-down.vue

<template>
  <view class="tn-countdown-class tn-countdown">
    <view
      v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '00'))"
      class="tn-countdown__item"
      :class="[backgroundColorClass]"
      :style="[itemStyle]"
    >
      <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
        {{ d }}
      </view>
    </view>
    <view 
      v-if="showHours && (hideZeroDay || (!hideZeroDay && d != '00'))"
      class="tn-countdown__separator"
      :style="{
        fontSize: separatorSize + 'rpx',
        color: separatorColor,
        paddingBottom: separator === 'en' ? '4rpx' : 0
      }"
    >
      {{ separator === 'en' ? ':' : '天'}}
    </view>
    
    <view
      v-if="showHours"
      class="tn-countdown__item"
      :class="[backgroundColorClass]"
      :style="[itemStyle]"
    >
      <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
        {{ h }}
      </view>
    </view>
    <view 
      v-if="showMinutes"
      class="tn-countdown__separator"
      :style="{
        fontSize: separatorSize + 'rpx',
        color: separatorColor,
        paddingBottom: separator === 'en' ? '4rpx' : 0
      }"
    >
      {{ separator === 'en' ? ':' : '时'}}
    </view>
    
    <view
      v-if="showMinutes"
      class="tn-countdown__item"
      :class="[backgroundColorClass]"
      :style="[itemStyle]"
    >
      <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
        {{ m }}
      </view>
    </view>
    <view 
      v-if="showSeconds"
      class="tn-countdown__separator"
      :style="{
        fontSize: separatorSize + 'rpx',
        color: separatorColor,
        paddingBottom: separator === 'en' ? '4rpx' : 0
      }"
    >
      {{ separator === 'en' ? ':' : '分'}}
    </view>
    
    <view
      v-if="showSeconds"
      class="tn-countdown__item"
      :class="[backgroundColorClass]"
      :style="[itemStyle]"
    >
      <view class="tn-countdown__item__time" :class="[fontColorClass]" :style="[letterStyle]">
        {{ s }}
      </view>
    </view>
    <view 
      v-if="showSeconds && separator === 'cn'"
      class="tn-countdown__separator"
      :style="{
        fontSize: separatorSize + 'rpx',
        color: separatorColor,
        paddingBottom: separator === 'en' ? '4rpx' : 0
      }"
    >
      秒
    </view>
  </view>
</template>

<script>
  import componentsColorMixin from '../../libs/mixin/components_color.js'
  export default {
    name: 'tn-count-down',
    mixins: [componentsColorMixin],
    props: {
      // 倒计时时间，秒作为单位
      timestamp: {
        type: Number,
        default: 0
      },
      // 是否自动开始
      autoplay: {
        type: Boolean,
        default: true
      },
      // 数字框高度
      height: {
        type: [String, Number],
        default: 'auto'
      },
      // 分隔符类型
      // en -> 使用英文的冒号 cn -> 使用中文进行分割
      separator: {
        type: String,
        default: 'en'
      },
      // 分割符大小
      separatorSize: {
        type: Number,
        default: 30
      },
      // 分隔符颜色
      separatorColor: {
        type: String,
        default: '#080808'
      },
      // 是否显示边框
      showBorder: {
        type: Boolean,
        default: false
      },
      // 边框颜色
      borderColor: {
        type: String,
        default: '#080808'
      },
      // 是否显示秒
      showSeconds: {
        type: Boolean,
        default: true
      },
      // 是否显示分
      showMinutes: {
        type: Boolean,
        default: true
      },
      // 是否显示时
      showHours: {
        type: Boolean,
        default: true
      },
      // 是否显示天
      showDays: {
        type: Boolean,
        default: true
      },
      // 如果当天的部分为0时，是否隐藏不显示
      hideZeroDay: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      // 倒计时item的样式
      itemStyle() {
        let style = {}
        if (this.height) {
          style.height = this.$t.string.getLengthUnitValue(this.height)
          style.width = style.height
        }
        if (this.showBorder) {
          style.borderStyle = 'solid'
          style.borderColor = this.borderColor
          style.borderWidth = '1rpx'
        }
        style.backgroundColor = this.backgroundColorStyle || '#FFFFFF'
        return style
      },
      // 倒计时数字样式
      letterStyle() {
        let style = {}
        style.fontSize = this.fontSizeStyle || '30rpx'
        style.color = this.fontColorStyle || '#080808'
        return style
      }
    },
    data() {
      return {
        d: '00',
        h: '00',
        m: '00',
        s: '00',
        // 定时器
        timer: null,
        // 记录倒计过程中变化的秒数
        seconds: 0
      }
    },
    watch: {
      // 监听时间戳变化
      timestamp(value) {
        this.clearTimer()
        this.start()
      }
    },
    mounted() {
      // 如果时自动倒计时，加载完成开始计时
      this.autoplay && this.timestamp && this.start()
    },
    beforeDestroy() {
      this.clearTimer()
    },
    methods: {
      // 开始倒计时
      start() {
        // 避免可能出现的倒计时重叠情况
        this.clearTimer()
        if (this.timestamp <= 0) return
        this.seconds = Number(this.timestamp)
        this.formatTime(this.seconds)
        this.timer = setInterval(() => {
          this.seconds--
          // 发出change事件
          this.$emit('change', this.seconds)
          if (this.seconds < 0) {
            return this.end()
          }
          this.formatTime(this.seconds)
        }, 1000)
      },
      // 格式化时间
      formatTime(seconds) {
        // 小于等于0的话，结束倒计时
        seconds <= 0 && this.end()
        let [day, hour, minute, second] = [0, 0, 0, 0]
        day = Math.floor(seconds / (60 * 60 * 24))
        // 如果不显示天，则将天对应的小时计入到小时中
        // 先把当前的hour计算出来供分和秒使用
        hour = Math.floor(seconds / (60 * 60)) - (day * 24)
        let showHour = null
        if (this.showDays) {
          showHour = hour
        } else {
          // 将天数对应的小时加入到时中进行显示
          showHour = Math.floor(seconds / (60 * 60))
        }
        minute = Math.floor(seconds / 60) - (hour * 60) - (day * 24 * 60)
        second = Math.floor(seconds) - (minute * 60) - (hour * 60 * 60) - (day * 24 * 60 * 60)
        // 如果小于0在前面进行补0操作
        showHour = this.$t.number.formatNumberAddZero(showHour)
        minute = this.$t.number.formatNumberAddZero(minute)
        second = this.$t.number.formatNumberAddZero(second)
        day = this.$t.number.formatNumberAddZero(day)
        
        this.d = day
        this.h = showHour
        this.m = minute
        this.s = second
      },
      // 倒计时结束
      end() {
        this.clearTimer()
        this.$emit('end')
      },
      // 清除倒计时
      clearTimer() {
        if (this.timer !== null) {
          clearInterval(this.timer)
          this.timer = null
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  
  .tn-countdown {
    /* #ifndef APP-NVUE */
    display: inline-flex;
    /* #endif */
    align-items: center;
    
    &__item {
      box-sizing: content-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 2rpx;
      border-radius: 6rpx;
      white-space: nowrap;
      transform: translateZ(0);
      
      &__time {
        margin: 0;
        padding: 0;
        line-height: 1;
      }
    }
    
    &__separator {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 0 5rpx;
      line-height: 1;
    }
  }
</style>