data-room/data-room-ui/packages/BasicComponents/TimeCountDown/index.vue

<template>
  <div
    class="bs-design-wrap"
    :class="`bs-time-count-down-${customTheme}`"
  >
    <span
      v-if="isPast"
      style="color: #ea0b30"
    >(已过期)</span>
    <div
      :class="[
        'time',
        {
          'light-theme': customTheme === 'light',
          'auto-theme': customTheme == 'auto',
          'dark-theme': customTheme == 'dark'
        }
      ]"
      class="time-text-box"
      :style="
        'font-size:' +
          config.customize.fontSize +
          'px;color:' +
          config.customize.color +
          ';font-weight:' +
          config.customize.fontWeight +
          ';font-family:' +
          config.customize.fontFamily
      "
    >
      {{ dateDiff }}
    </div>
  </div>
</template>

<script>
import paramsMixins from 'data-room-ui/js/mixins/paramsMixins'
import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
import cloneDeep from 'lodash/cloneDeep'
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'TimeCountDown',
  mixins: [paramsMixins],
  props: {
    config: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      timer: '',
      allTime: 0,
      date: '',
      time: new Date().getTime()
    }
  },
  computed: {
    ...mapState({
      customTheme: state => state.bigScreen.pageInfo.pageConfig.customTheme,
      activeCode: state => state.bigScreen.activeCode
    }),
    isPast: {
      get () {
        if (new Date(this.config.endTime).getTime() - this.time < 0) {
          return true
        } else {
          return false
        }
      }
    },
    dateDiff: {
      // eslint-disable-next-line vue/return-in-computed-property
      get () {
        if (this.config.endTime) {
          return this.dateFormat(
            new Date(this.config.endTime).getTime() - this.time
          )
        }
      },
      set (val) {
        this.allTime = val
      }
    }
  },
  watch: {
    'config.endTime': {
      handler () {
        this.getTime()
      },
      immediate: true
    }
  },
  mounted () {
    this.changeStyle()
  },
  // 销毁定时器
  destroyed () {
    if (this.timer) {
      clearInterval(this.timer) // 关闭
    }
  },

  methods: {
    ...mapMutations({
      changeChartConfig: 'bigScreen/changeChartConfig',
      changeActiveItemConfig: 'bigScreen/changeActiveItemConfig'
    }),
    changeStyle (config) {
      this.config.endTime = this.config.endTime
        ? new Date(this.config.endTime).getTime()
        : new Date().getTime() + 3 * 3600 * 1000 * 24 - 1000
      this.getTime()
      config = { ...this.config, ...config }
      // 样式改变时更新主题配置
      config.theme = settingToTheme(cloneDeep(config), this.customTheme)
      this.changeChartConfig(config)
      if (this.config.code === this.activeCode) {
        this.changeActiveItemConfig(config)
      }
    },
    getTime () {
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.timer = setInterval(() => {
        this.time = this.time + 1000
        if (this.dateDiff <= 0) {
          clearInterval(this.timer)
        }
      }, 1000)
    },
    // 格式化时间
    dateFormat (dateDiff) {
      if (dateDiff < 0) {
        dateDiff = -dateDiff
      }
      const dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)) // 计算出相差天数
      const leave1 = dateDiff % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
      const hours = Math.floor(leave1 / (3600 * 1000)) // 计算出小时数
      // 计算相差分钟数
      const leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
      const minutes = Math.floor(leave2 / (60 * 1000)) // 计算相差分钟数
      // 计算相差秒数
      const leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
      const seconds = Math.round(leave3 / 1000)
      // const leave4=leave3%(60*1000)      //计算分钟数后剩余的毫秒数
      // const minseconds=Math.round(leave4/1000)
      const timeFn =
        dayDiff +
        ' 天 ' +
        hours +
        ' 小时 ' +
        minutes +
        ' 分钟 ' +
        seconds +
        ' 秒'
      return timeFn
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../BasicComponents/fonts/index.css";
@import "../../assets/fonts/numberFont/stylesheet.css";
.bs-design-wrap{
  width: 100%;
}
.time {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
.light-theme {
  background-color: #ffffff;
  color: #000000;
}
.dark-theme {
  background-color: transparent;
  color: #ffffff;
}
.auto-theme {
  background-color: transparent;
  color: #000000;
}
.time-text-box{
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space:nowrap;
  box-sizing: border-box;
  overflow: hidden;
}
</style>