kuailelunwen_new_houtai/src/components/PhoneCode.vue

<template>
    <div class="flex">
      <GuipInput
        ref="phoneNumber"
        width="277px"
        height="38px"
        placeholder="请输入手机号码"/>
      <GuipButton type="reverseMild" @click="sendCode" :btnstyle="{width:'99px',height:'38px'}" :disabled="isCounting">{{ countdownText }}</GuipButton>
    </div>
  </template>
   
  <script>
// import axios from 'axios';
import GuipButton from '@/components/GuipButton.vue';
import GuipInput from '@/components/GuipInput.vue';

  export default {
    data() {
      return {
        phoneValue: '',
        countdown: 60, // 倒计时时间（秒）
        isCounting: false, // 是否正在倒计时
      };
    },
    components: {
        GuipButton,
        GuipInput,
    },
    computed: {
      countdownText() {
        return this.isCounting ? `${this.countdown}秒后重试` : '获取验证码';
      }
    },
    methods: {
        async sendCode() {
            if (!/^1\d{10}$/.test(this.$refs.phoneNumber.inputValue)) {
                this.$message.warning('请输入有效的手机号码');
                return;
            }
            this.phoneValue = this.$refs.phoneNumber.inputValue;
            this.startCountdown();
            // 根据实际接口请求
            // try {
            //     const response = await axios.post('你的后端API地址', { phoneNumber: this.$refs.phoneNumber.value }); // 替换为实际API地址和参数名
            //     if (response.data.success) { // 根据后端返回的结构调整这里的判断条件
            //     alert('验证码已发送');
            //     this.startCountdown();
            //     } else {
            //     throw new Error(response.data.message || '发送失败'); // 使用后端返回的错误信息或者默认信息
            //     }
            // } catch (error) {
            //     console.error('发送验证码失败:', error); // 处理错误信息，可以在这里做更多的错误处理逻辑，比如重试机制等。
            //     alert('发送验证码失败，请稍后再试'); // 显示错误信息给用户。
            // }
        },
      startCountdown() {
        this.isCounting = true;
        const interval = setInterval(() => {
          this.countdown--;
          if (this.countdown <= 0) {
            clearInterval(interval);
            this.isCounting = false;
            this.countdown = 60; // 重置倒计时时间
          }
        }, 1000);
      }
    }
  };
  </script>

  <style lang="scss" scoped>
    .flex{
        display: flex;
        justify-content: space-between;
    }
    </style>