Prechádzať zdrojové kódy

fix: 登录页面按钮增加loading效果

周玉环 1 týždeň pred
rodič
commit
43df706c6d
1 zmenil súbory, kde vykonal 15 pridanie a 4 odobranie
  1. 15 4
      xinkeaboard-admin/src/pages/User/Login.js

+ 15 - 4
xinkeaboard-admin/src/pages/User/Login.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'dva';
-import { Form, Input } from 'antd';
+import { Form, Input, Button } from 'antd';
 import styles from './Login.less';
 import global from '@/global.less';
 import {
@@ -30,6 +30,7 @@ export default class LoginPage extends Component {
 		autoLogin: true,
 		login_img: {},
     captcha: '',
+    loading: false
 	};
 
   captcha = '';//图形验证码的key
@@ -88,6 +89,7 @@ export default class LoginPage extends Component {
 				//用户登录
 				const { dispatch } = this.props;
         values.verifyKey = this.captcha;
+        this.setState({loading: true})
 				dispatch({
 					type: 'login/login',
 					payload: { ...values },
@@ -104,6 +106,7 @@ export default class LoginPage extends Component {
 						  failTip(res.msg);
               this.getCaptcha('captcha')
             }
+            this.setState({loading: false})
 					},
 				});
 			}
@@ -118,7 +121,7 @@ export default class LoginPage extends Component {
 
 	render() {
 		const { getFieldDecorator } = this.props.form;
-		const {login_img,captcha} = this.state;
+		const {login_img,captcha, loading} = this.state;
 		return (
 			<div className={styles.full_screen}
 				 style={{ backgroundImage: window.location.href.indexOf('user') != -1 ? 'url(' + login_img.admin_login_bg + ')' : 'none',backgroundSize:'100% 100%' }}>
@@ -181,9 +184,17 @@ export default class LoginPage extends Component {
                   )}
                 </FormItem>
                 <div className={styles.sld_login_btn_wrap}>
-                  <div className={`${styles.sld_login_btn} ${global.flex_row_center_center}`} onClick={() => this.props.form.submit(this.handleSubmits)}>
+                  {/* <div className={`${styles.sld_login_btn} ${global.flex_row_center_center}`} >
                     {sldComLanguage('立即登录')}
-                  </div>
+                  </div> */}
+                  <Button 
+                   type='primary' 
+                   className={`${styles.sld_login_btn} ${global.flex_row_center_center}`} 
+                   loading={loading} 
+                   onClick={() => this.props.form.submit(this.handleSubmits)}
+                  >
+                    {sldComLanguage('立即登录')}
+                  </Button>
                 </div>
               </Form>
             </div>