content.jsx 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  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/orgProcess",
  88. success: function (data) {
  89. if (data.data) {
  90. this.state.stepNum = data.data.process + 1;
  91. this.stepNumSwith(this.state.stepNum);
  92. } else {
  93. message.warning(data.error[0].message);
  94. };
  95. }.bind(this),
  96. });
  97. },
  98. getInitialState() {
  99. return {
  100. loading: false,
  101. };
  102. },
  103. componentWillMount() {
  104. this.getData();
  105. },
  106. changeStep(i) {
  107. this.state.stepNum = i;
  108. this.stepNumSwith(i)
  109. },
  110. render() {
  111. return (
  112. <div className="certify-content">
  113. <div className="certify-step clearfix">
  114. <div className={this.state.step0Class}><div>企业实名认证流程</div></div>
  115. <div className={this.state.step1Class}>
  116. {this.state.stepNum > 1 ? <Icon type="check" /> : <i>1</i>}<div><p>填写</p><p>企业信息</p></div>
  117. </div>
  118. <div className={this.state.step2Class}>
  119. {this.state.stepNum > 2 ? <Icon type="check" /> : <i>2</i>}<div><p>填写</p><p>银行卡信息</p></div>
  120. </div>
  121. <div className={this.state.step3Class}>
  122. {this.state.stepNum > 3 ? <Icon type="check" /> : <i>3</i>}<div>确认信息</div>
  123. </div>
  124. <div className={this.state.step4Class}>
  125. {this.state.stepNum > 4 ? <Icon type="check" /> : <i>4</i>}<div>信息审核</div>
  126. </div>
  127. <div className={this.state.step5Class}>
  128. {this.state.stepNum > 5 ? <Icon type="check" /> : <i>5</i>}<div><p>填写打入</p><p>卡内金额</p></div>
  129. </div>
  130. <div className={this.state.step6Class}>
  131. {this.state.stepNum > 6 ? <Icon type="check" /> : <i>6</i>}<div>认证结果</div>
  132. </div>
  133. </div>
  134. <div className="certify-form-box">
  135. {(() => {
  136. switch (this.state.stepNum) {
  137. case 1:
  138. return <Personal changeStep={this.changeStep} />;
  139. case 2:
  140. return <Bank changeStep={this.changeStep} />;
  141. case 3:
  142. return <Confirm changeStep={this.changeStep} />;
  143. case 4:
  144. return <Audit changeStep={this.changeStep} />;
  145. case 5:
  146. return <Money changeStep={this.changeStep} />;
  147. case 6:
  148. return <Result changeStep={this.changeStep} />;
  149. };
  150. })()}
  151. </div>
  152. </div>
  153. )
  154. }
  155. });
  156. export default Content;