pay-company/src/common/pages/MyLoginPage.tsx

import { Apis } from '@/gen/Apis';
import {
  FieldTimeOutlined,
  LockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {
  LoginFormPage,
  ProConfigProvider,
  ProFormText,
} from '@ant-design/pro-components';
import { theme } from 'antd';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { stateActions } from '..';
import gcLogo from './gclogo.png';
import logingBg from './loginBgImg.jpg';

export function MyLoginPage() {
  const navigate = useNavigate();
  const [getCaptcha, setCaptcha] = useState<any>({});
  const { token } = theme.useToken();

  const methods = {
    getCaptcha: () => {
      Apis.Common.Auth.Captcha().then(async (res) => {
        setCaptcha(res?.data);
        console.log(res, 'res');
      });
    },
  };
  useEffect(() => {
    methods?.getCaptcha();
  }, []);
  return (
    <ProConfigProvider>
      <div
        style={{
          // backgroundColor: '#f8f8f8',
          height: '100vh',
          position: 'relative',
        }}
      >
        <LoginFormPage<ApiTypes.Common.Auth.Login>
          title={
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <img src={gcLogo} style={{ height: 30, width: 'auto' }} />
              <span style={{ color: '#b1b1b1ff', fontSize: 20 }}>|</span>
              <span style={{ color: token.colorTextBase, fontSize: 21 }}>
                智慧物业管理系统
              </span>
            </div>
          }
          backgroundImageUrl={logingBg}
          subTitle=" "
          submitter={{ searchConfig: { submitText: '登录' } }}
          onFinish={async (values: any) => {
            Apis.Common.Auth.Login({
              ...values,
              ...{ captcha_key: getCaptcha?.key },
            })
              .then(async (res) => {
                await stateActions.setLogin(res);
                navigate('/');
              })
              .catch((err: any) => {
                methods?.getCaptcha();
                console.log(err, 'rr');
              });
          }}
        >
          <>
            <ProFormText
              name="username"
              fieldProps={{
                size: 'large',
                prefix: <UserOutlined className={'prefixIcon'} />,
              }}
              placeholder={'请输入手机号码'}
              rules={[
                {
                  required: true,
                  message: '请输入手机号码!',
                },
              ]}
            />
            <ProFormText.Password
              name="password"
              fieldProps={{
                size: 'large',
                prefix: <LockOutlined className={'prefixIcon'} />,
              }}
              placeholder={'请输入密码'}
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            />
          </>
          <div style={{ display: 'flex' }}>
            <ProFormText
              name="captcha"
              fieldProps={{
                size: 'large',
                prefix: <FieldTimeOutlined className={'prefixIcon'} />,
              }}
              placeholder={'验证码'}
              rules={[
                {
                  required: true,
                  message: '请输入验证码!',
                },
              ]}
            />

            <div
              style={{
                height: '40px',
                border: '1px solid #eee',
                padding: '0 4px',
                marginLeft: 8,
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                borderRadius: '3px',
                cursor: 'pointer',
              }}
              onClick={() => {
                methods?.getCaptcha();
              }}
            >
              <img height={32} width={100} src={getCaptcha?.img} />
            </div>
          </div>
          {/* <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              // marginTop: 12,
            }}
          >
            <ProFormCheckbox name="autoLogin">记住账号</ProFormCheckbox>
            <a>忘记密码</a>
          </div> */}
        </LoginFormPage>
      </div>
    </ProConfigProvider>
  );
}