content.jsx 5.9 KB

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