SendVerificationCode.vue

<template>
  <div>
    <div class="sendCodeText" @click="sendCode" v-show="show">获取验证码</div>
    <div class="coutdDownText" v-show="!show"><span class="second">{{time}}s</span>后重新获取</div>
  </div>
</template>
<script>
import utils from "@/utils/";
export default {
  name: 'SendVerificationCode',
  props: {
    coutDownNumber: {
      type: Number,
      default: 60
    },
    phone: {
      type: [Number, String],
    },
    data: {
      type: Object
    }
  },
  data() {
    return {
      show: true,
      time: 60
    }
  },
  methods: {
    // 发送验证码
    sendCode() {
      // 判断手机号不能为空
      if (!this.phone) {
        Toast('请输入手机号')
        return
      }

      if (!utils.phoneRegCheck(this.phone)) {
        Toast("请输入正确的手机号码！");
        return
      }

      this.time = this.coutDownNumber
      this.show = false // 显示倒计时
      let timer = null;
      if (timer) {
        clearInterval(timer);
      }
      timer = setInterval(() => {
        console.log(this.time)
        if (this.time > 0 && this.time <= this.coutDownNumber) {

          this.time--;
        } else {
          this.show = true
          this.time = this.coutDownNumber
          clearInterval(timer);
          timer = null;
        }
      }, 1000);
    }
  }
}
</script>
<style lang="less" scoped>
.sendCodeText {
  color: #106abc;
}
.coutdDownText {
  color: #9c9c9c;
  font-size: 12px;
  .second {
    color: #106abc;
    font-size: 16px;
  }
}
</style>