Phone.js

/*
 * @Title:
 * @Author: hongmye
 * @Date: 2024-11-29 13:34:32
 */
import { Form } from 'antd';
import React from 'react';
import LoginForm from '../../../components/Login';
import LoginMessage from '../../../js/loginMessage';
import phoneIcon from './images/ls_phone.png';
import passIcon from './images/ls-pwd.png';
import styles from './index.less';

const { Mobile, Captcha, Submit } = LoginForm;

const usePhone = props => {
  const [form] = Form.useForm();
  return (
    <LoginForm form={form} onSubmit={props.onSubmit} welcome={props.welcome}>
      {props.status === 'error' && props.type === 'account' && !props.submitting && (
        <LoginMessage content="手机号码未注册" />
      )}
      <Mobile name="mobile" placeholder="请输入手机号码" prefix={<img src={phoneIcon} width={15} alt="" />} />
      <Captcha
        name="captcha"
        placeholder="请输入短信验证码"
        countDown={60}
        getCaptchaButtonText=""
        getCaptchaSecondText="秒"
        autoComplete="off"
        prefix={<img src={passIcon} width={15} alt="" />}
        rules={[
          {
            required: true,
            message: '请输入短信验证码！',
          },
        ]}
      />
      <Submit className={styles.submitBtn} loading={props.submitting} style={{ marginTop: '0px' }}>
        登录
      </Submit>
    </LoginForm>
  );
};
export default usePhone;