实现重发验证码的等待时间不随页面刷新关闭消失,真正的做到

我们可以用到 cookie ,把发送验证码的倒计时写入到cookie 里面,每次在页面初始化的时候都读取有就获取没有就写入

const currentTime = 60 //默认等待的时间
export default {

  data() {
    return {
      code: '', // 验证码
      time: currentTime, // 剩余时间
      timer: null // 定时器
    }
  },
  mounted() {
    // 获取cookie的验证码时间
    this.getCodeHasTime()
  },
  methods: {
    // 发送验证码的方法
    async gotoSendCode() {
      // 设置时间
      this.setTimeCookie()
      // 请求验证码
      // TODO
    },
    // 获取最新的cookie的时间
    getCodeTime() {
      const oldTime = Cookies.get('codeTime')
      if (oldTime) {
        const remainTime =
          currentTime -
          new Date(escape(new Date().getTime()) - oldTime).getSeconds()
        this.setTimer(remainTime)
      }
    },
    setTimeCookie() {
      Cookies.set(`codeTime`, escape(new Date().getTime()), {
        expires: (currentTime * 1) / (24 * 60 * 60),
        domain: '.jdcloud.com'
      })
      Cookies.set(`codeTime`, escape(new Date().getTime()), {
        expires: (currentTime * 1) / (24 * 60 * 60),
        domain: '.jcloud.com'
      })
      this.setTimer(currentTime)
    },
    setTimer(val) {
      this.time = val
      this.isSendCode = true
      this.timer = setInterval(() => {
        if (this.time > 0) {
          this.time--
        } else {
          clearInterval(this.timer)
          this.time = currentTime
          this.isSendCode = false
        }
      }, 1000)
    }
  }
}

 

posted @ 2020-04-02 17:18  我爱小番茄  阅读(614)  评论(0编辑  收藏  举报
2 3
4