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));