sourcecode/front/project/www/routes/textbook/topicDetail/page.js

import React from 'react';
import { Link } from 'react-router-dom';
import './index.less';
import Assets from '@src/components/Assets';
import Page from '@src/containers/Page';
import Footer from '../../../components/Footer';
import { Contact } from '../../../components/Other';
import Select from '../../../components/Select';
import Modal from '../../../components/Modal';
import { Button } from '../../../components/Button';
import { Textbook } from '../../../stores/textbook';
import { My } from '../../../stores/my';
import { Main } from '../../../stores/main';
import { User } from '../../../stores/user';
import { TextbookSubject, TextbookQuality, TextbookType } from '../../../../Constant';
import { getMap, formatDate } from '../../../../../src/services/Tools';

const TextbookSubjectMap = getMap(TextbookSubject, 'value', 'label');
const TextbookQualityMap = getMap(TextbookQuality, 'value', 'label');
const TextbookTypeMap = getMap(TextbookType, 'value', 'label');

export default class extends Page {
  constructor(props) {
    super(props);
    this.keyMap = {};
    window.onkeydown = this.onKeydown.bind(this);
    window.onkeyup = this.onKeyup.bind(this);
  }

  initState() {
    const { info = {} } = this.props.user;
    return {
      open: false,
      showTip: !info.textbookTips,
      textbookSubject: TextbookSubject.map(row => {
        return {
          title: row.label,
          key: row.value,
        };
      }),
    };
  }

  init() {
    Main.getBase()
      .then(result => {
        this.setState({ base: result });
      });
  }

  initData() {
    Textbook.getInfo()
      .then(result => {
        if (!result.hasService) {
          linkTo('/textbook');
        }
        this.setState({ data: result });
        console.log(this.state);
        this.refreshItem(this.state.search.no || 1);
      });
  }

  refreshItem(no) {
    const { subject } = this.params;
    const { data } = this.state;
    Textbook.noTopic(data.latest.id, subject, no)
      .then(result => {
        this.setState({ item: result });
        const canNext = this.canNext();
        const canPrev = this.canPrev();
        this.setState({ canNext, canPrev });
      });
  }

  onKeydown(e) {
    let active = false;
    if (this.keyMap[e.keyCode]) return false;
    switch (e.keyCode) {
      case 32:
        active = true;
        break;
      case 37:
        active = true;
        break;
      case 39:
        active = true;
        break;
      default:
        break;
    }
    if (active) {
      this.keyMap[e.keyCode] = true;
      return false;
    }
    return true;
  }

  onKeyup(e) {
    let active = false;
    switch (e.keyCode) {
      case 32:
        active = true;
        this.onOpen();
        break;
      case 37:
        active = true;
        this.onPrev();
        break;
      case 39:
        active = true;
        this.onNext();
        break;
      default:
        break;
    }
    if (active) {
      this.keyMap[e.keyCode] = false;
      return false;
    }
    return true;
  }

  onOpen() {
    this.setState({ open: !this.state.open });
  }

  onNext() {
    if (!this.canNext()) return;
    const { item } = this.state;
    const no = item.no + 1;
    this.refreshItem(no);
  }

  canNext() {
    const { subject } = this.params;
    const { item = {}, data } = this.state;
    const no = item.no + 1;
    if (no > data.latest[`${subject}Number`]) return false;
    return true;
  }

  onPrev() {
    if (!this.canPrev()) return;
    const { item = {} } = this.state;
    const no = item.no - 1;
    this.refreshItem(no);
  }

  canPrev() {
    const { item = {} } = this.state;
    const no = item.no - 1;
    if (no <= 0) return false;
    return true;
  }

  closeTips() {
    this.setState({ showTip: false });
    My.textbookTips()
      .then(() => {
        const { info } = this.props.user;
        info.textbookTips = 1;
        User.infoHandle(info);
      });
  }

  changeSubject(subject) {
    linkTo(`/textbook/topic/list/${subject}`);
  }

  renderView() {
    const { subject } = this.params;
    const { showTip, base = {}, data = {}, textbookSubject, canNext = false, canPrev = false } = this.state;
    const { latest = {} } = data;
    return (
      <div>
        <div className="top content t-8">
          <Link to="/textbook">机经</Link> > 本期机经 > <span className="t-1">{TextbookSubjectMap[subject]}</span>
          <Select className="f-r m-t-1" size="small" theme="white" value={subject} list={textbookSubject} onChange={({ key }) => this.changeSubject(key)} />
        </div>
        <div className="center content">
          {TextbookSubjectMap[subject]}】{latest.startDate && formatDate(latest.startDate, 'MMDD')} 起{TextbookSubjectMap[subject]}机经整理
          {this.renderDetail()}
          {canPrev && <Assets className="prev" name="footer_previous_highlight_1" onClick={() => this.onPrev()} />}
          {canNext && <Assets className="next" name="footer_next_highlight_1" onClick={() => this.onNext()} />}
        </div>
        <Contact data={base.contact} />
        <Footer />
        <Modal
          show={showTip}
          title="提示"
          onConfirm={() => this.closeTips()}
          confirmText="好的,知道了"
          btnAlign="center"
        >
          <div className="t-2 t-s-18">敲击键盘← →可翻页；</div>
          <div className="t-2 t-s-18">敲击空格键第一次查看解析，敲击空格键第二次收起解析。</div>
        </Modal>
      </div>
    );
  }

  renderDetail() {
    const { open, subject, item = {} } = this.state;
    return (
      <div className="detail">
        <div className="m-b-1">
          <span className="t-1 t-s-18 m-r-1">NO.{item.no} {subject === 'quant' ? TextbookTypeMap[item.keyword] : item.keyword}</span>
          <span className="t-3 t-s-12 m-r-1">{TextbookQualityMap[item.quality]}</span>
          <span className="t-3 t-s-12 m-r-1">{item.createTime && formatDate(item.createTime, 'YYYY-MM-DD HH:mm:ss')}</span>
          <Button radius className="f-r" onClick={() => this.onOpen()}>
            {open ? '收起' : '展开'}解析
          </Button>
        </div>
        <div className="t-2 t-s-16 m-b-2" dangerouslySetInnerHTML={{ __html: item.detail }} />
        <div hidden={!open} className="p-20 b-c-3">
          <div className="t t-1 t-s-16 f-w-b m-b-5">官方解析</div>
          <div className="t-1 t-s-16" dangerouslySetInnerHTML={{ __html: item.content }} />
        </div>
      </div>
    );
  }
}