import React from 'react'; import { Input, Button, Form, Icon, Spin, message, } from 'antd'; import './certify.less'; import ajax from 'jquery/src/ajax/xhr.js' import $ from 'jquery/src/ajax'; const Content = Form.create()(React.createClass({ getData() { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", url: globalConfig.context + "/api/user/userPro", success: function (data) { if (data.data) { this.setState({ username: data.data.username, bankName: data.data.bankName, bankAccount: data.data.bankAccount, bankCardNumber: data.data.bankCardNumber }) }; }.bind(this), }).done(function (data) { if (data.error.length) { message.warning(data.error[0].message); } }.bind(this)).always(function () { this.setState({ loading: false }); }.bind(this)); }, getInitialState() { return { loading: false }; }, handleSubmit(e) { e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { this.setState({ loading: true }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/userNextPro", data: { bankName: this.state.username, bankAccount: values.bankAccount, bankCardNumber: values.bankCardNumber, process: 2 } }).done(function (data) { if (!data.error.length) { message.success('保存成功!'); this.props.changeStep(3); } else { message.warning(data.error[0].message); this.setState({ loading: false }); } }.bind(this)); } }); }, checkBankCardNum(rule, value, callback) { if (!/(^\d{15,}$)/.test(value)) { callback('请输入正确的银行卡号!'); } else { callback(); } }, getIdCardUrl1(e) { this.state.idCardUrl1 = e; }, getIdCardUrl2(e) { this.state.idCardUrl2 = e; }, componentDidMount() { this.getData(); }, changeStep() { this.props.changeStep(1); }, render() { const FormItem = Form.Item; const { getFieldDecorator } = this.props.form; const formItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 12 }, }; const _me = this; return ( <Spin spinning={this.state.loading} className="certify-spin"> <Form horizontal onSubmit={this.handleSubmit} className="certify-form"> <FormItem wrapperCol={{ span: 20, offset: 4 }}> <p className="certify-title">请填写您的银行卡信息,该银行卡仅用于认证您的身份。</p> </FormItem> <FormItem {...formItemLayout} label="银行开户名" extra={<span><Icon type="exclamation-circle" /> 必须使用以“{this.state.username}”为开户名的银行卡进行认证</span>} > {getFieldDecorator('username')( <span>{this.state.username}</span> )} <a style={{ 'color': '#ea0862', marginLeft: '20px' }} onClick={_me.changeStep}>修改</a> </FormItem> <FormItem {...formItemLayout} label="开户银行" extra={<span><Icon type="exclamation-circle" /> 不支持信用卡和存折进行认证</span>} > {getFieldDecorator('bankAccount', { initialValue: this.state.bankAccount || null, rules: [{ required: true, message: '请输入开户银行名称!' }] })( <Input placeholder="请输入开户银行名称" /> )} </FormItem> <FormItem {...formItemLayout} label="银行卡号" > {getFieldDecorator('bankCardNumber', { initialValue: this.state.bankCardNumber || null, rules: [{ validator: this.checkIdcardnum, }], })( <Input placeholder="请输入银行卡号" /> )} </FormItem> <FormItem wrapperCol={{ span: 12, offset: 4 }}> <Button className="set-submit" type="primary" htmlType="submit">下一步</Button> </FormItem> </Form > </Spin > ); }, })); export default Content; // extra={ // <span style={{ 'color': '#ea0862' }}> // <Icon type="exclamation-circle" /> // 认证系统会给该银行卡打入一笔1元以下的确认金额,您需要通过银行柜台并在 // 步骤4输入该银行卡收到的阿凡提打款金额数目 // </span>}