CommunityApp/pagesM/comps/dt_timer.vue

<template>
  <view class="dt-timer">
    <view class="hours">{{hours}}</view>
    <view class="separator">{{separator}}</view>
    <view class="minutes">{{minutes}}</view>
  </view>
</template>
<script>
export default {
  props:{
    start:{
      type:String,
      default:''
    },
    separator:{
      type:String,
      default:':'
    }
  },
  data(){
    return {
      timer:null,
      hours:'00',
      minutes:'00'
    }
  },
  watch:{
    start(n,o){
      if(n){
        this.initTimer()
      }
    }
  },
  methods:{
    timeout(diffMinutes){
      if(diffMinutes<=0){
        clearTimeout(this.timer)
        this.timer = null
        // 倒计时结束
        this.$emit('timeover')
        return
      }
      let m = diffMinutes % 60
      let h = (diffMinutes - m) / 60
      
      this.hours = h<10?('0'+h):h
      this.minutes = m<10?('0'+m):m

      this.timer = setTimeout(()=>{
        diffMinutes = diffMinutes - 1
        console.log(51,diffMinutes)
        this.timeout(diffMinutes)
      },60000)
    },
    initTimer(){
      let startStr = this.start.substr(0,16)
      let expire = this.$util.createDate(startStr)
      let diffMills = expire.getTime() - (new Date().getTime())
      // console.log(58,diffMills)
      let diffSeconds = parseInt(diffMills / 1000)
      let diffMinutes = parseInt(diffSeconds / 60) + 1
      // diffMinutes 加 1 是因为有的接口返回的过期时间不包含秒数，故这里增加1分钟
      // 由接口处理"中间1分钟误差", 导致有可能出现的过期发起支付问题
      if(diffMills<=0){
        console.log('63 stop',diffMinutes,this.start)
        this.$emit('timeover')
      }else{
        console.log('63 start',diffMinutes,this.start)
        this.timeout(diffMinutes)
      }
    },
  },
  created(){
    if(this.start){
      this.initTimer()
    }
  },
  beforeDestroy() {
    if(this.timer){
      clearTimeout(this.timer)
      this.timer = null
      console.log('clearTimeout')
    }
  }
}
</script>

<style lang="scss">
.dt-timer{
  display:inline-flex;
}
</style>