feats\

src/pages/user/login/components/Login/CaptchaImg.jsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from 'react'
+import { fetch, apis } from '@/utils/request'
+
+const getCaptcha = fetch(apis.image.captcha)
+
+export default props => {
+  const [ver, setVer] = useState(0)
+  const [captcha, setCaptcha] = useState({image: '验证码'})
+
+  const handleClick = () => {
+    setVer(ver + 1)
+  }
+
+  useEffect(() => {
+    getCaptcha().then(res => {
+      setCaptcha(res)
+      if (props.onChange) {
+        props.onChange(res.key)
+      }
+    })
+  }, [ver])
+
+  return (
+    <img src={captcha.image} width="100%" height="40" onClick={handleClick} style={{cursor: 'pointer'}} />
+  )
+}

src/pages/user/login/components/Login/LoginItem.jsx

@@ -4,6 +4,8 @@ import omit from 'omit.js';
 import ItemMap from './map';
 import LoginContext from './LoginContext';
 import styles from './index.less';
+import CaptchaImg from './CaptchaImg'
+
 const FormItem = Form.Item;
 
 class WrapFormItem extends Component {
@@ -119,14 +121,15 @@ class WrapFormItem extends Component {
               {getFieldDecorator(name, options)(<Input {...customProps} {...inputProps} />)}
             </Col>
             <Col span={8}>
-              <Button
+              {/* <Button
                 disabled={!!count}
                 className={styles.getCaptcha}
                 size="large"
                 onClick={this.onGetCaptcha}
               >
                 {count ? `${count} ${getCaptchaSecondText}` : getCaptchaButtonText}
-              </Button>
+              </Button> */}
+              {getFieldDecorator('captchaKey')(<CaptchaImg />)}
             </Col>
           </Row>
         </FormItem>

src/pages/user/login/components/Login/index.jsx

@@ -88,7 +88,7 @@ class Login extends Component {
 
     if (form) {
       form.validateFields(
-        activeFields,
+        activeFields.concat('captchaKey'),
         {
           force: true,
         },

src/pages/user/login/components/Login/map.jsx

@@ -31,4 +31,17 @@ export default {
       },
     ],
   },
+  Captcha: {
+    props: {
+      size: 'large',
+      id: 'captcha',
+      placeholder: '888888',
+    },
+    rules: [
+      {
+        required: true,
+        message: '请输入验证码!',
+      },
+    ],
+  },
 };

src/pages/user/login/index.jsx

@@ -120,6 +120,7 @@ class Login extends Component {
               }
             }}
           />
+          <Captcha name="captcha" placeholder="请填写验证码" />
           <Submit loading={submitting}>
             <FormattedMessage id="user-login.login.login" />
           </Submit>

src/services/apis.js

@@ -75,6 +75,11 @@ export default {
       url: `${prefix}/qrcode`,
       method: 'POST',
       action: 'upload',
+    },
+    captcha: {
+      url: `${prefix}/image-captcha`,
+      method: 'GET',
+      action: 'upload',
     }
   },
   user: {