pay-admin/src/common/pages/MyLoginPage1.tsx

import { Apis } from '@/gen/Apis';
import {
  FieldTimeOutlined,
  LockOutlined,
  UserOutlined,
} from '@ant-design/icons';
import {
  LoginFormPage,
  ProConfigProvider,
  ProFormText,
} from '@ant-design/pro-components';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { stateActions } from '..';

export function MyLoginPage1() {
  const navigate = useNavigate();
  const [getCaptcha, setCaptcha] = useState<any>({});
  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',
        }}
      >
        <LoginFormPage<ApiTypes.Common.Auth.Login>
          title="欢迎使用后台管理系统"
          backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"
          subTitle="Admin management system"
          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 2px',
                  margin: '0 10px',
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  borderRadius: '3px',
                  cursor: 'pointer',
                }}
                onClick={() => {
                  methods?.getCaptcha();
                }}
              >
                <img height={32} width={100} src={getCaptcha?.img} />
              </div>
            </div>
          </>
        </LoginFormPage>
      </div>
    </ProConfigProvider>
  );
}