import React from 'react'; import { Icon, message } from 'antd'; import './certify.less'; import ajax from 'jquery/src/ajax/xhr.js' import $ from 'jquery/src/ajax'; import Personal from './personal.jsx'; import Bank from './bank.jsx'; import Confirm from './confirm.jsx'; import Audit from './audit.jsx'; import Money from './money.jsx'; import Result from './result.jsx'; const Content = React.createClass({ stepNumSwith(num) { switch (num) { case 1: this.setState({ step0Class: 'step-done', step1Class: 'step-doing', step2Class: 'step-none', step3Class: 'step-none', step4Class: 'step-none', step5Class: 'step-none', step6Class: 'step-none' }); break; case 2: this.setState({ step0Class: 'step-off', step1Class: 'step-done', step2Class: 'step-doing', step3Class: 'step-none', step4Class: 'step-none', step5Class: 'step-none', step6Class: 'step-none' }); break; case 3: this.setState({ step0Class: 'step-off', step1Class: 'step-off', step2Class: 'step-done', step3Class: 'step-doing', step4Class: 'step-none', step5Class: 'step-none', step6Class: 'step-none' }); break; case 4: this.setState({ step0Class: 'step-off', step1Class: 'step-off', step2Class: 'step-off', step3Class: 'step-done', step4Class: 'step-doing', step5Class: 'step-none', step6Class: 'step-none' }); break; case 5: this.setState({ step0Class: 'step-off', step1Class: 'step-off', step2Class: 'step-off', step3Class: 'step-off', step4Class: 'step-done', step5Class: 'step-doing', step6Class: 'step-none' }); break; case 6: this.setState({ step0Class: 'step-off', step1Class: 'step-off', step2Class: 'step-off', step3Class: 'step-off', step4Class: 'step-off', step5Class: 'step-done', step6Class: 'step-doing' }); break; }; }, getData() { $.ajax({ method: "get", dataType: "json", url: globalConfig.context + "/api/user/userPro", success: function (data) { if (data.data && data.data.process) { this.state.stepNum = data.data.process + 1 } else { this.state.stepNum = 1 }; this.stepNumSwith(this.state.stepNum); }.bind(this), }).done(function (data) { if (data.error.length) { message.warning(data.error[0].message); } }.bind(this)); }, getInitialState() { return { loading: false, }; }, componentWillMount() { this.getData() }, changeStep(i) { this.state.stepNum = i; this.stepNumSwith(i) }, render() { return ( <div className="certify-content"> <div className="certify-step clearfix"> <div className={this.state.step0Class}><div>个人实名认证流程</div></div> <div className={this.state.step1Class}> {this.state.stepNum > 1 ? <Icon type="check" /> : <i>1</i>}<div><p>填写</p><p>个人信息</p></div> </div> <div className={this.state.step2Class}> {this.state.stepNum > 2 ? <Icon type="check" /> : <i>2</i>}<div><p>填写</p><p>银行卡信息</p></div> </div> <div className={this.state.step3Class}> {this.state.stepNum > 3 ? <Icon type="check" /> : <i>3</i>}<div>确认信息</div> </div> <div className={this.state.step4Class}> {this.state.stepNum > 4 ? <Icon type="check" /> : <i>4</i>}<div>信息审核</div> </div> <div className={this.state.step5Class}> {this.state.stepNum > 5 ? <Icon type="check" /> : <i>5</i>}<div><p>填写打入</p><p>卡内金额</p></div> </div> <div className={this.state.step6Class}> {this.state.stepNum > 6 ? <Icon type="check" /> : <i>6</i>}<div>认证结果</div> </div> </div> <div className="certify-form-box"> {(() => { switch (this.state.stepNum) { case 1: return <Personal changeStep={this.changeStep} />; case 2: return <Bank changeStep={this.changeStep} />; case 3: return <Confirm changeStep={this.changeStep} />; case 4: return <Audit changeStep={this.changeStep} />; case 5: return <Money changeStep={this.changeStep} />; case 6: return <Result changeStep={this.changeStep} />; }; })()} </div> </div> ) } }); export default Content;