react ~2.登陆页面验证码的获取传递与刷新

Posted 2021-02-07 sunshineforfuture

import React from ‘react‘;
import { withRouter } from ‘react-router-dom‘;
import { Form, Input, Icon, Checkbox, Row, message } from ‘antd‘;

import { fetchPost, fetchGet } from ‘@common/js/Fetch.js‘;
import fbank from ‘../images/fbank.png‘;
import ‘../css/loginform.scss‘;

const FormItem = Form.Item;

class LoginForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            rememberEmail: ‘‘,
            imgUrl: MI.baseURI + `/captcha/get?id=` + Math.random()
        };
    }

    componentDidMount() {
        //判断本地是否记住了邮箱地址
        if (localStorage.getItem(‘user_email‘) !== null) {
            this.setState({
                rememberEmail: localStorage.getItem(‘login_email‘)
            });
        }
    }

    /**
     * 提交登录
     */
    handleSubmit = (e) => {

        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                const data = {
                    "loginName": values.email,
                    "password": values.password,
                    "captcha": values.captcha
                };
                const apiUrl = `${MI.baseURI}/sys/login`;
                fetchPost(apiUrl, data).then((response) => {
                    if (response.success) {
                        message.success(‘登陆成功‘);
                        //如果用户选择记住账户
                        //则将写入本地存储localstorage中
                        if (values.remember == true) {
                            localStorage.setItem("user_email", response.data.userName);
                            localStorage.setItem("login_email", response.data.loginName);
                        }

                       
                                //跳转到登录后的页面
                                this.props.history.push(‘/operation/product‘);
                            }
                        });

                     

                    } else {
                        this.getCaptcha();
                        message.error(response.msg);
                    }
                });
            }
        });
    }

    /**
     * 刷新验证码
     */
    getCaptcha() {
        this.setState({
            //在后面加上一个无用的参数id实现验证码刷新
            imgUrl: MI.baseURI + `/captcha/get?id=` + Math.random()
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="login-wrapper">
                <div className="login-content" >
                    <img className="company-logo" src={fbank}/>
                    <span className="company-name">重庆富民银行开放后台管理系统</span>
                    <Form onSubmit={this.handleSubmit}>
                        <FormItem>
                            {getFieldDecorator(‘email‘, {
                                initialValue: this.state.rememberEmail,
                                rules: [{ 
                                    required: true, message: ‘请输入你的账号!‘ 
                                }]
                            })(
                                <Input prefix={<Icon type="user" className="pre-icon" />} placeholder="账号" className="login-input"/>
                            )}
                        </FormItem>
                        <FormItem>
                            {getFieldDecorator(‘password‘, {
                                rules: [{ required: true, message: ‘请输入你的密码!‘ }],
                            })(
                                <Input prefix={<Icon type="lock" className="pre-icon" />} type="password" placeholder="密码" className="login-input"/>
                            )}
                        </FormItem>
                        <FormItem>
                            <Row style={{ display: ‘flex‘ }}>
                                {getFieldDecorator(‘captcha‘, {
                                    rules: [{ required: true, message: ‘请输入验证码!‘ }],
                                })(
                                    <Input type="text" placeholder="验证码" className="code-input" />
                                )}
                                <div className="login-captcha">
                                    <div>
                                        <img src={this.state.imgUrl} key={this.state.key} />
                                    </div>
                                    <a className=‘change-code‘ onClick={this.getCaptcha.bind(this)}>换一张</a>
                                </div>
                            </Row>
                        </FormItem>
                        <FormItem className="remember-password">
                            {getFieldDecorator(‘remember‘, {
                                valuePropName: ‘checked‘,
                                initialValue: true,
                            })(
                                <Checkbox style={{ fontSize: 14, color: ‘#636570‘ }}>记住账号</Checkbox>
                            )}
                        </FormItem>
                        <button type="submit" className="button-login">登录</button>
                    </Form>
                    
                </div>
            </div>
        );
    }
}

export default withRouter(Form.create()(LoginForm));