sourcecode/front/project/www/routes/course/detail/page.js

import React from 'react';
import './index.less';
import Page from '@src/containers/Page';
import Assets from '@src/components/Assets';
import Footer from '../../../components/Footer';
import { Contact } from '../../../components/Other';
import Tabs from '../../../components/Tabs';
import Button from '../../../components/Button';

export default class extends Page {
  initState() {
    return {
      tab: '1',
      key: '1',
    };
  }

  onChangeTab(tab) {
    this.setState({ tab });
  }

  onChangeItem(key) {
    this.setState({ key });
  }

  renderView() {
    return (
      <div>
        <div className="top content t-8">
          千行课堂 > 全部课程 > OG20综合刷题 > 课时3 > <span className="t-1">套餐详情</span>
        </div>
        {this.renderDetail()}
        <Contact />
        <Footer />
      </div>
    );
  }

  renderDetail() {
    const { tab } = this.state;
    return [
      <div className="center">
        <div className="content">
          <div className="item-detail">
            <div className="left">
              <Assets name="" />
              <div className="tag-list">
                <div className="tag">新手</div>
                <div className="tag">原创</div>
              </div>
            </div>
            <div style={{ width: 760 }} className="right">
              <div className="t-1 t-s-20">OG20基础刷题套餐 </div>
              <div className="t-7 m-b-2">
                对“忽略有效考点”的解析进行补充，同时讲解OG不够精准的解析，帮助考生明确重点、避开误区，节省大量的时间和精力，刷OG必备。
              </div>
              <div className="">
                <div className="d-i-b t-1">最近更新：</div>
                <div className="d-i-b t-8">2019-06-20 10:21:04</div>
              </div>
              <div className="">
                <div className="d-i-b t-1">页数：</div>
                <div className="d-i-b t-8">30页</div>
              </div>
              <div className="">
                <div className="d-i-b t-1">格式：</div>
                <div className="d-i-b t-8">PDF</div>
              </div>
              <div className="m-b-1">
                <div className="d-i-b t-1">获取方式：</div>
                <div className="d-i-b t-8">发送至邮箱</div>
              </div>
              <div className="m-b-1">
                <div style={{ marginTop: 12 }} className="d-i-b t-1 t-s-16 v-a-t">
                  价格：
                </div>
                <div className="d-i-b t-7 t-s-28 f-w-b"> ¥ 15000</div>
              </div>
              <div className="action">
                <Button className="m-r-1" radius size="lager">
                  立即购买
                </Button>
                <Button className="m-r-1" theme="default" radius size="lager">
                  <Assets name="add" />
                </Button>
                <Button theme="default" radius size="lager">
                  预览
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>,
      <div className="bottom">
        <div className="content">
          <Tabs
            type="full"
            border
            active={tab}
            tabs={[
              { title: '资料介绍', key: '1' },
              { title: '作者介绍', key: '2' },
              { title: '获取方式', key: '3' },
              { title: 'FAQs', key: '4' },
              { title: '学员评价', key: '5' },
            ]}
          />
          {this[`renderTab${tab}`]()}
        </div>
      </div>,
    ];
  }

  renderTab1() {
    return <div />;
  }

  renderTab2() {
    return <div />;
  }

  renderTab3() {
    return <div />;
  }

  renderTab4() {
    return <div />;
  }

  renderTab5() {
    return <div />;
  }
}