注册发送手机短信

**### 整体流程总结

用户点击"获取验证码"按钮触发 `sendSms` 函数
2. 2.
验证手机号格式和非空状态
3. 3.
禁用按钮并调用发送验证码API
4. 4.
启动倒计时（立即更新一次状态消除延迟）
5. 5.
倒计时结束后恢复按钮状态
6. 6.
异常情况下捕获错误并恢复按钮状态**

java 复制代码

      <el-form-item prop="phonenumber">
        <el-row :gutter="10">
          <el-col :span="16">
            <el-input
                v-model="registerForm.phonenumber"
                type="text"
                size="large"
                auto-complete="off"
                placeholder="手机号"
                style="width: 205px;"
            >
              <template #prefix><svg-icon icon-class="phone" class="el-input__icon input-icon" /></template>
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" size="large" @click="sendSms" :disabled="sendCodeDisabled" style="width: 120px;">{{ sendCodeText }}</el-button>
          </el-col>
        </el-row>
      </el-form-item>

java 复制代码

const sendSms = async () => {
  // 验证手机号
  if (!registerForm.value.phonenumber) {
    ElMessage.error('请输入手机号')
    return
  }
  if (!/^1[3-9]\d{9}$/.test(registerForm.value.phonenumber)) {
    ElMessage.error('请输入正确的手机号格式')
    return
  }
  try {
    // 禁用按钮
    sendCodeDisabled.value = true
    // 调用发送验证码API
    /* const response = await sendCode(registerForm.value.phonenumber) */
    ElMessage.success('验证码发送成功')

    // 开始倒计时
    // 立即更新一次状态，消除首次延迟
    countdown.value--;
    sendCodeText.value = `${countdown.value}秒后重新获取`;
    
    const timer = setInterval(() => {
     if (countdown.value <= 1) {
        clearInterval(timer)
        sendCodeText.value = '获取验证码'
        countdown.value = 60
        sendCodeDisabled.value = false
      } else {
        countdown.value--
        sendCodeText.value = `${countdown.value}秒后重新获取`
      }
    }, 1000)
  } catch (error) {
    ElMessage.error(error.msg || '验证码发送失败，请稍后重试')
    sendCodeDisabled.value = false
  }

2.2 发送验证码流程

禁用按钮防止重复点击： sendCodeDisabled.value = true

调用发送验证码API ：（当前代码注释掉，实际项目中需取消注释）

显示成功提示： ElMessage.success('验证码发送成功') 2.3 倒计时实现（解决首次延迟问题）

java 复制代码

// 立即更新状态，消除首次延迟
countdown.value--;
sendCodeText.value = `${countdown.value}秒后重新获取`;

// 启动定时器
const timer = setInterval(() => {
  if (countdown.value <= 1) {
    // 倒计时结束，重置状态
    clearInterval(timer)
    sendCodeText.value = '获取验证码'
    countdown.value = 60
    sendCodeDisabled.value = false
  } else {
    // 更新倒计时
    countdown.value--
    sendCodeText.value = `${countdown.value}秒后重新获取`
  }
}, 1000)

java 复制代码

const sendCodeDisabled = ref(false) // 控制按钮禁用状态
const countdown = ref(60) // 倒计时秒数
const sendCodeText = ref('获取验证码') // 按钮显示文本