张延森 пре 4 година
родитељ
комит
a504a6c06d

+ 26
- 0
src/pages/user/login/components/Login/CaptchaImg.jsx Прегледај датотеку

1
+import React, { useEffect, useState } from 'react'
2
+import { fetch, apis } from '@/utils/request'
3
+
4
+const getCaptcha = fetch(apis.image.captcha)
5
+
6
+export default props => {
7
+  const [ver, setVer] = useState(0)
8
+  const [captcha, setCaptcha] = useState({image: '验证码'})
9
+
10
+  const handleClick = () => {
11
+    setVer(ver + 1)
12
+  }
13
+
14
+  useEffect(() => {
15
+    getCaptcha().then(res => {
16
+      setCaptcha(res)
17
+      if (props.onChange) {
18
+        props.onChange(res.key)
19
+      }
20
+    })
21
+  }, [ver])
22
+
23
+  return (
24
+    <img src={captcha.image} width="100%" height="40" onClick={handleClick} style={{cursor: 'pointer'}} />
25
+  )
26
+}

+ 5
- 2
src/pages/user/login/components/Login/LoginItem.jsx Прегледај датотеку

4
 import ItemMap from './map';
4
 import ItemMap from './map';
5
 import LoginContext from './LoginContext';
5
 import LoginContext from './LoginContext';
6
 import styles from './index.less';
6
 import styles from './index.less';
7
+import CaptchaImg from './CaptchaImg'
8
+
7
 const FormItem = Form.Item;
9
 const FormItem = Form.Item;
8
 
10
 
9
 class WrapFormItem extends Component {
11
 class WrapFormItem extends Component {
119
               {getFieldDecorator(name, options)(<Input {...customProps} {...inputProps} />)}
121
               {getFieldDecorator(name, options)(<Input {...customProps} {...inputProps} />)}
120
             </Col>
122
             </Col>
121
             <Col span={8}>
123
             <Col span={8}>
122
-              <Button
124
+              {/* <Button
123
                 disabled={!!count}
125
                 disabled={!!count}
124
                 className={styles.getCaptcha}
126
                 className={styles.getCaptcha}
125
                 size="large"
127
                 size="large"
126
                 onClick={this.onGetCaptcha}
128
                 onClick={this.onGetCaptcha}
127
               >
129
               >
128
                 {count ? `${count} ${getCaptchaSecondText}` : getCaptchaButtonText}
130
                 {count ? `${count} ${getCaptchaSecondText}` : getCaptchaButtonText}
129
-              </Button>
131
+              </Button> */}
132
+              {getFieldDecorator('captchaKey')(<CaptchaImg />)}
130
             </Col>
133
             </Col>
131
           </Row>
134
           </Row>
132
         </FormItem>
135
         </FormItem>

+ 1
- 1
src/pages/user/login/components/Login/index.jsx Прегледај датотеку

88
 
88
 
89
     if (form) {
89
     if (form) {
90
       form.validateFields(
90
       form.validateFields(
91
-        activeFields,
91
+        activeFields.concat('captchaKey'),
92
         {
92
         {
93
           force: true,
93
           force: true,
94
         },
94
         },

+ 13
- 0
src/pages/user/login/components/Login/map.jsx Прегледај датотеку

31
       },
31
       },
32
     ],
32
     ],
33
   },
33
   },
34
+  Captcha: {
35
+    props: {
36
+      size: 'large',
37
+      id: 'captcha',
38
+      placeholder: '888888',
39
+    },
40
+    rules: [
41
+      {
42
+        required: true,
43
+        message: '请输入验证码!',
44
+      },
45
+    ],
46
+  },
34
 };
47
 };

+ 1
- 0
src/pages/user/login/index.jsx Прегледај датотеку

120
               }
120
               }
121
             }}
121
             }}
122
           />
122
           />
123
+          <Captcha name="captcha" placeholder="请填写验证码" />
123
           <Submit loading={submitting}>
124
           <Submit loading={submitting}>
124
             <FormattedMessage id="user-login.login.login" />
125
             <FormattedMessage id="user-login.login.login" />
125
           </Submit>
126
           </Submit>

+ 5
- 0
src/services/apis.js Прегледај датотеку

75
       url: `${prefix}/qrcode`,
75
       url: `${prefix}/qrcode`,
76
       method: 'POST',
76
       method: 'POST',
77
       action: 'upload',
77
       action: 'upload',
78
+    },
79
+    captcha: {
80
+      url: `${prefix}/image-captcha`,
81
+      method: 'GET',
82
+      action: 'upload',
78
     }
83
     }
79
   },
84
   },
80
   user: {
85
   user: {