hlm_pl_mall_h5/pages/CountDown.vue

<template>
    <view class="div common-count-down">
        <text class="span" v-if="!styletype"><text class="span" :class="{'time':ifTimeBlock}">{{ day }}</text>&nbsp;天&nbsp;</text><text class="span" :class="{'time':ifTimeBlock}">{{ hours }}</text><text class="span" v-if="!styletype">&nbsp;时&nbsp;</text><text class="span" v-else>:</text><text class="span" :class="{'time':ifTimeBlock}">{{ minute }}</text><text class="span" v-if="!styletype">&nbsp;分&nbsp;</text><text class="span" v-else>:</text><text class="span" :class="{'time':ifTimeBlock}">{{ second }}</text><text class="span" v-if="!styletype">&nbsp;秒</text>
    </view>
</template>

<script>

export default {
  name: 'CountDown',
  data () {
    return {
      flag: false,
      day: '',
      hours: '',
      minute: '',
      second: '',
      time: ''
    }
  },
  props: {
    timesurplus: {},
    timelimithour: {},
    timetype: {},
    styletype:{},
	ifTimeBlock:{}
  },
  mounted () {
    this.time = setInterval(() => {
      if (this.flag == true) {
        clearInterval(this.time)
      } else {
        this.timeDown()
      }
    }, 1000)
  },
  methods: {
    timeDown () {
      let leftTime = 0
      if (this.timetype == 1) {
        leftTime = parseInt(this.timesurplus / 1000)
      } else if (this.timetype == 2) {
        leftTime = parseInt((this.timesurplus * 1000 + this.timelimithour * 60 * 60 * 1000 - new Date().getTime()) / 1000)
      }
      if(!this.styletype){
          this.day = parseInt(leftTime / (24 * 60 * 60))
      }

      this.hours = this.formate(parseInt((leftTime / (60 * 60)) % 24))
      this.minute = this.formate(parseInt((leftTime / 60) % 60))
      this.second = this.formate(parseInt(leftTime % 60))
      if (leftTime <= 0) {
        this.flag = true
        this.$emit('time-end')
      }
    },
    /*
             * 格式化时间
             */
    formate (time) {
      if (time >= 10) {
        return time
      } else {
        return `0${time}`
      }
    }
  }
}
</script>
<style scoped lang='scss'>
.common-count-down{
    font-size:$fontSize;color:#999;
}
.common-count-down .time  {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 2px;
	background-color: #303133;
	color: #FFFFFF;
	text-align: center;
	margin: 0 3px;
}
</style>