index.jsx

import {
  AlipayCircleOutlined,
  LockOutlined,
  MobileOutlined,
  TaobaoCircleOutlined,
  UserOutlined,
  ArrowLeftOutlined,
} from '@ant-design/icons';
import {
  LoginForm,
  ProFormCaptcha,
  ProFormCheckbox,
  ProFormText,
  ProConfigProvider,
} from '@ant-design/pro-components';
import { message, Space, Button } from 'antd';
import { useState } from 'react';
import './index.less';
import { history } from '@umijs/max';
import { postFetch,getFetch } from '@/utils/doFetch';


export default () => {
  const [loginType, setLoginType] = useState('account');
  const [login, setlogin] = useState(false);

  return (
    <div className="bg">
      <ul className="circles">
        {new Array(10).fill('').map((it) => (
          <li key={it} />
        ))}
      </ul>
      <div style={{ position: 'absolute', width: '100%', zIndex: 99999 }}>
        {login ? (
          <LoginForm
            logo="./logo.png"
            subTitle={
              <>
                <p style={{ fontSize: 17, marginBottom: 0 }}>
                  <b>江苏南高智能装备创新中心有限公司</b>
                </p>
                <p style={{ fontSize: 12, zoom: 0.8, margin: 0 }}>
                  Jiangsu Nangao Intelligent Equipment Innovation Center Co.,
                  Ltd.
                </p>
              </>
            }
            onFinish={(values) => {
              postFetch({
                url: `/token/oauth/token?grant_type=password&client_id=admin&client_secret=123456&username=${values?.username}&password=${values?.password}`,
              }).then((res) => {
                let token = res?.access_token;
                localStorage.setItem('TOKENES', token);
                message.success('🎉 🎉 🎉  登录成功！');
                history.push('/');
              });
            }}
          >
            {loginType === 'account' && (
              <>
                <ProFormText
                  name="username"
                  fieldProps={{
                    size: 'large',
                    prefix: <UserOutlined className={'prefixIcon'} />,
                  }}
                  placeholder={'用户名: admin or user'}
                  rules={[
                    {
                      required: true,
                      message: '请输入用户名!',
                    },
                  ]}
                />
                <ProFormText.Password
                  name="password"
                  fieldProps={{
                    size: 'large',
                    prefix: <LockOutlined className={'prefixIcon'} />,
                  }}
                  placeholder={'密码: 123'}
                  rules={[
                    {
                      required: true,
                      message: '请输入密码！',
                    },
                  ]}
                />
                <div
                  style={{
                    marginBlockEnd: 24,
                  }}
                >
                  <ProFormCheckbox noStyle name="autoLogin">
                    自动登录
                  </ProFormCheckbox>
                  <a
                    style={{
                      float: 'right',
                    }}
                    onClick={() => {
                      setLoginType('phone');
                    }}
                  >
                    忘记密码
                  </a>
                </div>
              </>
            )}
            {loginType === 'phone' && (
              <>
                <ArrowLeftOutlined
                  style={{
                    fontSize: 20,
                    marginBottom: 12,
                    position: 'fixed',
                    left: 36,
                    top: 36,
                    zIndex: 99999,
                  }}
                  onClick={() => {
                    setLoginType('account');
                  }}
                />
                <ProFormText.Password
                  name="confirmpassword"
                  fieldProps={{
                    size: 'large',
                    prefix: <LockOutlined className={'prefixIcon'} />,
                  }}
                  placeholder={'密码'}
                  rules={[
                    {
                      required: true,
                      message: '请输入密码！',
                    },
                  ]}
                />
                <ProFormText.Password
                  name="password"
                  fieldProps={{
                    size: 'large',
                    prefix: <LockOutlined className={'prefixIcon'} />,
                  }}
                  placeholder={'确认密码'}
                  rules={[
                    {
                      required: true,
                      message: '请输入确认密码！',
                    },
                  ]}
                />
              </>
            )}
          </LoginForm>
        ) : (
          <div className="nologin">
            <img src="./logo.png" alt="" />
            <h2>欢迎</h2>
            <>
              <p style={{ fontSize: 17, marginBottom: 0 }}>
                <b>江苏南高智能装备创新中心有限公司</b>
              </p>
              <p style={{ fontSize: 12, zoom: 0.8, margin: 0 }}>
                Jiangsu Nangao Intelligent Equipment Innovation Center Co., Ltd.
              </p>
            </>
            <Button type="primary" style={{width:"278px",marginTop:36}} size='large' onClick={()=>{
              setlogin(true)
            }}>登录</Button>
          </div>
        )}
      </div>
    </div>
  );
};