🆕添加登录滑动验证码,优化登录逻辑

package.json

@@ -54,6 +54,7 @@
     "url": "https://github.com/MrXujiang/h5-Dooring/issues"
   },
   "dependencies": {
+    "@alex_xu/react-slider-vertify": "^1.0.3",
     "@ant-design/icons": "^4.2.1",
     "@antv/f2": "^3.7.7",
     "@uiw/react-baidu-map": "^1.17.3",

src/pages/login/index.tsx

@@ -1,7 +1,8 @@
-import { Form, Input, Button, Popover } from 'antd';
-import React from 'react';
+import { Form, Input, Button, Popover, message } from 'antd';
+import React, { useState } from 'react';
 import req from '@/utils/req';
 import { history } from 'umi';
+import { Vertify } from '@alex_xu/react-slider-vertify';
 import styles from './index.less';
 
 interface FormValues {
@@ -32,12 +33,33 @@ const content = (
 );
 
 const Login = () => {
+  const [visible, setVisible] = useState(false);
+  const [isVertify, setVertify] = useState(false);
   const onFinish = (values: FormValues) => {
+    if (!isVertify) {
+      setVisible(true);
+      return;
+    }
     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('/');
+    req
+      .post('/vip/check', { n, co })
+      .then((res: any) => {
+        localStorage.setItem('nickname', res.n);
+        localStorage.setItem('h5', JSON.stringify(res.h5));
+        history.push('/');
+      })
+      .catch(err => {
+        // 模拟, 需要上真实验证接口
+        localStorage.setItem('nickname', 'test');
+        localStorage.setItem('h5', JSON.stringify([]));
+        history.push('/');
+      });
+  };
+
+  const handleSuccess = () => {
+    message.success('验证成功', 1, () => {
+      setVisible(false);
+      setVertify(true);
     });
   };
 
@@ -68,15 +90,15 @@ const Login = () => {
           </Popover>
         </div>
 
+        <div style={{ margin: '-16px 0 12px 76px' }}>
+          <Vertify width={330} height={160} visible={visible} l={36} onSuccess={handleSuccess} />
+        </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>
   );

yarn.lock

@@ -10,6 +10,14 @@
     lodash.debounce "^4.0.8"
     lodash.throttle "^4.1.1"
 
+"@alex_xu/react-slider-vertify@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@alex_xu/react-slider-vertify/-/react-slider-vertify-1.0.3.tgz#dfc39713e71561cfa9a8863be7a89ff51e978bc6"
+  integrity sha512-0hI1Sx//HcPMkGEXaZQ9BLp6H7tjouLQqMYDW6tSz+JmqDyTxtJp1H2QopBJe67sOpAD6TI9CvvTqPAKx9q4pw==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    react "^16.9.23"
+
 "@ant-design/colors@^3.1.0":
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-3.2.2.tgz#5ad43d619e911f3488ebac303d606e66a8423903"
@@ -1896,6 +1904,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
+  integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.0.0", "@babel/template@^7.12.7":
   version "7.12.7"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.7.tgz#c817233696018e39fbb6c491d2fb684e05ed43bc"
@@ -14157,6 +14172,15 @@ react@^16.12.0, react@^16.13.1:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
+react@^16.9.23:
+  version "16.14.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
+  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
 reactcss@^1.2.0:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"