sourcecode/front/project/www/routes/course/online/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 { CommentFalls, AnswerCarousel, Consultation, Contact } from '../../../components/Other';
import Tabs from '../../../components/Tabs';
import Filter from '../../../components/Filter';
import { SingleItem, PackageItem } from '../../../components/Item';

export default class extends Page {
  initState() {
    return {
      list: [{}, {}],
      tab: '1',
      tab1Filter: { one: '1', two: '1' },
      tab2Filter: { one: '1' },
    };
  }

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

  onFilter(type, key, value) {
    this.state[type][key] = value;
    this.setState(this.state);
  }

  renderView() {
    const { tab } = this.state;
    return (
      <div>
        <div className="top content">
          <Tabs type="text" active={'1'} tabs={[{ title: '在线课程', key: '1' }, { title: '1v1私教', key: '2' }]} />
          <div className="f-r">
            <span className="t-2 m-r-1">优惠活动：2门9折，3门88折，4门及以上85折。</span>
            <Assets name="cart" />
            <span className="t-2">（ 1 ）</span>
          </div>
        </div>
        <div className="center">
          <div className="content">
            <Tabs
              type="division"
              theme="theme"
              size="small"
              space={2.5}
              width={100}
              border
              active={tab}
              tabs={[{ title: '单项购买', key: '1' }, { title: '套餐购买', key: '2' }]}
              onChange={key => this.onChangeTab(key)}
            />
            {this[`renderTab${tab}`]()}
          </div>
        </div>
        <Consultation />
        <CommentFalls />
        <AnswerCarousel
          list={[
            {
              question: '如果视频课程到期了却没有听完，没听的课程可以退款么',
              answer: '不可以的，视频课程为虚拟商品，购买成功后不接受退换。',
            },
            {
              question: '学习过程中可以申请停课么？',
              answer: '每个商品均有1次申请停课的机会，最长停课30天，停课时间不计入使用有效期内。',
            },
            {
              question: '我需要一个整体的GMAT备考计划，报课程的话可以提供么？',
              answer:
                '报语文全科“系统授课”的同学会赠送价值900元课前辅导，老师语音一对一与同学交流沟通，为同学提供针对性建议和详细的备考计划。',
            },
            {
              question: '如果视频课程到期了却没有听完，没听的课程可以退款么',
              answer: '不可以的，视频课程为虚拟商品，购买成功后不接受退换。',
            },
          ]}
        />
        <Contact />
        <Footer />
      </div>
    );
  }

  renderTab1() {
    const { tab1Filter, list = [] } = this.state;
    return [
      <Filter
        filter={tab1Filter}
        list={[
          {
            key: 'one',
            children: [
              { key: '1', title: '全部' },
              { key: '2', title: '长难句' },
              { key: '3', title: '语文Verbal' },
              { key: '4', title: '数学Quant' },
            ],
          },
          {
            key: 'two',
            children: [
              { key: '1', title: '全部' },
              { key: '2', title: '语法SC' },
              { key: '3', title: '阅读RC' },
              { key: '4', title: '逻辑RC' },
            ],
          },
        ]}
        onFilter={(key, value) => this.onFilter('tab1Filter', key, value)}
      />,
      <div className="tab-1-list">
        {list.map(() => {
          return <SingleItem />;
        })}
      </div>,
    ];
  }

  renderTab2() {
    const { tab2Filter, list = [] } = this.state;
    return [
      <Filter
        filter={tab2Filter}
        list={[
          {
            key: 'one',
            children: [
              { key: '1', title: '全部' },
              { key: '2', title: '语文Verbal' },
              { key: '3', title: '数学Quant' },
            ],
          },
        ]}
        onFilter={(key, value) => this.onFilter('tab2Filter', key, value)}
      />,
      <div className="tab-2-list">
        {list.map(() => {
          return <PackageItem />;
        })}
      </div>,
    ];
  }
}