sourcecode/front/project/www/routes/course/dataDetail/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 Footer from '../../../components/Footer';
import { Contact } from '../../../components/Other';
import Tabs from '../../../components/Tabs';
import Button from '../../../components/Button';
import { User } from '../../../stores/user';
import { Course } from '../../../stores/course';
import { Order } from '../../../stores/order';
import { Main } from '../../../stores/main';

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

  init() {
    Main.dataStruct().then(result => {
      const dataStructSelect = result.map(row => {
        return {
          title: `${row.titleZh}${row.titleEn}`,
          key: row.id,
        };
      });
      const dataStructMap = getMap(dataStructSelect, 'key');
      this.setState({ dataStructSelect, dataStructMap });
    });
    Main.getBase()
      .then(result => {
        this.setState({ base: result });
      });
  }

  initData() {
    const { id } = this.params;
    Course.getData(id)
      .then(result => {
        this.setState({ data: result });
      });
    this.view(id);
    Main.listFaq({ page: 1, size: 100, channel: 'course_data' }).then(result => {
      this.faqs = result.list;
      this.setState({ faqs: result.list });
    });
    Main.listComment({ page: 1, size: 100, channel: 'course_data' }).then(result => {
      this.comments = result.list;
      this.setState({ comments: result.list });
    });
  }

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

  view(id) {
    Course.dataView(id);
  }

  buy() {
    const { data } = this.props;
    User.needLogin().then(() => {
      Order.speedPay({ productType: 'data', productId: data.id })
        .then(result => {
          User.needPay(result)
            .then(() => {
              linkTo('/my/tools?tab=data');
            });
        });
    });
  }

  add() {
    const { data } = this.props;
    User.needLogin().then(() => {
      Order.addCheckout({ productType: 'data', productId: data.id })
        .then(() => {
          this.setState({ add: true });
        });
    });
  }

  renderView() {
    const { base = {}, data = {}, dataStructMap = {} } = this.state;
    return (
      <div>
        <div className="top content t-8">
          千行课堂 > 全部资料 > {data.parentStructId > 0 ? `${(dataStructMap[data.parentStructId] || {}).title} >` : ''} {(dataStructMap[data.structId] || {}).title} > {data.title} > <span className="t-1">资料详情</span>
        </div>
        {this.renderDetail()}
        <Contact data={base.contact} />
        <Footer />
      </div>
    );
  }

  renderDetail() {
    const { tab, data = {}, add } = this.state;
    return [
      <div className="center">
        <div className="content">
          <div className="item-detail">
            <div className="left">
              <Assets name="" src={data.cover} />
              <div className="tag-list">
                {data.isNovice > 0 && <div className="tag">新手</div>}
                {data.isOriginal > 0 && <div className="tag">原创</div>}
              </div>
            </div>
            <div style={{ width: 760 }} className="right">
              <div className="t-1 t-s-20">{data.title}</div>
              <div className="t-7 m-b-2" dangerouslySetInnerHTML={{ __html: data.content }} />
              <div className="">
                <div className="d-i-b t-1">最近更新：</div>
                <div className="d-i-b t-8">{data.latestTime && formatDate(data.latestTime, 'YYYY-MM-DD HH:mm:ss')}</div>
              </div>
              <div className="">
                <div className="d-i-b t-1">页数：</div>
                <div className="d-i-b t-8">{data.pages}页</div>
              </div>
              <div className="">
                <div className="d-i-b t-1">格式：</div>
                <div className="d-i-b t-8">{data.dataType === 'paper' ? '纸质' : 'PDF'}</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"> ¥ {data.price}</div>
              </div>
              <div className="action">
                {!data.have && <Button className="m-r-1" radius size="lager" onClick={() => {
                  if (data.dataType === 'paper') {
                    openLink(data.link);
                  } else {
                    this.buy();
                  }
                }}>
                  立即购买
                </Button>}
                {!data.have && <Button className="m-r-1" theme="default" disabled={data.add || add} radius size="lager" onClick={() => this.add()}>
                  <Assets name="add" />
                </Button>}
                {!data.have && <Button theme="default" radius size="lager" onClick={() => openLink(data.resource)}>
                  预览
                </Button>}
                {data.have && <Button className="f-r" theme="default" radius size="lager" onClick={() => openLink(data.resource)}>
                  查看资料
                </Button>}
              </div>
              {data.have && <Assets className="buyed" width={75} height={75} name="Purchased" />}
            </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 />;
  }
}