bank.jsx 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. import React from 'react';
  2. import { Input, Button, Form, Icon, Spin, message, } from 'antd';
  3. import { addressInit } from '../tools.js';
  4. import './certify.less';
  5. import ajax from 'jquery/src/ajax/xhr.js'
  6. import $ from 'jquery/src/ajax';
  7. const Content = Form.create()(React.createClass({
  8. getData() {
  9. this.setState({
  10. loading: true
  11. });
  12. $.ajax({
  13. method: "get",
  14. dataType: "json",
  15. url: globalConfig.context + "/api/user/orgProcess",
  16. success: function (data) {
  17. if (data.data) {
  18. addressInit('cmbProvince', 'cmbCity', 'cmbArea',
  19. data.data.locationProvince, data.data.locationCity, data.data.locationArea);
  20. this.setState({
  21. contactMobile: data.data.contactMobile,
  22. username: data.data.username,
  23. banks: data.data.banks,
  24. banksBranch:data.data.banksBranch,
  25. bankCardNumber: data.data.bankCardNumber,
  26. });
  27. } else {
  28. message.warning(data.error[0].message);
  29. };
  30. }.bind(this),
  31. }).always(function () {
  32. this.setState({
  33. loading: false
  34. });
  35. }.bind(this));
  36. },
  37. getInitialState() {
  38. return {
  39. loading: false
  40. };
  41. },
  42. handleSubmit(e) {
  43. e.preventDefault();
  44. this.props.form.validateFields((err, values) => {
  45. let cmbP = document.getElementById('cmbProvince').value;
  46. let cmbC = document.getElementById('cmbCity').value;
  47. let cmbA = document.getElementById('cmbArea').value;
  48. if ( !cmbP || !cmbC || !cmbA) {
  49. message.warning("请选择所在地!");
  50. return;
  51. };
  52. if (!err) {
  53. this.setState({
  54. loading: true
  55. });
  56. $.ajax({
  57. method: "POST",
  58. dataType: "json",
  59. crossDomain: false,
  60. url: globalConfig.context + "/api/user/orgNextPro",
  61. data: {
  62. bankAccount: data.data.username,
  63. banks: values.banks,
  64. banksBranch:values.banksBranch,
  65. bankCardNumber: values.bankCardNumber,
  66. locationProvince:cmbP,
  67. locationCity:cmbC,
  68. locationArea:cmbA,
  69. process: 2
  70. }
  71. }).done(function (data) {
  72. if (!data.error.length) {
  73. message.success('保存成功!');
  74. this.props.changeStep(3);
  75. } else {
  76. message.warning(data.error[0].message);
  77. }
  78. }.bind(this)).always(function () {
  79. this.setState({
  80. loading: false
  81. });
  82. }.bind(this));
  83. }
  84. });
  85. },
  86. checkBankCardNum(rule, value, callback) {
  87. if (!/(^\d{15,}$)/.test(value)) {
  88. callback('请输入正确的银行卡号!');
  89. } else {
  90. callback();
  91. }
  92. },
  93. componentDidMount() {
  94. addressInit('cmbProvince', 'cmbCity', 'cmbArea');
  95. this.getData();
  96. },
  97. changeStep() {
  98. this.props.changeStep(1);
  99. },
  100. render() {
  101. const FormItem = Form.Item;
  102. const { getFieldDecorator } = this.props.form;
  103. const formItemLayout = {
  104. labelCol: { span: 6 },
  105. wrapperCol: { span: 12 },
  106. };
  107. const _me = this;
  108. return (
  109. <Spin spinning={this.state.loading} className="certify-spin">
  110. <Form horizontal onSubmit={this.handleSubmit} className="certify-form">
  111. <FormItem wrapperCol={{ span: 20, offset: 6 }}>
  112. <p className="certify-title">请填写您的银行卡信息,该银行卡仅用于认证您的身份。</p>
  113. </FormItem>
  114. <FormItem
  115. {...formItemLayout}
  116. label="银行开户名"
  117. extra={<span><Icon type="exclamation-circle" /> 必须使用以“{this.state.username}”为开户名的银行卡进行认证</span>}
  118. >
  119. {getFieldDecorator('username')(
  120. <span>{this.state.username}</span>
  121. )}
  122. </FormItem>
  123. <FormItem
  124. {...formItemLayout}
  125. label="开户银行"
  126. extra={<span><Icon type="exclamation-circle" /> 不支持信用卡和存折进行认证</span>}
  127. >
  128. {getFieldDecorator('banks', {
  129. initialValue: this.state.banks || null,
  130. rules: [{ required: true, message: '请输入开户银行名称!' }]
  131. })(
  132. <Input placeholder="请输入开户银行名称" />
  133. )}
  134. </FormItem>
  135. <FormItem
  136. {...formItemLayout}
  137. label="开户银行所在地"
  138. >
  139. {getFieldDecorator('address')(
  140. <div>
  141. <select id="cmbProvince" name="cmbProvince"></select>
  142. <select id="cmbCity" name="cmbCity"></select>
  143. <select id="cmbArea" name="cmbArea"></select>
  144. </div>
  145. )}
  146. </FormItem>
  147. <FormItem
  148. {...formItemLayout}
  149. label="银行开户支行名称"
  150. >
  151. {getFieldDecorator('banksBranch', {
  152. initialValue: this.state.banksBranch || null,
  153. rules: [{ required: true, message: '请输入银行开户支行名称!' }]
  154. })(
  155. <Input placeholder="请输入银行开户支行名称"/>
  156. )}
  157. </FormItem>
  158. <FormItem
  159. {...formItemLayout}
  160. label="银行卡号"
  161. extra={
  162. <span style={{ 'color': '#ea0862' }}>
  163. <Icon type="exclamation-circle" />
  164. 认证系统会给该银行卡打入一笔1元以下的确认金额,您需要通过银行柜台并在
  165. 步骤4输入该银行卡收到的阿凡提打款金额数目
  166. </span>}
  167. >
  168. {getFieldDecorator('bankCardNumber', {
  169. initialValue: this.state.bankCardNumber || null,
  170. rules: [{
  171. validator: this.checkIdcardnum,
  172. }],
  173. })(
  174. <Input placeholder="请输入银行卡号" />
  175. )}
  176. </FormItem>
  177. <FormItem
  178. {...formItemLayout}
  179. label="联系方式"
  180. extra={
  181. <span style={{ 'color': '#ea0862' }}>
  182. <Icon type="exclamation-circle" />
  183. 我们会将重要进度以短信形式通知您
  184. </span>}
  185. >
  186. {getFieldDecorator('contactMobile')(
  187. <span>{this.state.contactMobile}</span>
  188. )}
  189. </FormItem>
  190. <FormItem wrapperCol={{ span: 12, offset: 6 }}>
  191. <Button className="set-submit" type="primary" htmlType="submit">下一步</Button>
  192. <Button className="exit" type="ghost" onClick={_me.changeStep}>返回修改</Button>
  193. </FormItem>
  194. </Form >
  195. </Spin >
  196. );
  197. },
  198. }));
  199. export default Content;