bank.jsx 8.6 KB

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