LOCKING-box/src/pages/login/index.tsx

import React, { useState } from 'react';
import { Input, Button, Form } from 'antd';
import styles from './login.less';
import { history, useModel } from 'umi';
import { MobileFilled, LockFilled } from '@ant-design/icons';
import css from 'classnames';
import { useCallback } from 'react';
import { useEffect } from 'react';
import { login } from '@/services/user';
import { handleRequest } from '@/utils/tool';

export default function Login() {
  const [errText, setErrText] = useState('');
  const [account, setAccount] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const { refresh } = useModel('@@initialState');
  // const { loading, signin } = useModel('useAuthModel');

  const onLogin = useCallback(async () => {
    if (!account) {
      setErrText('账号/手机号不能为空');
      return;
    }
    if (!password) {
      setErrText('密码不能为空');
      return;
    }
    setLoading(true);
    const res = await login(account, password);
    setLoading(false);
    handleRequest(res)
      .error(() => {
        setErrText(res.message!);
      })
      .success(() => {
        // history.push('/');
        // window.location.href = '/';
        history.replace('/');
        refresh();
        // window.location.reload();
      });
  }, [account, password]);

  useEffect(() => {
    setErrText('');
  }, [account, password]);

  return (
    <div className={styles.login}>
      <div className={styles.title}>
        <div>欢迎使用</div>
        <div>locking</div>
      </div>
      <Form className={styles.form}>
        <Input
          size="large"
          prefix={<MobileFilled className={styles.icon} />}
          disabled={loading}
          className={styles.mb24}
          value={account}
          onChange={(e) => setAccount(e.target.value)}
        />
        <Input
          size="large"
          prefix={<LockFilled className={styles.icon} />}
          type="password"
          disabled={loading}
          className={styles.mb4}
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <div className={styles.errText}>{errText}</div>
        <Button
          loading={loading}
          type="primary"
          block
          onClick={onLogin}
          htmlType="submit"
        >
          登录
        </Button>
      </Form>
    </div>
  );
}