import React from 'react'; 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, subject: TextbookSubject[0].value, 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 }); }); } 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() { const { subject } = this.params; const { item, data } = this.state; const no = item.no + 1; if (no > data.latest[`${subject}Number`]) return; this.refreshItem(no); } onPrev() { const { item } = this.state; const no = item.no - 1; if (no === 0) return; this.refreshItem(no); } 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 { showTip, base = {}, subject, data = {}, textbookSubject } = this.state; const { latest = {} } = data; return ( <div> <div className="top content t-8"> 机经 > 本期机经 > <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()} <Assets className="prev" name="footer_previous_highlight_1" onClick={() => this.onPrev()} /> <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> ); } }