其他登录方式部分
LoginForm的actions属性
actions={[ <FormattedMessage key="loginWith" id="pages.login.loginWith" defaultMessage="其他登录方式" />, <AlipayCircleOutlined key="AlipayCircleOutlined" className={styles.icon} />, <TaobaoCircleOutlined key="TaobaoCircleOutlined" className={styles.icon} />, <WeiboCircleOutlined key="WeiboCircleOutlined" className={styles.icon} />, ]}
手机号登录部分
jsx部分 选项部分 LoginForm > Tabs > Tabs.TabPane
<Tabs.TabPane key="mobile" tab={intl.formatMessage({ id: 'pages.login.phoneLogin.tab', defaultMessage: '手机号登录', })} />
卡部分 LoginForm > 表达式
{status === 'error' && loginType === 'mobile' && <LoginMessage content="验证码错误" />} {type === 'mobile' && ( <> <ProFormText fieldProps={{ size: 'large', prefix: <MobileOutlined className={styles.prefixIcon} />, }} name="mobile" placeholder={intl.formatMessage({ id: 'pages.login.phoneNumber.placeholder', defaultMessage: '手机号', })} rules={[ { required: true, message: ( <FormattedMessage id="pages.login.phoneNumber.required" defaultMessage="请输入手机号！" /> ), }, { pattern: /^1\d{10}$/, message: ( <FormattedMessage id="pages.login.phoneNumber.invalid" defaultMessage="手机号格式错误！" /> ), }, ]} /> <ProFormCaptcha fieldProps={{ size: 'large', prefix: <LockOutlined 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="captcha" rules={[ { required: true, message: ( <FormattedMessage id="pages.login.captcha.required" defaultMessage="请输入验证码！" /> ), }, ]} onGetCaptcha={async (phone) => { const result = await getFakeCaptcha({ phone, }); if (result === false) { return; } message.success('获取验证码成功！验证码为：1234'); }} /> </> )}
