captain-ui/es/countdown/src/main.js

有赞vue wap业务组件库

import _extends from "@babel/runtime/helpers/esm/extends";
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      class: ['cap-countdown', "cap-countdown--" + _vm.timeStyle]
    }, [_vm._t("default", [!_vm.hideZeroDay || _vm.hasDay ? [_c('span', {
      staticClass: "cap-countdown__day"
    }, [_vm._v(_vm._s(_vm.day))]), _c('span', {
      staticClass: "cap-countdown__time-text"
    }, [_vm._v(_vm._s(_vm.dayUnit))])] : _vm._e(), !_vm.hideZeroHour || _vm.hasHour ? [_c('span', {
      staticClass: "cap-countdown__hour"
    }, [_vm._v(_vm._s(_vm.hour))]), _c('span', {
      staticClass: "cap-countdown__time-text"
    }, [_vm._v(_vm._s(_vm.hourUnit))])] : _vm._e(), _c('span', {
      staticClass: "cap-countdown__minute"
    }, [_vm._v(_vm._s(_vm.minute))]), _c('span', {
      staticClass: "cap-countdown__time-text"
    }, [_vm._v(_vm._s(_vm.minuteUnit))]), _c('span', {
      staticClass: "cap-countdown__second"
    }, [_vm._v(_vm._s(_vm.second))]), _c('span', {
      staticClass: "cap-countdown__time-text"
    }, [_vm._v(_vm._s(_vm.secondUnit))]), _vm.supportMs ? [_c('span', {
      staticClass: "cap-countdown__ms"
    }, [_vm._v(_vm._s(_vm.ms))]), _c('span', {
      staticClass: "cap-countdown__time-text"
    }, [_vm._v(_vm._s(_vm.msUnit))])] : _vm._e()])], 2);
  },
  name: 'cap-countdown',
  props: {
    // 时间戳 or 日期对象
    start: [Date, Number],
    end: [Date, Number],
    preventInit: {
      type: Boolean,
      default: false
    },
    hideZeroDay: {
      type: Boolean,
      default: false
    },
    hideZeroHour: {
      type: Boolean,
      default: false
    },
    timeSeparator: {
      type: Array,
      default: function _default() {
        return [':', ':', ':', '', ''];
      }
    },
    defaultCountdown: {
      type: Object,
      default: function _default() {
        return {
          day: 0,
          hour: 0,
          minute: 0,
          second: 0
        };
      }
    },
    timeStyle: {
      type: String,
      default: 'black'
    },
    supportMs: {
      type: Boolean,
      default: false
    }
  },
  data: function data() {
    return {
      now: null,
      ended: false,
      started: false,
      countdown: _extends({}, this.defaultCountdown),
      timer: null
    };
  },
  computed: {
    hasDay: function hasDay() {
      return this.countdown.day !== 0;
    },
    hasHour: function hasHour() {
      return this.countdown.hour !== 0;
    },
    day: function day() {
      return this.leftPad(this.countdown.day);
    },
    hour: function hour() {
      return this.leftPad(this.countdown.hour);
    },
    minute: function minute() {
      return this.leftPad(this.countdown.minute);
    },
    second: function second() {
      return this.leftPad(this.countdown.second);
    },
    ms: function ms() {
      if (this.countdown.ms) {
        return this.leftPad(this.countdown.ms);
      }

      return '00';
    },
    dayUnit: function dayUnit() {
      return this.getUnit(0);
    },
    hourUnit: function hourUnit() {
      return this.getUnit(1);
    },
    minuteUnit: function minuteUnit() {
      return this.getUnit(2);
    },
    secondUnit: function secondUnit() {
      return this.getUnit(3);
    },
    msUnit: function msUnit() {
      return this.getUnit(4) || '';
    }
  },
  watch: {
    now: function now() {
      this.updateCountdown();
    },
    countdown: function countdown(val) {
      this.$emit('timechange', val);
    },
    start: function start() {
      this.initCountdown();
    },
    end: function end() {
      this.initCountdown();
    }
  },
  created: function created() {
    if (this.preventInit) return;
    this.initCountdown();
  },
  methods: {
    leftPad: function leftPad(num) {
      var intNum = +num;

      if (isNaN(intNum)) {
        return num;
      }

      return intNum > 9 ? intNum : "0" + intNum;
    },
    getUnit: function getUnit(index) {
      return this.timeSeparator[index];
    },
    initCountdown: function initCountdown() {
      var _this = this;

      if (this.timer) clearInterval(this.timer);
      var interval = this.supportMs ? 10 : 1000;
      this.now = new Date();
      this.timer = setInterval(function () {
        _this.now = new Date(_this.now.getTime() + interval);
      }, interval);
    },
    updateCountdown: function updateCountdown() {
      // 未开始
      if (this.now < this.start) {
        this.countdown = this.getCountdown(this.now, this.start); // 已开始
      } else if (this.now < this.end) {
        if (!this.started) {
          this.started = true;
          this.$emit('countdown-started');
        }

        this.countdown = this.getCountdown(this.now, this.end); // 已结束
      } else {
        this.setCountdownOver();
      }
    },
    getCountdown: function getCountdown(start, end) {
      var ms = parseInt((end - start) % 1000 / 10, 10);
      var remain = parseInt((end - start) / 1000, 10);
      var second = remain % 60;
      remain = parseInt(remain / 60, 10);
      var minute = remain % 60;
      remain = parseInt(remain / 60, 10);
      var hour = remain % 24;
      var day = parseInt(remain / 24, 10);
      return {
        day: day,
        hour: hour,
        minute: minute,
        second: second,
        ms: ms
      };
    },
    setCountdownOver: function setCountdownOver() {
      clearInterval(this.timer);
      this.ended = true;
      this.countdown = this.defaultCountdown;
      this.$emit('countdown-ended');
    }
  }
};