kede-client/js/component/certify/content.jsx

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',
                    step4Class: 'step-done',
                    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} style={{display:'none'}}>
                        {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>5</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 99:
                                return <Money changeStep={this.changeStep} />;
                            case 6:
                                return <Result changeStep={this.changeStep} />;
                        };
                    })()}
                </div>
            </div>
        )
    }
});

export default Content;