sourcecode/front/project/www/components/Examination/index.js

import React, { Component } from 'react';
import './index.less';
import { Icon } from 'antd';
import { SpecialRadioGroup } from '../Radio';
import Modal from '../Modal';
import Button from '../Button';
import TotalSort from '../TotalSort';
import Date from '../Date';
import Ratio from '../Ratio';

export default class extends Component {
  constructor(props) {
    super(props);
    this.stepProp = {
      0: {
        title: '我的身份',
      },
      1: {
        title: '下次考试时间',
      },
      2: {
        title: '目标成绩',
      },
      3: {
        title: '最晚出分时间(选填)',
      },
      4: {
        title: '备考信息',
        onConfirm: props.onConfirm,
        onCancel: props.onCancel,
        confirmText: '关闭',
        cancelText: '修改',
      },
    };
    this.state = { step: 0, data: { type: '1', time: '1' } };
  }

  onChange(type, key) {
    const { data, step } = this.state;
    data[type] = key;
    this.setState({ data, step: step + 1 });
  }

  onPrev() {
    const { step } = this.state;
    this.setState({ step: step - 1 });
  }

  onNext() {
    const { step } = this.state;
    this.setState({ step: step + 1 });
  }

  render() {
    const { step } = this.state;
    const { show, onClose } = this.props;
    return (
      <Modal
        className="examination-modal"
        show={show}
        width={460}
        {...this.stepProp[step]}
        onClose={() => onClose && onClose()}
      >
        <div className="examination-modal-wrapper">{this[`renderStep${step}`]()}</div>
      </Modal>
    );
  }

  renderStep0() {
    const { data } = this.state;
    const { type } = data;
    return (
      <div className="step-0-layout">
        <SpecialRadioGroup
          list={[
            { label: '学生-Domestic', value: '1' },
            { label: '学生-Overseas', value: '2' },
            { label: '在职-Domestic', value: '3' },
            { label: '在职-Overseas', value: '4' },
            { label: 'Gap Year', value: '5' },
          ]}
          value={type}
          width={190}
          space={10}
          onChange={key => this.onChange('type', key)}
        />
        <div className="action-layout">
          <div className="next" onClick={() => this.onNext()}>
            下一题
            <Icon type="right-circle" theme="filled" />
          </div>
        </div>
      </div>
    );
  }

  renderStep1() {
    const { data } = this.state;
    const { time } = data;
    return (
      <div className="step-1-layout">
        <SpecialRadioGroup
          list={[
            { label: '近1个月', value: '1' },
            { label: '近2个月', value: '2' },
            { label: '近3个月', value: '3' },
            { label: '半年内', value: '4' },
          ]}
          value={time}
          width={195}
          space={10}
          onChange={key => this.onChange('time', key)}
        />
        <div className="action-layout">
          <div className="prev" onClick={() => this.onPrev()}>
            <Icon type="left-circle" theme="filled" />
            上一题
          </div>
          <div className="next" onClick={() => this.onNext()}>
            下一题
            <Icon type="right-circle" theme="filled" />
          </div>
        </div>
      </div>
    );
  }

  renderStep2() {
    return (
      <div className="step-2-layout">
        <TotalSort />
        <div className="action-layout">
          <div className="prev" onClick={() => this.onPrev()}>
            <Icon type="left-circle" theme="filled" />
            上一题
          </div>
          <div className="next" onClick={() => this.onNext()}>
            下一题
            <Icon type="right-circle" theme="filled" />
          </div>
        </div>
      </div>
    );
  }

  renderStep3() {
    return (
      <div className="step-3-layout">
        <Date />
        <div className="action-layout">
          <div className="prev" onClick={() => this.onPrev()}>
            <Icon type="left-circle" theme="filled" />
            上一题
          </div>
          <Button size="lager" radius>
            提交
          </Button>
        </div>
      </div>
    );
  }

  renderStep4() {
    return (
      <div className="step-4-layout">
        <div className="tip">
          <Icon type="check" />
          7天VIP权限已赠送至您的账户。
        </div>
        <Ratio
          text="身份"
          subtext="在职(D)"
          values={[
            { label: '学生-D; 20%', value: 10, color: '#41A6F3' },
            { label: '学生- O; 20%', value: 20, color: '#3F86EA' },
            { label: '在职-D; 20%', value: 20, color: '#41A6F3' },
            { label: '在职- O; 20%', value: 20, color: '#6DC0FF' },
            { label: 'Gap Year; 20%', value: 20, color: '#9BD4FF' },
          ]}
        />
        <Ratio
          text="考试时间"
          subtext="近1个月"
          values={[
            { label: '近1个月; 20%', value: 10, color: '#6865FD' },
            { label: '近2个月; 20%', value: 20, color: '#322EF2' },
            { label: '近3个月; 20%', value: 20, color: '#8F65FF' },
            { label: '半年内; 20%', value: 20, color: '#8C8AFF' },
          ]}
        />
        <Ratio
          text="目标成绩"
          subtext="670分"
          values={[
            { label: '600+； 20%', value: 10, color: '#2754E0' },
            { label: '650+； 20%', value: 20, color: '#3F86EA' },
            { label: '700+； 20%', value: 20, color: '#41A6F3' },
            { label: '700+； 20%', value: 20, color: '#6DC0FF' },
          ]}
        />
        <Ratio
          text="出分日期"
          subtext="2019-11"
          values={[
            { label: '近1个月; 20%', value: 10, color: '#6865FD' },
            { label: '近2个月; 20%', value: 20, color: '#322EF2' },
            { label: '近3个月; 20%', value: 20, color: '#8F65FF' },
            { label: '半年内; 20%', value: 20, color: '#8C8AFF' },
            { label: '半年内; 20%', value: 20, color: '#8C8AFF' },
            { label: '1年内; 20%', value: 20, color: '#8F65FF' },
            { label: '不清楚', value: 20, color: '#C3C1D1' },
          ]}
        />
      </div>
    );
  }
}