content.jsx 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. import React from 'react';
  2. import { Icon } from 'antd';
  3. import './certify.less';
  4. import Personal from './personal.jsx';
  5. const Content = React.createClass({
  6. getInitialState() {
  7. return {
  8. loading: false,
  9. theKey: 'personal',
  10. stepNum: 1,
  11. step0Class:'step-done',
  12. step1Class:'step-doing',
  13. step2Class:'step-none',
  14. step3Class:'step-none',
  15. step4Class:'step-none',
  16. step5Class:'step-none',
  17. step6Class:'step-none',
  18. };
  19. },
  20. render() {
  21. return (
  22. <div className="certify-content">
  23. <div className="certify-step clearfix">
  24. <div className={this.state.step0Class}><div>个人实名认证流程</div></div>
  25. <div className={this.state.step1Class}>
  26. {this.state.stepNum > 1 ? <Icon type="check" /> : <i>1</i>}<div><p>填写</p><p>个人信息</p></div>
  27. </div>
  28. <div className={this.state.step2Class}>
  29. {this.state.stepNum > 2 ? <Icon type="check" /> : <i>2</i>}<div><p>填写</p><p>银行卡信息</p></div>
  30. </div>
  31. <div className={this.state.step3Class}>
  32. {this.state.stepNum > 3 ? <Icon type="check" /> : <i>3</i>}<div>确认信息</div>
  33. </div>
  34. <div className={this.state.step4Class}>
  35. {this.state.stepNum > 4 ? <Icon type="check" /> : <i>4</i>}<div>信息审核</div>
  36. </div>
  37. <div className={this.state.step5Class}>
  38. {this.state.stepNum > 5 ? <Icon type="check" /> : <i>5</i>}<div><p>填写打入</p><p>卡内金额</p></div>
  39. </div>
  40. <div className={this.state.step6Class}>
  41. {this.state.stepNum > 6 ? <Icon type="check" /> : <i>6</i>}<div>认证结果</div>
  42. </div>
  43. </div>
  44. <div className="certify-form">
  45. {(() => {
  46. switch (this.state.leftKey) {
  47. case 'personal':
  48. return <Personal />;
  49. };
  50. })()}
  51. </div>
  52. </div>
  53. )
  54. }
  55. });
  56. export default Content;