sourcecode/front/project/h5/routes/page/open/page.js

import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import { getMap, formatDate } from '@src/services/Tools';
import Checkbox from '../../../components/CheckBox';
import Button from '../../../components/Button';
import Icon from '../../../components/Icon';
import { Order } from '../../../stores/order';
import { ServiceKey } from '../../../../Constant';

const ServiceKeyMap = getMap(ServiceKey, 'value', 'label');

export default class extends Page {
  initState() {
    return { state: 'open' };
  }

  initData() {
    const { id } = this.params;
    Order.getRecord(id)
      .then(result => {
        if (result.isUse) {
          this.setState({ state: 'finish', data: result });
          return;
        }
        this.setState(result);
      });
  }

  submit() {
    Order.useRecord(this.params.id)
      .then((result) => {
        this.setState({ state: 'finish', data: result });
      });
  }

  renderView() {
    const { state } = this.state;
    switch (state) {
      case 'finish':
        return this.renderFinish();
      default:
        return this.renderOpen();
    }
  }

  renderOpen() {
    const { productType } = this.state;
    if (productType === 'service') {
      return this.renderService();
    }
    return this.renderCourse();
  }

  renderCourse() {
    const { course = {}, endTime } = this.state;
    if (!endTime) return null;
    return (
      <div>
        <div className="icon">
          <Assets name="img3" />
        </div>
        <div className="title">您正在开通“{course.data}”</div>
        <div className="tip">有效期至：{formatDate(endTime, 'YYYY-MM-DD')}</div>
        <Button block radius onClick={() => {
          this.submit();
        }}>
          立即开通
        </Button>
        <div className="no" onClick={() => {
          goBack();
        }}>暂不开通</div>
      </div>
    );
  }

  renderService() {
    const { service, endTime } = this.state;
    if (!endTime) return null;
    return (
      <div>
        <div className="icon">
          <Assets name="img3" />
        </div>
        <div className="title">您正在开通“{ServiceKeyMap[service]}”服务</div>
        <div className="tip">有效期至：{formatDate(endTime, 'YYYY-MM-DD')}</div>
        {service === 'textbook' && <div className="check">
          <Checkbox checked={!!this.state.checked} onClick={() => {
            this.setState({ checked: !this.state.checked });
          }} />
          <span>邮箱订阅机经</span>
        </div>}

        <Button block radius onClick={() => {
          this.submit();
        }}>
          立即开通
        </Button>
        <div className="no" onClick={() => {
          goBack();
        }}>暂不开通</div>
      </div>
    );
  }

  renderFinish() {
    const { data } = this.state;
    return (
      <div className="finish">
        <div className="icon">
          <Icon type="check-circle" />
        </div>
        <div className="title">开通成功！</div>
        <div className="desc">生效时间：{formatDate(data.useStartTime, 'YYYY-MM-DD')}</div>
      </div>
    );
  }
}