captain-ui/lib/countdown/index.vue.js

有赞vue wap业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _default2 = {
  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(), _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))]), _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))])])], 2);
  },
  name: 'cap-countdown',
  props: {
    // 时间戳 or 日期对象
    start: [Date, Number],
    end: [Date, Number],
    preventInit: {
      type: Boolean,
      default: false
    },
    hideZeroDay: {
      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'
    }
  },
  data: function data() {
    return {
      now: null,
      ended: false,
      started: false,
      countdown: (0, _extends2.default)({}, this.defaultCountdown),
      timer: null
    };
  },
  computed: {
    hasDay: function hasDay() {
      return this.countdown.day !== 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);
    },
    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);
    }
  },
  watch: {
    now: function now() {
      this.updateCountdown();
    },
    countdown: function countdown(val) {
      this.$emit('timechange', val);
    }
  },
  created: function created() {
    var _this = this;

    if (this.preventInit) return;
    this.now = new Date();
    this.timer = setInterval(function () {
      _this.now = new Date(_this.now.getTime() + 1000);
    }, 1000);
  },
  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];
    },
    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 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
      };
    },
    setCountdownOver: function setCountdownOver() {
      clearInterval(this.timer);
      this.ended = true;
      this.countdown = this.defaultCountdown;
      this.$emit('countdown-ended');
    }
  }
};
exports.default = _default2;