import React from 'react'; import { Input, Button, Form, Icon, Spin, message } from 'antd'; import './base.less'; import ajax from 'jquery/src/ajax/xhr.js' import $ from 'jquery/src/ajax'; import ChangePw from './changePassword.jsx'; const FormItem = Form.Item; import weixin from '../../../../image/weixin-w.png'; import qq from '../../../../image/qq-w.png'; import weibo from '../../../../image/weibo-w.png'; const BaseFrom = Form.create()(React.createClass({ getData() { this.props.spinState(true); $.ajax({ method: "get", dataType: "json", url: globalConfig.context + "/api/user/base", success: function (data) { if (data.data) { this.setState({ id:data.data.id, fixedTel: data.data.fixedTel, firstContacts: data.data.firstContacts, firstMobile: data.data.firstMobile, secondContacts: data.data.secondContacts, secondMobile: data.data.secondMobile, thirdContacts: data.data.thirdContacts, thirdMobile: data.data.thirdMobile, qq: data.data.qq, address: data.data.postalAddress, postcode: data.data.postcode, legalPerson: data.data.legalPerson, email: data.data.email, }); }; }.bind(this), }).done(function (data) { if (data.error.length) { message.warning(data.error[0].message); } }.bind(this)).always(function () { this.props.spinState(false); }.bind(this)); }, getInitialState() { return { }; }, componentWillMount() { this.getData(); }, handleSubmit(e) { e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { this.props.spinState(true); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/orgIdentity", data: { "id":this.state.id, "firstContacts": values.firstContacts, "firstMobile": values.firstMobile, "secondContacts": values.secondContacts, "secondMobile": values.secondMobile, "thirdContacts": values.thirdContacts, "thirdMobile": values.thirdMobile, "email": values.email, "fixedTel": values.telephone, "qq": values.qq, "postalAddress": values.address, "postcode": values.postcode, "moblie": values.moblie, "legalPerson": values.legalPerson } }).done(function (data) { if (!data.error.length) { message.success('保存成功!'); this.getData(); } else { message.warning(data.error[0].message); } }.bind(this)).always(function () { this.props.spinState(false); }.bind(this)); } }); }, checkidNum(rule, value, callback) { const form = this.props.form; if (value && value !== form.getFieldValue('password')) { callback('Two passwords that you enter is inconsistent!'); } else { callback(); } }, checkUpload(file) { const isJPG = file.type === 'image/jpeg'; if (!isJPG) { callback('You can only upload JPG file!'); } const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { callback('Image must smaller than 2MB!'); } return isJPG && isLt2M; }, checkPhone(rule, value, callback) { const form = this.props.form; if (value && value.length !== 0 && !(/^1[34578]\d{9}$/.test(value))) { callback('请输入正确的手机号码!'); } else { callback(); } }, render() { const { getFieldDecorator } = this.props.form; const formItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 12 }, }; return ( <Form horizontal onSubmit={this.handleSubmit} className="base-form"> <FormItem {...formItemLayout} label='第一联系人' > {getFieldDecorator('firstContacts', { initialValue: this.state.firstContacts, })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label="手机号码" > {getFieldDecorator('firstMobile', { initialValue: this.state.firstMobile, rules: [ { validator: this.checkPhone }], })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label='第二联系人' > {getFieldDecorator('secondContacts', { initialValue: this.state.secondContacts, })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label="手机号码" > {getFieldDecorator('secondMobile', { initialValue: this.state.secondMobile, rules: [ { validator: this.checkPhone }], })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label='第三联系人' > {getFieldDecorator('thirdContacts', { initialValue: this.state.thirdContacts, })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label="手机号码" > {getFieldDecorator('thirdMobile', { initialValue: this.state.thirdMobile, rules: [ { validator: this.checkPhone }], })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label="电子邮箱" > {getFieldDecorator('email', { initialValue: this.state.email, rules: [{ type: 'email', message: '请输入正确的邮箱地址!', }], })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label="固定电话" > {getFieldDecorator('telephone', { initialValue: this.state.fixedTel })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label="QQ" > {getFieldDecorator('qq', { initialValue: this.state.qq })( <Input /> )} </FormItem> <FormItem {...formItemLayout} label="通讯地址" > {getFieldDecorator('address', { initialValue: this.state.address })( <Input /> )} </FormItem> <FormItem wrapperCol={{ span: 12, offset: 4 }}> <Button className="set-submit" type="primary" htmlType="submit">保存</Button> </FormItem> </Form > ); }, })); // <FormItem // {...formItemLayout} // label="法人" // > // {getFieldDecorator('legalPerson', { // initialValue: this.state.legalPerson // })( // <Input /> // )} // </FormItem> const Base = React.createClass({ getInitialState() { return { loading: false, }; }, spinChange(e) { this.setState({ loading: e }); }, render() { return ( <Spin spinning={this.state.loading} className='spin-box'> <div className="set-base"> <div className="acc-detail"> <p className="acc-title">您登录的账号</p> <p>阿凡提号: <span>{userData.number}</span></p> <p>认证状态: <span>{userData.lvl == '1' ? <span>已认证</span> : <span>未认证 <a href={globalConfig.context + '/user/groupCertify'}> 马上认证</a></span>}</span></p> <div className="clearfix"> <ChangePw /> </div> </div> <div className="acc-bind" style={{ 'display': 'none' }}> <p className="acc-title">绑定账号 <span>绑定后,可使用第三方账号直接登录阿凡提网</span></p> <p> <Button className="relateqq"><img src={qq} alt="" /> QQ账号登录</Button> <Button className="relateweibo"><img src={weibo} alt="" />微博账号登录</Button> <Button className="relateweixin"><img src={weixin} alt="" />微信账号登录</Button> </p> </div> <div className="acc-info"> <p className="acc-title">请确认您的联系信息</p> <BaseFrom spinState={this.spinChange} /> </div> </div> </Spin> ) } }); export default Base;