h5-Dooring/src/pages/login/index.tsx

import { Form, Input, Button, Popover } from 'antd';
import React from 'react';
import req from '@/utils/req';
import { history } from 'umi';
import styles from './index.less';

interface FormValues {
  n: string;
  co: string;
}

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

const tailLayout = {
  wrapperCol: { offset: 6, span: 16 },
};

const content = (
  <>
    <div style={{ textAlign: 'center' }}>
      <img
        style={{ width: '180px' }}
        src="http://cdn.dooring.cn/dr/qtqd_code.png"
        alt="趣谈前端-徐小夕"
      />
    </div>
    <p style={{ width: '240px' }}>扫描上方二维码，关注【趣谈前端】公众号，回复"登录码" 即可获取</p>
  </>
);

const Login = () => {
  const onFinish = (values: FormValues) => {
    const { n, co } = values;
    req.post('/vip/check', { n, co }).then((res: any) => {
      localStorage.setItem('nickname', res.n);
      localStorage.setItem('h5', JSON.stringify(res.h5));
      history.push('/');
    });
  };

  return (
    <div className={styles.loginWrap}>
      <Form
        {...layout}
        name="login"
        className={styles.formWrap}
        initialValues={{ remember: true }}
        onFinish={onFinish}
      >
        <div className={styles.tit}>
          Dooring开放平台
          <span style={{ marginLeft: '20px', fontSize: '18px', color: '#06c' }}>登录</span>
        </div>
        <Form.Item label="用户名" name="n" rules={[{ required: true, message: '请输入用户名!' }]}>
          <Input />
        </Form.Item>

        <Form.Item label="密码" name="co" rules={[{ required: true, message: '请输入密码!' }]}>
          <Input.Password />
        </Form.Item>

        <div style={{ margin: '-16px 0 12px 116px' }}>
          <Popover placement="topLeft" content={content} trigger="click">
            <Button type="link">如何获取登录码？</Button>
          </Popover>
        </div>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit" block>
            登录
          </Button>
        </Form.Item>
        <div className={styles.safeWrap}>
          登录后即代表您已经遵循
          <Button type="link">《Dooring平台使用安全声明》</Button>
        </div>
      </Form>
    </div>
  );
};

export default Login;