bank.jsx 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  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. bankAccount: data.data.bankAccount,
  23. banks: data.data.banks,
  24. bankBranch: data.data.bankBranch,
  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: values.bankAccount,
  63. banks: values.banks,
  64. bankBranch: values.bankBranch,
  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. this.setState({
  78. loading: false
  79. });
  80. }
  81. }.bind(this));
  82. }
  83. });
  84. },
  85. checkBankCardNum(rule, value, callback) {
  86. if (!/(^\d{15,}$)/.test(value)) {
  87. callback('请输入正确的银行卡号!');
  88. } else {
  89. callback();
  90. }
  91. },
  92. componentDidMount() {
  93. addressInit('cmbProvince', 'cmbCity', 'cmbArea');
  94. this.getData();
  95. },
  96. changeStep() {
  97. this.props.changeStep(1);
  98. },
  99. render() {
  100. const FormItem = Form.Item;
  101. const { getFieldDecorator } = this.props.form;
  102. const formItemLayout = {
  103. labelCol: { span: 6 },
  104. wrapperCol: { span: 12 },
  105. };
  106. const _me = this;
  107. return (
  108. <Spin spinning={this.state.loading} className="certify-spin">
  109. <Form horizontal onSubmit={this.handleSubmit} className="certify-form">
  110. <FormItem wrapperCol={{ span: 20, offset: 6 }}>
  111. <p className="certify-title">请填写您的银行卡信息,该银行卡仅用于认证您的身份。</p>
  112. </FormItem>
  113. <FormItem
  114. {...formItemLayout}
  115. label="银行开户名"
  116. extra={<span><Icon type="exclamation-circle" /> 必须使用以改名称为开户名的银行卡进行认证</span>}
  117. >
  118. {getFieldDecorator('bankAccount',{
  119. initialValue: this.state.bankAccount || null,
  120. rules: [{required: true, message: '请输入开户银行开户名!' }]
  121. })(
  122. <Input placeholder="请输入开户银行开户名" />
  123. )}
  124. </FormItem>
  125. <FormItem
  126. {...formItemLayout}
  127. label="开户银行"
  128. extra={<span><Icon type="exclamation-circle" /> 不支持信用卡和存折进行认证</span>}
  129. >
  130. {getFieldDecorator('banks', {
  131. initialValue: this.state.banks || null,
  132. rules: [{ required: true, message: '请输入开户银行名称!' }]
  133. })(
  134. <Input placeholder="请输入开户银行名称" />
  135. )}
  136. </FormItem>
  137. <FormItem
  138. {...formItemLayout}
  139. label="开户银行所在地"
  140. >
  141. {getFieldDecorator('address')(
  142. <div>
  143. <select id="cmbProvince" name="cmbProvince"></select>
  144. <select id="cmbCity" name="cmbCity"></select>
  145. <select id="cmbArea" name="cmbArea"></select>
  146. </div>
  147. )}
  148. </FormItem>
  149. <FormItem
  150. {...formItemLayout}
  151. label="银行开户支行名称"
  152. >
  153. {getFieldDecorator('bankBranch', {
  154. initialValue: this.state.bankBranch || null,
  155. rules: [{ required: true, message: '请输入银行开户支行名称!' }]
  156. })(
  157. <Input placeholder="请输入银行开户支行名称" />
  158. )}
  159. </FormItem>
  160. <FormItem
  161. {...formItemLayout}
  162. label="银行卡号"
  163. extra={
  164. <span style={{ 'color': '#ea0862' }}>
  165. <Icon type="exclamation-circle" />
  166. 认证系统会给该银行卡打入一笔1元以下的确认金额,您需要通过银行柜台并在
  167. 步骤4输入该银行卡收到的阿凡提打款金额数目
  168. </span>}
  169. >
  170. {getFieldDecorator('bankCardNumber', {
  171. initialValue: this.state.bankCardNumber || null,
  172. rules: [{
  173. validator: this.checkIdcardnum,
  174. }],
  175. })(
  176. <Input placeholder="请输入银行卡号" />
  177. )}
  178. </FormItem>
  179. <FormItem
  180. {...formItemLayout}
  181. label="联系方式"
  182. extra={
  183. <span style={{ 'color': '#ea0862' }}>
  184. <Icon type="exclamation-circle" />
  185. 我们会将重要进度以短信形式通知您
  186. </span>}
  187. >
  188. {getFieldDecorator('contactMobile')(
  189. <span>{this.state.contactMobile}</span>
  190. )}
  191. </FormItem>
  192. <FormItem wrapperCol={{ span: 12, offset: 6 }}>
  193. <Button className="set-submit" type="primary" htmlType="submit">下一步</Button>
  194. <Button className="exit" type="ghost" onClick={_me.changeStep}>返回修改</Button>
  195. </FormItem>
  196. </Form >
  197. </Spin >
  198. );
  199. },
  200. }));
  201. export default Content;