bank.jsx 8.2 KB

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