<ProFormCaptcha
fieldProps={{
size: 'large',
// prefix: <MailTwoTone className={styles.prefixIcon} />,
}}
captchaProps={{
size: 'large',
}}
placeholder={intl.formatMessage({
id: 'pages.login.captcha.placeholder',
defaultMessage: '请输入验证码',
})}
captchaTextRender={(timing, count) => {
if (timing) {
return `${count} ${intl.formatMessage({
id: 'pages.getCaptchaSecondText',
defaultMessage: '获取验证码',
})}`;
}
return intl.formatMessage({
id: 'pages.login.phoneLogin.getVerificationCode',
defaultMessage: '获取验证码',
});
}}
name="code"
rules={[
{
required: true,
message: (
<FormattedMessage
id="pages.login.captcha.required"
defaultMessage="请输入验证码!"
/>
),
},
]}
onGetCaptcha={async (values) => {
let params = {
staff:form.getFieldValue('staff'),
password:key2,
};
const result = await getCaptcha(params);
// console.log('获取到返回的验证码内容==',result);
if (result.code === '00') {
message.success('验证码已发送!');
return;
}else{
// console.log('用户名密码错误');
throw new Error("用户名密码错误");
}
}
// try{
// }catch (e) {
// message.error('获取验证码前台校验错误!');
// }
}}
/>
proform已经把获取验证码的组件进行了封装,但是刚开始使用的时候出现了一个问题。获取验证码的请求不管返回成功还是失败,timing总会变为true开始计时。实际需要在获取验证码请求返回的时候,验证码发送成功,需要开始timing为true,按钮置为灰色,开始倒计时。当验证码发送不成功时,timing为false。按钮可以继续点击,不显示倒计时。这就需要跑出一个异常,proform会捕捉这个异常,这样获取验证码的按钮就不会显示倒计时了。