bank.jsx 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. import React from 'react';
  2. import { Input, Button, Form, Icon, Spin, message, } from 'antd';
  3. import './certify.less';
  4. import ajax from 'jquery/src/ajax/xhr.js'
  5. import $ from 'jquery/src/ajax';
  6. const Content = Form.create()(React.createClass({
  7. getData() {
  8. this.setState({
  9. loading: true
  10. });
  11. $.ajax({
  12. method: "get",
  13. dataType: "json",
  14. url: globalConfig.context + "/api/user/userPro",
  15. success: function (data) {
  16. if (data.data) {
  17. this.setState({
  18. username: data.data.username,
  19. bankName: data.data.username,
  20. bankAccount: data.data.bankAccount,
  21. bankCardNumber: data.data.bankCardNumber
  22. })
  23. } else {
  24. message.warning(data.error[0].message);
  25. };
  26. }.bind(this),
  27. }).always(function () {
  28. this.setState({
  29. loading: false
  30. });
  31. }.bind(this));
  32. },
  33. getInitialState() {
  34. return {
  35. loading: false
  36. };
  37. },
  38. handleSubmit(e) {
  39. e.preventDefault();
  40. this.props.form.validateFields((err, values) => {
  41. if (!err) {
  42. this.setState({
  43. loading: true
  44. });
  45. $.ajax({
  46. method: "POST",
  47. dataType: "json",
  48. crossDomain: false,
  49. url: globalConfig.context + "/api/user/userNextPro",
  50. data: {
  51. bankName: this.state.username,
  52. bankAccount: values.bankAccount,
  53. bankCardNumber: values.bankCardNumber,
  54. process: 2
  55. }
  56. }).done(function (data) {
  57. if (!data.error.length) {
  58. message.success('保存成功!');
  59. this.props.changeStep(3);
  60. } else {
  61. message.warning(data.error[0].message);
  62. this.setState({
  63. loading: false
  64. });
  65. }
  66. }.bind(this));
  67. }
  68. });
  69. },
  70. checkBankCardNum(rule, value, callback) {
  71. if (!/(^\d{15,}$)/.test(value)) {
  72. callback('请输入正确的银行卡号!');
  73. } else {
  74. callback();
  75. }
  76. },
  77. getIdCardUrl1(e) {
  78. this.state.idCardUrl1 = e;
  79. },
  80. getIdCardUrl2(e) {
  81. this.state.idCardUrl2 = e;
  82. },
  83. componentDidMount() {
  84. this.getData();
  85. },
  86. changeStep() {
  87. this.props.changeStep(1);
  88. },
  89. render() {
  90. const FormItem = Form.Item;
  91. const { getFieldDecorator } = this.props.form;
  92. const formItemLayout = {
  93. labelCol: { span: 4 },
  94. wrapperCol: { span: 12 },
  95. };
  96. const _me = this;
  97. return (
  98. <Spin spinning={this.state.loading} className="certify-spin">
  99. <Form horizontal onSubmit={this.handleSubmit} className="certify-form">
  100. <FormItem wrapperCol={{ span: 20, offset: 4 }}>
  101. <p className="certify-title">请填写您的银行卡信息,该银行卡仅用于认证您的身份。</p>
  102. </FormItem>
  103. <FormItem
  104. {...formItemLayout}
  105. label="银行开户名"
  106. extra={<span><Icon type="exclamation-circle" /> 必须使用以“{this.state.username}”为开户名的银行卡进行认证</span>}
  107. >
  108. {getFieldDecorator('username')(
  109. <span>{this.state.username}</span>
  110. )}
  111. <a style={{ 'color': '#ea0862' }} onClick={_me.changeStep}>修改</a>
  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={
  129. <span style={{ 'color': '#ea0862' }}>
  130. <Icon type="exclamation-circle" />
  131. 认证系统会给该银行卡打入一笔1元以下的确认金额,您需要通过银行柜台并在
  132. 步骤4输入该银行卡收到的阿凡提打款金额数目
  133. </span>}
  134. >
  135. {getFieldDecorator('bankCardNumber', {
  136. initialValue: this.state.bankCardNumber || null,
  137. rules: [{
  138. validator: this.checkIdcardnum,
  139. }],
  140. })(
  141. <Input placeholder="请输入银行卡号" />
  142. )}
  143. </FormItem>
  144. <FormItem wrapperCol={{ span: 12, offset: 4 }}>
  145. <Button className="set-submit" type="primary" htmlType="submit">下一步</Button>
  146. </FormItem>
  147. </Form >
  148. </Spin >
  149. );
  150. },
  151. }));
  152. export default Content;