yoshop_pro_wxapp/components/countdown/index.js

import util from '../../utils/util'

Component({
  properties: {
    // useSlot: Boolean,
    // 截止的时间
    date: String,
    // 分隔符, colon为英文冒号，zh为中文
    separator: {
      type: String,
      value: 'zh'
    },
    // 组件样式, text为纯文本，custom为带背景色
    style: {
      type: String,
      value: 'text'
    },
  },

  data: {
    // 倒计时数据
    dynamic: {
      day: '00',
      hou: '00',
      min: '00',
      sec: '00'
    },
    // 分隔符文案
    separatorText: {
      day: '天',
      hou: '时',
      min: '分',
      sec: '秒'
    }
  },

  attached() {
    // 分隔符文案
    this.separatorText()
    // 开始倒计时
    this.onTime()
  },

  detached() {

  },


  methods: {

    // 分隔符文案
    separatorText() {
      const separatorText = this.data.separatorText
      if (this.data.separator === 'colon') {
        separatorText.day = ':'
        separatorText.hou = ':'
        separatorText.min = ':'
        separatorText.sec = ''
      }
      this.setData({
        separatorText
      })
    },

    // 开始倒计时
    onTime(deep = 0) {
      const app = this
      const dynamic = {}

      // 获取当前时间，同时得到活动结束时间数组
      const newTime = new Date().getTime()
      // 对结束时间进行处理渲染到页面
      const endTime = new Date(util.format_date(app.data.date)).getTime();

      // 如果活动未结束，对时间进行处理
      if ((endTime - newTime) <= 0) {
        return false
      }

      const diffTime = (endTime - newTime) / 1000;
      // 获取时、分、秒
      const day = parseInt(diffTime / 86400),
        hou = parseInt(diffTime % 86400 / 3600),
        min = parseInt(diffTime % 86400 % 3600 / 60),
        sec = parseInt(diffTime % 86400 % 3600 % 60);
      dynamic.day = app.timeFormat(day)
      dynamic.hou = app.timeFormat(hou)
      dynamic.min = app.timeFormat(min)
      dynamic.sec = app.timeFormat(sec)

      // 渲染，然后每隔一秒执行一次倒计时函数
      app.setData({
        dynamic
      })
      // 判断倒计时是否结束
      const isEnd = app.isEnd()
      // 结束后执行回调函数
      if (isEnd) {
        deep > 0 && app.triggerEvent('finish')
      }
      // 重复执行
      if (!isEnd) {
        setTimeout(() => {
          app.onTime(++deep)
        }, 1000)
      }
    },

    // 判断倒计时是否结束
    isEnd() {
      const {
        dynamic
      } = this.data
      if (dynamic.day == '00' && dynamic.hou == '00' && dynamic.min == '00' && dynamic.sec == '00') {
        return true
      }
      return false
    },

    /**
     * 小于10的格式化函数
     */
    timeFormat(value) {
      return value < 10 ? '0' + value : value
    }



  }
})