bank.jsx 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  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. debugger
  53. if (!err) {
  54. this.setState({
  55. loading: true
  56. });
  57. $.ajax({
  58. method: "POST",
  59. dataType: "json",
  60. crossDomain: false,
  61. url: globalConfig.context + "/api/user/orgNextPro",
  62. data: {
  63. bankAccount: data.data.username,
  64. banks: values.banks,
  65. banksBranch:values.banksBranch,
  66. bankCardNumber: values.bankCardNumber,
  67. locationProvince:cmbP,
  68. locationCity:cmbC,
  69. locationArea:cmbA,
  70. process: 2
  71. }
  72. }).done(function (data) {
  73. if (!data.error.length) {
  74. message.success('保存成功!');
  75. this.props.changeStep(3);
  76. } else {
  77. message.warning(data.error[0].message);
  78. }
  79. }.bind(this)).always(function () {
  80. this.setState({
  81. loading: false
  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" /> 必须使用以“{this.state.username}”为开户名的银行卡进行认证</span>}
  119. >
  120. {getFieldDecorator('username')(
  121. <span>{this.state.username}</span>
  122. )}
  123. </FormItem>
  124. <FormItem
  125. {...formItemLayout}
  126. label="开户银行"
  127. extra={<span><Icon type="exclamation-circle" /> 不支持信用卡和存折进行认证</span>}
  128. >
  129. {getFieldDecorator('banks', {
  130. initialValue: this.state.banks || null,
  131. rules: [{ required: true, message: '请输入开户银行名称!' }]
  132. })(
  133. <Input placeholder="请输入开户银行名称" />
  134. )}
  135. </FormItem>
  136. <FormItem
  137. {...formItemLayout}
  138. label="开户银行所在地"
  139. >
  140. {getFieldDecorator('address')(
  141. <div>
  142. <select id="cmbProvince" name="cmbProvince"></select>
  143. <select id="cmbCity" name="cmbCity"></select>
  144. <select id="cmbArea" name="cmbArea"></select>
  145. </div>
  146. )}
  147. </FormItem>
  148. <FormItem
  149. {...formItemLayout}
  150. label="银行开户支行名称"
  151. >
  152. {getFieldDecorator('banksBranch', {
  153. initialValue: this.state.banksBranch || null,
  154. rules: [{ required: true, message: '请输入银行开户支行名称!' }]
  155. })(
  156. <Input placeholder="请输入银行开户支行名称"/>
  157. )}
  158. </FormItem>
  159. <FormItem
  160. {...formItemLayout}
  161. label="银行卡号"
  162. extra={
  163. <span style={{ 'color': '#ea0862' }}>
  164. <Icon type="exclamation-circle" />
  165. 认证系统会给该银行卡打入一笔1元以下的确认金额,您需要通过银行柜台并在
  166. 步骤4输入该银行卡收到的阿凡提打款金额数目
  167. </span>}
  168. >
  169. {getFieldDecorator('bankCardNumber', {
  170. initialValue: this.state.bankCardNumber || null,
  171. rules: [{
  172. validator: this.checkIdcardnum,
  173. }],
  174. })(
  175. <Input placeholder="请输入银行卡号" />
  176. )}
  177. </FormItem>
  178. <FormItem
  179. {...formItemLayout}
  180. label="联系方式"
  181. extra={
  182. <span style={{ 'color': '#ea0862' }}>
  183. <Icon type="exclamation-circle" />
  184. 我们会将重要进度以短信形式通知您
  185. </span>}
  186. >
  187. {getFieldDecorator('contactMobile')(
  188. <span>{this.state.contactMobile}</span>
  189. )}
  190. </FormItem>
  191. <FormItem wrapperCol={{ span: 12, offset: 6 }}>
  192. <Button className="set-submit" type="primary" htmlType="submit">下一步</Button>
  193. <Button className="exit" type="ghost" onClick={_me.changeStep}>返回修改</Button>
  194. </FormItem>
  195. </Form >
  196. </Spin >
  197. );
  198. },
  199. }));
  200. export default Content;