content.jsx 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. import React from 'react';
  2. import { Icon, message } from 'antd';
  3. import './certify.less';
  4. import ajax from 'jquery/src/ajax/xhr.js'
  5. import $ from 'jquery/src/ajax';
  6. import Personal from './personal.jsx';
  7. import Bank from './bank.jsx';
  8. import Confirm from './confirm.jsx';
  9. import Audit from './audit.jsx';
  10. import Money from './money.jsx';
  11. import Result from './result.jsx';
  12. const Content = React.createClass({
  13. stepNumSwith(num) {
  14. switch (num) {
  15. case 1:
  16. this.setState({
  17. step0Class: 'step-done',
  18. step1Class: 'step-doing',
  19. step2Class: 'step-none',
  20. step3Class: 'step-none',
  21. step4Class: 'step-none',
  22. step5Class: 'step-none',
  23. step6Class: 'step-none'
  24. });
  25. break;
  26. case 2:
  27. this.setState({
  28. step0Class: 'step-off',
  29. step1Class: 'step-done',
  30. step2Class: 'step-doing',
  31. step3Class: 'step-none',
  32. step4Class: 'step-none',
  33. step5Class: 'step-none',
  34. step6Class: 'step-none'
  35. });
  36. break;
  37. case 3:
  38. this.setState({
  39. step0Class: 'step-off',
  40. step1Class: 'step-off',
  41. step2Class: 'step-done',
  42. step3Class: 'step-doing',
  43. step4Class: 'step-none',
  44. step5Class: 'step-none',
  45. step6Class: 'step-none'
  46. });
  47. break;
  48. case 4:
  49. this.setState({
  50. step0Class: 'step-off',
  51. step1Class: 'step-off',
  52. step2Class: 'step-off',
  53. step3Class: 'step-done',
  54. step4Class: 'step-doing',
  55. step5Class: 'step-none',
  56. step6Class: 'step-none'
  57. });
  58. break;
  59. case 5:
  60. this.setState({
  61. step0Class: 'step-off',
  62. step1Class: 'step-off',
  63. step2Class: 'step-off',
  64. step3Class: 'step-off',
  65. step4Class: 'step-done',
  66. step5Class: 'step-doing',
  67. step6Class: 'step-none'
  68. });
  69. break;
  70. case 6:
  71. this.setState({
  72. step0Class: 'step-off',
  73. step1Class: 'step-off',
  74. step2Class: 'step-off',
  75. step3Class: 'step-off',
  76. step4Class: 'step-off',
  77. step5Class: 'step-done',
  78. step6Class: 'step-doing'
  79. });
  80. break;
  81. };
  82. },
  83. getData() {
  84. $.ajax({
  85. method: "get",
  86. dataType: "json",
  87. url: globalConfig.context + "/api/user/userPro",
  88. success: function (data) {
  89. if (data.data && data.data.process) {
  90. this.state.stepNum = data.data.process + 1
  91. } else {
  92. this.state.stepNum = 1
  93. };
  94. this.stepNumSwith(this.state.stepNum);
  95. }.bind(this),
  96. }).done(function (data) {
  97. if (data.error.length) {
  98. message.warning(data.error[0].message);
  99. }
  100. }.bind(this));
  101. },
  102. getInitialState() {
  103. return {
  104. loading: false,
  105. };
  106. },
  107. componentWillMount() {
  108. this.getData()
  109. },
  110. changeStep(i) {
  111. this.state.stepNum = i;
  112. this.stepNumSwith(i)
  113. },
  114. render() {
  115. return (
  116. <div className="certify-content">
  117. <div className="certify-step clearfix">
  118. <div className={this.state.step0Class}><div>个人实名认证流程</div></div>
  119. <div className={this.state.step1Class}>
  120. {this.state.stepNum > 1 ? <Icon type="check" /> : <i>1</i>}<div><p>填写</p><p>个人信息</p></div>
  121. </div>
  122. <div className={this.state.step2Class}>
  123. {this.state.stepNum > 2 ? <Icon type="check" /> : <i>2</i>}<div><p>填写</p><p>银行卡信息</p></div>
  124. </div>
  125. <div className={this.state.step3Class}>
  126. {this.state.stepNum > 3 ? <Icon type="check" /> : <i>3</i>}<div>确认信息</div>
  127. </div>
  128. <div className={this.state.step4Class}>
  129. {this.state.stepNum > 4 ? <Icon type="check" /> : <i>4</i>}<div>信息审核</div>
  130. </div>
  131. <div className={this.state.step5Class}>
  132. {this.state.stepNum > 5 ? <Icon type="check" /> : <i>5</i>}<div><p>填写打入</p><p>卡内金额</p></div>
  133. </div>
  134. <div className={this.state.step6Class}>
  135. {this.state.stepNum > 6 ? <Icon type="check" /> : <i>6</i>}<div>认证结果</div>
  136. </div>
  137. </div>
  138. <div className="certify-form-box">
  139. {(() => {
  140. switch (this.state.stepNum) {
  141. case 1:
  142. return <Personal changeStep={this.changeStep} />;
  143. case 2:
  144. return <Bank changeStep={this.changeStep} />;
  145. case 3:
  146. return <Confirm changeStep={this.changeStep} />;
  147. case 4:
  148. return <Audit changeStep={this.changeStep} />;
  149. case 5:
  150. return <Money changeStep={this.changeStep} />;
  151. case 6:
  152. return <Result changeStep={this.changeStep} />;
  153. };
  154. })()}
  155. </div>
  156. </div>
  157. )
  158. }
  159. });
  160. export default Content;