点击获取验证码，进行60秒倒计时

效果：

 相关代码：

<template>
  <div class="get-verification-code" :class="{ disabled: isDisabled }" @click="handleClick">
    {{ buttonText }}
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      buttonText: "获取验证码",
      isDisabled: false,
      countdownSeconds: 60,
      timer: null
    };
  },
  methods: {
    handleClick() {
      if (!this.isDisabled) {
        // 构造GET请求的URL，替换参数phone
        const url = "xxxxxxxxxxxxxxxxxxxxx"; // 替换为你的URL

        // 发送GET请求
        axios
          .get(url)
          .then((response) => {
            // 请求成功处理逻辑
            console.log(response.data);
            if (response.data.code === 200) {
              const msg = response.data.msg;
              console.log(response.data.msg);
              this.$modal.msgSuccess(msg);
              this.startCountdown();
            } else {
              const msg = response.data.msg;
              console.log(response.data.msg);
              this.$modal.msgSuccess(msg);
              this.buttonText = "重新获取";
            }
          })
          .catch((error) => {
            // 请求失败处理逻辑
            console.error("获取验证码失败", error);
            this.$message.error("获取验证码失败");
            this.buttonText = "重新获取";
          });
      }
    },
    startCountdown() {
      this.isDisabled = true;
      this.countdownSeconds = 60;

      this.timer = setInterval(() => {
        this.countdownSeconds--;
        if (this.countdownSeconds <= 0) {
          clearInterval(this.timer);
          this.buttonText = "获取验证码";
          this.isDisabled = false;
        } else {
          this.buttonText = `${this.countdownSeconds}s`;
        }
      }, 1000);
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>