yunshangxie/tuniao-ui/components/tn-verification-code/tn-verification-code.vue

<template>
  <view class="tn-code-class tn-code">
    
  </view>
</template>

<script>
  export default {
    name: 'tn-verification-code',
    props: {
      // 倒计时总秒数
      seconds: {
        type: Number,
        default: 60
      },
      // 开始时提示文字
      startText: {
        type: String,
        default: '获取验证码'
      },
      // 倒计时提示文字
      countDownText: {
        type: String,
        default: 's秒后重新获取'
      },
      // 结束时提示文字
      endText: {
        type: String,
        default: '重新获取'
      },
      // 是否在H5刷新或各端返回再进入时继续倒计时
      keepRunning: {
      	type: Boolean,
      	default: false
      },
      // 为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
      uniqueKey: {
      	type: String,
      	default: ''
      }
    },
    data() {
      return {
        timer: null,
        secNum: this.seconds,
        // 是否可以执行验证码操作
        canGetCode: true
      }
    },
    watch: {
      seconds: {
        handler(n) {
          this.secNum = n
        },
        immediate: true
      }
    },
    mounted() {
      this.checkKeepRunning()
    },
    beforeDestroy() {
      this.setTimeToStorage()
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    methods: {
      // 检查是否继续运行
      checkKeepRunning() {
        // 获取上一次退出页面时的时间戳，如果没有上次保存，该值为空
        let lastTimestamp = Number(uni.getStorageSync(this.uniqueKey + '_$tCountDownTimestamp'))
        if (!lastTimestamp) return this.changeEvent(this.startText)
        // 当前秒的时间戳
        // + new Date() 相当于 new Date().getTime()
        let nowTimestamp = Math.floor((+ new Date()) / 1000)
        // 判断当前的时间戳，是否小于上一次的设定结束的时间，提前于结束的时间戳
        if (this.keepRunning && lastTimestamp && lastTimestamp > nowTimestamp) {
          // 剩余尚未执行完倒计时秒数
          this.secNum = lastTimestamp - nowTimestamp
          // 清除本地保存的变量
          uni.removeStorageSync(this.uniqueKey + '_$tCountDownTimestamp')
          // 开始倒计时
          this.start()
        } else {
          // 如果不存在需要继续上一次的倒计时，执行正常的逻辑
          this.changeEvent(this.startText);
        }
      },
      // 开始倒计时
      start() {
        // 防止快速点击获取验证码按钮导致产生多个定时器导致混乱
        if (this.timer) {
          clearInterval(this.timer)
          this.timer = null
        }
        this.$emit('start')
        this.canGetCode = false
        
        this.changeEvent(this.countDownText.replace(/s|S/, this.secNum))
        this.setTimeToStorage()
        this.timer = setInterval(() => {
          if (--this.secNum) {
            this.changeEvent(this.countDownText.replace(/s|S/, this.secNum))
          } else {
            // 倒计时结束，清空定时器、重置提示信息
            this.reset()
            this.$emit('end')
          }
        }, 1000)
      },
      // 重置倒计时
      reset() {
        this.canGetCode = true
        if (this.timer) {
          clearInterval(this.timer)
          this.timer = null
        }
        this.secNum = this.seconds
        this.changeEvent(this.endText)
      },
      // 倒计时改变事件
      changeEvent(text) {
        this.$emit('change', text)
      },
      // 保存当前时间戳
      // 防止倒计时尚未结束，H5刷新或者各端的右上角返回上一页再进来
      setTimeToStorage() {
        if (!this.keepRunning ||!this.timer) return
        // 记录当前的时间戳，为了下次进入页面，如果还在倒计时内的话，继续倒计时
        // 倒计时尚未结束，结果大于0；倒计时已经开始，就会小于初始值，如果等于初始值，说明没有开始倒计时，无需处理
        if (this.secNum > 0 && this.secNum <= this.seconds) {
          let nowTimestamp = Math.floor((+ new Date()) / 1000)
          // 保存本次倒计时结束时候的时间戳
          uni.setStorageSync(this.uniqueKey + '_$tCountDownTimestamp', nowTimestamp + this.secNum)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tn-code {
    width: 0;
    height: 0;
    position: fixed;
    z-index: -1;
  }
</style>