标签:box username click str 登录 inpu tcap app 管理
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));
标签:box username click str 登录 inpu tcap app 管理
原文地址:https://www.cnblogs.com/sunshineForFuture/p/10342280.html