:update: 优化登录页面,优化操作按钮

src/pages/login/index.tsx

@@ -1,31 +1,41 @@
-import { Form, Input, Button } from 'antd';
-import http from '@/utils/req';
+import { Form, Input, Button, Popover } from 'antd';
+import React from 'react';
+import req from '@/utils/req';
+import CodeImg from '@/assets/code.png';
 import { history } from 'umi';
 import styles from './index.less';
-import React from 'react';
-import { ValidateErrorEntity, Store } from 'rc-field-form/lib/interface';
-import { RouteComponentProps } from 'react-router-dom';
+
+interface FormValues {
+  n: string;
+  co: string;
+}
+
 const layout = {
   labelCol: { span: 6 },
   wrapperCol: { span: 16 },
 };
+
 const tailLayout = {
   wrapperCol: { offset: 6, span: 16 },
 };
 
-const Login = (props: RouteComponentProps) => {
-  const onFinish = (values: Store) => {
-    http
-      .post<Store, { token: string }>('/login', { ...values })
-      .then(res => {
-        localStorage.setItem('token', res.token);
-        localStorage.setItem('user', values.username);
-        history.push('/');
-      });
-  };
+const content = (
+  <>
+    <div style={{ textAlign: 'center' }}>
+      <img style={{ width: '180px' }} src={CodeImg} alt="趣谈前端-徐小夕" />
+    </div>
+    <p style={{ width: '240px' }}>扫描上方二维码，关注【趣谈前端】公众号，回复"登录码" 即可获取</p>
+  </>
+);
 
-  const onFinishFailed = (errorInfo: ValidateErrorEntity) => {
-    console.log('Failed:', errorInfo);
+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 (
@@ -36,38 +46,30 @@ const Login = (props: RouteComponentProps) => {
         className={styles.formWrap}
         initialValues={{ remember: true }}
         onFinish={onFinish}
-        onFinishFailed={onFinishFailed}
       >
         <div className={styles.tit}>
-          Doring开放平台
+          Dooring开放平台
           <span style={{ marginLeft: '20px', fontSize: '18px', color: '#06c' }}>登录</span>
         </div>
-        <Form.Item
-          label="用户名"
-          name="username"
-          rules={[{ required: true, message: '请输入用户名!' }]}
-        >
+        <Form.Item label="用户名" name="n" rules={[{ required: true, message: '请输入用户名!' }]}>
           <Input />
         </Form.Item>
 
-        <Form.Item
-          label="密码"
-          name="password"
-          rules={[{ required: true, message: '请输入密码!' }]}
-        >
+        <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>
-        <Form.Item {...tailLayout}>
-          <Button block onClick={() => props.history.push(`/editor?tid=${123456}`)}>
-            直接使用
-          </Button>
-        </Form.Item>
       </Form>
     </div>
   );