CInputPhoneCode 手机验证码输入框组件

功能说明

CInputPhoneCode 是一个手机验证码输入框组件，集成了验证码输入框和获取验证码按钮。按钮具有倒计时功能，防止用户频繁获取验证码。

引用方式

import { CInputPhoneCode } from '@components/forms/input';

组件参数

• itemRes (Object，必填)：表单数据资源对象，表单组件内部机制专用
• placeholder (String，可选)：输入框占位提示文本
• autoStart (Boolean，可选)：验证码计时器开始方式，默认为 true
• true：点击按钮后立即自动开始倒计时
• false：后台返回成功时才开始倒计时
• onCallPhoneCode (Function，必填)：发送请求，通知后端给手机发送验证码的回调函数
• onRefreshCD (Function，可选)：刷新倒计时后，通知父组件更新图片地址的回调函数

实例方法

• $resetHolding：重置按钮的禁用状态，使按钮可以再次点击

使用示例

基础用法

<template>
  <CForm :form="form">
    <CFormItem name="phone" label="手机号">
      <CInput type="phone" placeholder="请输入手机号" />
    </CFormItem>
    <CFormItem name="code" label="验证码">
      <CInputPhoneCode 
        placeholder="请输入验证码" 
        :onCallPhoneCode="handleSendCode" 
      />
    </CFormItem>
  </CForm>
</template>

<script>
import { CForm, CFormItem } from '@components/forms/form';
import { CInput, CInputPhoneCode } from '@components/forms/input';

export default {
  components: {
    CForm,
    CFormItem,
    CInput,
    CInputPhoneCode
  },
  data() {
    return {
      form: {
        phone: '',
        code: ''
      }
    };
  },
  methods: {
    handleSendCode(callback) {
      // 验证手机号
      if (!this.form.phone) {
        this.$toast('请先输入手机号');
        return;
      }
      
      // 发送验证码请求
      this.$api.sendSmsCode({
        phone: this.form.phone
      }).then(() => {
        this.$toast('验证码已发送');
        callback(); // 如果 autoStart 为 false，需要调用回调函数开始倒计时
      }).catch(err => {
        this.$toast(err.message || '发送失败');
      });
    }
  }
};
</script>

手动控制倒计时

<CInputPhoneCode 
  placeholder="请输入验证码" 
  :autoStart="false"
  :onCallPhoneCode="handleSendCode" 
  ref="phoneCode"
/>

// 在需要重置倒计时的地方调用
this.$refs.phoneCode.$resetHolding();

注意事项

1. 组件内部包含一个 60 秒的倒计时，在倒计时结束前，获取验证码按钮将处于禁用状态
2. 当 autoStart 设置为 false 时，需要在 onCallPhoneCode 回调函数中手动调用传入的回调函数来开始倒计时
3. 通常需要在 onCallPhoneCode 回调中验证手机号是否有效，再决定是否发送验证码请求
4. 可以通过 $resetHolding 方法手动重置按钮状态，适用于特殊情况下需要提前结束倒计时的场景