import React,{ Component } from 'react';
import { connect } from 'dva';
import { WhiteSpace,NavBar ,List, InputItem ,Button,WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';
import * as UtilAPI from '../../utils/utils.js';
import * as FormAPI from '../../utils/form.js';
import styles from './Login.less';
const rules = {
name: [{ required:true, message:"請輸入手機號碼" },{ pattern: /^1[3|5|7|8|9][0-9]\d{8}$/, message: "手機號碼格式不正確"}],
code:[{required:true,message:"條形碼不能為空"}],
msg:[{required:true,message:'短信驗證碼不能為空'}]
};
class Login extends Component {
constructor(props){
super(props);
this.getFieldProps = this.props.form.getFieldProps;
this.saveBaseInfo = this.saveBaseInfo.bind(this);
this.handleScanInput =this.handleScanInput.bind(this);
}
handleScanInput(){
//調微信sdk接口
}
saveBaseInfo(){
const ruleFields = FormAPI.getRuleFields(rules);
console.log(ruleFields);
const form = this.props.form;
this.props.form.validateFields(ruleFields,(error,value)=>{
let flag = false;
for(var key in error){
if(error[key].errors.length > 0 ){
UtilAPI.Toasting({type:"info", msg: error[key].errors[0].message});
flag = true;
return;
}
}
if(!flag){
let formdata = FormAPI.getFormData(form.getFieldsValue());
this.props.dispatch({
type:'login/saveItem',
payload:{
itemType:"baseinfo",
itemData:{
baseinfo:{
...formdata
}
}
}
})
}
})
}
render(){
return(
<div className={styles.main}>
<NavBar className="top-nav-bar">登錄{this.props.token}</NavBar>
<WhiteSpace />
<WingBlank>
<List>
{<InputItem clear placeholder="手機號碼" {...this.getFieldProps('name', { initialValue: this.props.baseinfo.name,rules: rules["name"]})} className="item-required">手機號碼</InputItem>}
</List>
<WhiteSpace />
<List>
{<InputItem clear placeholder="掃描條形碼" {...this.getFieldProps('code',{initialValue:this.props.baseinfo.code,rules:rules["code"]})} className="item-required" onClick={this.handleScanInput}>掃描條形碼</InputItem>}
</List>
<WhiteSpace />
<List>
{<InputItem clear placeholder="短信驗證碼" {...this.getFieldProps('msg',{initialValue:this.props.baseinfo.msg,rules:rules["msg"]})} className="item-required" >短信驗證碼</InputItem>}
</List>
<WhiteSpace />
<Button type="primary">獲取短信驗證碼</Button>
<WhiteSpace />
<Button type="primary" onClick={ this.saveBaseInfo }>登錄</Button>
</WingBlank>
</div>
);
}
}
function mapStateToProps(state){
const { baseinfo,token } = state.login || {};
return {
baseinfo : baseinfo || {},
token : token
};
}
export default connect(mapStateToProps)(createForm()(Login));