import React,{ Component } from 'react';
import style from 'cms.css';
​
/*** 路由路径 登录成功后页面跳转到index*/
import { index } from 'config';
​
export default class Login extends Component {constructor(props){super(props);this.state = {userName: "",userPassword: "",isRemember: false,unameHelp: "",upwdHelp: ""}}
​
    //监听input中的数据，保存到state中changeUsername(e){let uname = e.target.value;this.setState({userName: uname});console.log(this.state.userName);}
​changePassword(e){let upwd = e.target.value;this.setState({userPassword: upwd})}
​ //是否记住密码handleCheckbox(e){let isChecked = e.target.checked;if(isChecked){this.setState({isRemember: true})}else{this.setState({isRemember: false})}}
​//点击登录按钮，触发后台接口提供的验证，对数据的处理等方法handleClick(){if(this.state.userName === ""||this.state.userName === null){this.setState({unameHelp: "* 用户名不能为空"})}else if(this.state.userPassword === ""||this.state.userPassword === null){this.setState({unameHelp: "",upwdHelp: "* 密码不能为空"})}else{this.setState({ //清除help-block提示文字unameHelp: "",upwdHelp: ""});if(this.state.isRemember === true){ //是否记住密码，若记住，则保存至localstorage，反之，清除// let loginData = {this.state.userName,this.state.userPassword};let loginData = {};loginData.userName = this.state.userName;loginData.userPassword = this.state.userPassword;Data.localSetItem("mm_loginStatus",loginData);}else{Data.localRemoveItem("jiaj-loginStatus");}this.props.login(this.state.userName,this.state.userPassword);console.log(this.state);}
​
​}
​render(){
​return (<div className="login-box">
​<div className="login-title">登   录</div><form action="" className="form-horizontal"><div className="form-group input-text"><label htmlFor="uname">账号</label><input type="text" className="form-control" name="username" id="uname" ref="uname" placeholder="手机号/用户名"onChange={this.changeUsername.bind(this)}/><span className="help-block">{this.state.unameHelp}</span></div>
​<div className="form-group input-text"><label htmlFor="upwd">密码</label><input type="password" className="form-control" name="password" id="upwd" ref="upwd" placeholder="密码"onChange={this.changePassword.bind(this)}/><span className="help-block">{this.state.upwdHelp}</span></div>
​<div className="form-group"><label htmlFor="chk" className="check"><input type="checkbox" id="chk" checked={this.state.isRemember} onClick={this.handleCheckbox.bind(this)} /><span>记住密码</span></label></div>
​<div className="form-group"><button type="button" onClick={this.handleClick.bind(this,this.state.userName,this.state.userPassword)} className="btn btn-primary login-btn">登录</button></div></form>
​</div>)}
}
​
​/**************登录(WXP)****************/.login-box{width: 60%;background: #e0e8e0;margin: 100px auto;padding: 50px 70px;box-shadow: 5px 5px #ddd;border-radius: 5px;
}
​
.login-title{font-size: 30px;text-align: center;margin-bottom: 20px;font-weight: 600;
}
​
.input-text>label{display: inline-block;width: 15%;
}
​
.input-text>input{display: inline-block;width: 80%;
}
.check{margin-left: 15%;width: 40%
}
.check>span{margin-left: 3%;
}
.login-btn{margin-left: 15%;width: 80%;font-size: 16px;
}
.help-block{color: #e4393c;height: 20px;font-size: 12px;margin-left: 15%;
}