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

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

export default class extends Page {
  constructor(props) {
    props.size = 10;
    super(props);
  }

  initState() {
    return {
      filterMap: {},
      list: [],
      tab: '1',
    };
  }

  onTabChange(tab) {
    const data = { tab };
    this.refreshQuery(data);
  }

  onFilter(value) {
    this.search(value, false);
    this.initData();
  }

  onSearch(value) {
    this.search({ keyword: value }, false);
    this.initData();
  }

  onAction() {}

  delAsk(id) {
    console.log(id);
  }

  renderView() {
    return (
      <div>
        <div className="top content t-8">
          千行课堂 > 全部课程 > OG20综合刷题 > 课时3 > <span className="t-1">套餐详情</span>
        </div>
        <div className="center content">
          <div className="t-1 t-s-20 m-b-2">
            OG20综合刷题——第3课时:XXXXXXX
            <div className="action f-r">
              <Button className="m-r-1" radius size="lager">
                立即购买
              </Button>
              <Button theme="default" radius size="lager">
                <Assets name="add" />
              </Button>
            </div>
          </div>
          <div className="t-7 t-s-18 f-w-b m-b-1">套餐价: ¥ 15000</div>
          <div className="t-1 t-s-16 desc">
            针对 0G20 的集中训练针对 0G20 的集中训练针对 0G20 的集中训练针对 0G20 的集中训练。针对 0G20 的集中训练针对
            0G20 的集中训练针对 0G20 的集，中训练针对 0G20 的集中训练针对 0G20 的集中训练针对。 0G20 的集中训练针对
            0，G20 的集中训练针对 0G20 的集中训练针对 0G20 的集中训。练针对 0G20 的集中训练针对 0G20 的集中训练针对 0G20
            的集中训练。针对 0G20 的集中训练针对 0G20 的集中训练针对 0G20 的集中训练针对 0G20 的集中训练。
          </div>
          <div className="main-title">包含课程</div>
          <div className="list">
            <SingleItem show />
            <SingleItem show />
            <SingleItem show />
          </div>
          <div className="main-title">配套服务</div>
          <div className="list">
            <div className="other-item d-i-b">
              <Assets name="" />
            </div>
            <div className="other-item d-i-b">
              <Assets name="" />
            </div>
            <div className="other-item d-i-b">
              <Assets name="" />
            </div>
          </div>
          <div className="main-title">赠送服务</div>
          <div className="list">
            <div className="service-item d-i-b">
              <Assets name="mokao" />
              <div className="t t-13 t-s-20 f-w-b">机经</div>
              <div className="t-13">1个月</div>
            </div>
            <div className="service-item d-i-b">
              <Assets name="VIP_1" />
              <div className="t t-13 t-s-20 f-w-b">VIP</div>
              <div className="t-13">3个月</div>
            </div>
            <div className="service-item d-i-b">
              <Assets name="jijing" />
              <div className="t t-13 t-s-20 f-w-b">模考</div>
              <div className="t-13">1个月</div>
            </div>
          </div>
        </div>
        <Contact />
        <Footer />
      </div>
    );
  }
}