page.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476
  1. import React from 'react';
  2. import './index.less';
  3. // import { Link } from 'react-router-dom';
  4. import { Anchor, Icon } from 'antd';
  5. import Assets from '@src/components/Assets';
  6. import Page from '@src/containers/Page';
  7. import Select from '../../../components/Select';
  8. import Button from '../../../components/Button';
  9. import QAList from '../../../components/QAList';
  10. import Tabs from '../../../components/Tabs';
  11. import { SuppleModal, SuppleFinishModal, FaqModal, FinishModal } from '../../../components/OtherModal';
  12. import { Main } from '../../../stores/main';
  13. import { User } from '../../../stores/user';
  14. import { getMap, formatTreeData } from '../../../../../src/services/Tools';
  15. export default class extends Page {
  16. initState() {
  17. this.areaMap = {};
  18. this.categoryMap = {};
  19. this.loadArticleMap = {};
  20. this.readPlateMap = {};
  21. this.loadReadMap = {};
  22. this.dataList = null;
  23. return {
  24. readTab: '1',
  25. // load: false,
  26. // list: [
  27. // {
  28. // key: '1',
  29. // title: '了解GMAT',
  30. // children: true,
  31. // },
  32. // { key: '2', title: '推荐阅读' },
  33. // { key: '3', title: '考场查询' },
  34. // { key: '4', title: '熟悉备考资料', children: true },
  35. // ],
  36. // current: '1',
  37. // scrollCurrent: '1-1',
  38. // result: [{}, {}, {}],
  39. // data: [
  40. // { key: '1', id: 'data1', title: '官方', children: [{}, {}, {}] },
  41. // { key: '2', id: 'data2', title: '非官方', children: [{}, {}, {}] },
  42. // ],
  43. // page: [
  44. // {
  45. // key: '1-1',
  46. // title: '考试功能',
  47. // id: '#test1',
  48. // content:
  49. // '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
  50. // },
  51. // {
  52. // key: '1-2',
  53. // title: '出题原理',
  54. // id: '#test2',
  55. // content:
  56. // '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
  57. // },
  58. // {
  59. // key: '1-3',
  60. // title: '出题原理',
  61. // id: '#test3',
  62. // content:
  63. // '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
  64. // },
  65. // {
  66. // key: '1-4',
  67. // title: '出题原理',
  68. // id: '#test4',
  69. // content:
  70. // '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
  71. // },
  72. // {
  73. // key: '1-5',
  74. // title: '出题原理',
  75. // id: '#test5',
  76. // content:
  77. // '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
  78. // },
  79. // {
  80. // key: '1-6',
  81. // title: '出题原理',
  82. // id: '#test6',
  83. // content:
  84. // '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
  85. // },
  86. // {
  87. // key: '1-7',
  88. // title: '出题原理',
  89. // id: '#test7',
  90. // content:
  91. // '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
  92. // },
  93. // {
  94. // key: '1-8',
  95. // title: '出题原理',
  96. // id: '#test8',
  97. // content:
  98. // '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
  99. // },
  100. // {
  101. // key: '1-9',
  102. // title: '出题原理',
  103. // id: '#test9',
  104. // content:
  105. // '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
  106. // },
  107. // {
  108. // key: '1-10',
  109. // title: '出题原理',
  110. // id: '#test10',
  111. // content:
  112. // '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
  113. // },
  114. // {
  115. // key: '1-11',
  116. // title: '出题原理',
  117. // id: '#test11',
  118. // content:
  119. // '11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
  120. // },
  121. // ],
  122. };
  123. }
  124. init() {
  125. Main.readyInfo()
  126. .then(result => {
  127. // read, category, area
  128. this.areaMap = getMap(result.area, 'id', 'title');
  129. result.category = result.category.map(row => {
  130. row.key = row.id;
  131. return row;
  132. });
  133. result.category.push({
  134. id: 'read',
  135. key: 'read',
  136. title: '推荐阅读',
  137. isRead: true,
  138. });
  139. result.category.push({
  140. id: 'faq',
  141. key: 'faq',
  142. title: 'FAQs',
  143. isFaq: true,
  144. });
  145. this.categoryMap = getMap(result.category, 'id');
  146. const list = formatTreeData(result.category, 'id', 'title', 'parentId').map((row) => {
  147. if (row.isRoom) row.children = [];
  148. return row;
  149. });
  150. const readPlates = ((result.read || {}).plates || []).map((row, index) => {
  151. row.title = row.plate;
  152. row.key = `${index + 1}`;
  153. return row;
  154. });
  155. this.readPlateMap = getMap(readPlates, 'key');
  156. this.setState({ list, readPlates });
  157. this.changePage(list[0].id);
  158. });
  159. }
  160. initData() {
  161. }
  162. refreshRoom() {
  163. const { isOverseas, keyword } = this.state;
  164. Main.listRoom({ page: 1, size: 10, keyword, isOverseas })
  165. .then(result => {
  166. result.list = result.list.map(row => {
  167. if (row.isOverseas) return row;
  168. row.area = this.areaMap[row.areaId];
  169. return row;
  170. });
  171. this.setState({ rooms: result.list });
  172. });
  173. }
  174. refreshData(item) {
  175. if (!this.dataList) {
  176. Main.allData()
  177. .then(result => {
  178. const official = result.filter(row => row.isOfficial);
  179. const unofficial = result.filter(row => !row.isOfficial);
  180. item.children.forEach(row => {
  181. if (row.isOfficial) {
  182. row.children = official;
  183. } else {
  184. row.children = unofficial;
  185. }
  186. });
  187. this.dataList = result;
  188. this.setState({ datas: item.children });
  189. this.readyScroll(item.children);
  190. });
  191. } else {
  192. this.setState({ datas: item.children });
  193. this.readyScroll(item.children);
  194. }
  195. }
  196. refreshList(item) {
  197. const { key } = item;
  198. if (!this.loadArticleMap[key]) {
  199. Main.listArticle(key)
  200. .then(result => {
  201. this.loadArticleMap[key] = result;
  202. this.setState({ articles: result });
  203. this.readyScroll(item.children);
  204. });
  205. } else {
  206. const list = this.loadArticleMap[key];
  207. this.setState({ articles: list });
  208. this.readyScroll(item.children);
  209. }
  210. }
  211. refreshFaq() {
  212. if (!this.faqList) {
  213. Main.listFaq({ page: 1, size: 1000, channel: 'getready' })
  214. .then(result => {
  215. this.faqList = result.list;
  216. this.setState({ faqs: this.faqList });
  217. });
  218. } else {
  219. this.setState({ faqs: this.faqList });
  220. }
  221. }
  222. readyScroll(list) {
  223. if (this.scrollTimeKey) clearTimeout(this.scrollTimeKey);
  224. this.initScroll(list);
  225. }
  226. initScroll(list) {
  227. this.load = false;
  228. try {
  229. list.forEach(item => {
  230. item.top = document.getElementById(item.id).offsetTop - 100;
  231. return item;
  232. });
  233. this.load = true;
  234. } catch (e) {
  235. this.scrollTimeKey = setTimeout(() => {
  236. this.initScroll(list);
  237. }, 500);
  238. }
  239. }
  240. scrollListener(e) {
  241. if (!this.load) return;
  242. this.onScroll(e);
  243. }
  244. inPage() {
  245. document.getElementById('root').addEventListener('scroll', this.scrollListener.bind(this));
  246. }
  247. outPage() {
  248. document.getElementById('root').removeEventListener('scroll', this.scrollListener.bind(this));
  249. }
  250. onScroll(e) {
  251. const t = e.target.scrollTop;
  252. const { current, scrollCurrent } = this.state;
  253. const _list = this.categoryMap[current].children;
  254. let _current = null;
  255. for (let i = 0; i < _list.length; i += 1) {
  256. if (!_current) _current = _list[i].key;
  257. if (t < _list[i].top) break;
  258. _current = _list[i].key;
  259. }
  260. if (_current !== scrollCurrent) {
  261. this.setState({ scrollCurrent: _current });
  262. }
  263. }
  264. scrollTo(top) {
  265. document.getElementById('root').scrollTo({ top, behavior: 'smooth' });
  266. }
  267. changePage(key) {
  268. const item = this.categoryMap[key];
  269. if (item.isRoom) {
  270. this.refreshRoom();
  271. } else if (item.isData) {
  272. this.refreshData(item);
  273. } else if (item.isRead) {
  274. this.refreshRead();
  275. } else if (item.isFaq) {
  276. this.refreshFaq();
  277. } else {
  278. this.refreshList(item);
  279. }
  280. this.setState({ current: key, open: true });
  281. }
  282. refreshRead() {
  283. // init
  284. const { readPlates } = this.state;
  285. this.onChangeReadTab(readPlates[0].key);
  286. }
  287. onChangeReadTab(key) {
  288. const plate = this.readPlateMap[key];
  289. this.setState({ readTab: key, plate, reads: [] });
  290. if (!this.loadReadMap[key]) {
  291. Main.listRead({ page: 1, size: 100, plate: key })
  292. .then(result => {
  293. this.loadReadMap[key] = result.list;
  294. this.setState({ reads: result.list });
  295. });
  296. } else {
  297. const list = this.loadReadMap[key];
  298. this.setState({ reads: list });
  299. }
  300. }
  301. renderView() {
  302. const { list, current, scrollCurrent, open } = this.state;
  303. let detail = {};
  304. return (
  305. <div>
  306. <div className="content">
  307. <div className="left">
  308. <Anchor offsetTop={90} getContainer={() => document.getElementById('root')}>
  309. {list.map(item => {
  310. if (item.key === current) detail = item;
  311. return (
  312. <div
  313. className={`page-item ${item.key === current ? 'active' : ''}`}
  314. onClick={() => {
  315. if (item.key === current) {
  316. this.setState({ open: !open });
  317. } else {
  318. this.changePage(item.key);
  319. }
  320. }}
  321. >
  322. {item.children && item.children.length > 0 && <Assets name="dropdown_hover" className="up" />}
  323. {<Assets name="dropdown_normal" className="down" />}
  324. {(!item.children || item.children.length === 0) && <Assets name="dropdown_hover" className="change" />}
  325. <div className="page-item-title">{item.title}</div>
  326. {current === item.key && open &&
  327. item.children &&
  328. item.children.map(child => {
  329. return (
  330. <div
  331. style={{ margin: 3 }}
  332. className={`t-s-12 t-2 c-p ${child.key === scrollCurrent ? 't-4' : ''}`}
  333. onClick={(e) => {
  334. e.stopPropagation();
  335. this.scrollTo(child.top);
  336. }}
  337. title={child.title}
  338. >
  339. {child.title}
  340. </div>
  341. );
  342. })}
  343. </div>
  344. );
  345. })}
  346. </Anchor>
  347. </div>
  348. <div className="center">
  349. <div className="t-1 t-s-24 m-b-2">{detail.title}</div>
  350. {!detail.isData && !detail.isRoom && !detail.isRead && !detail.isFaq && this.renderList()}
  351. {!!detail.isRoom && this.renderRoom()}
  352. {!!detail.isData && this.renderData()}
  353. {!!detail.isRead && this.renderRead()}
  354. {!!detail.isFaq && this.renderFaq()}
  355. </div>
  356. </div>
  357. </div>
  358. );
  359. }
  360. renderRoom() {
  361. const { rooms = [], isOverseas, keyword, showFinish, showSupple, supple, room } = this.state;
  362. return (
  363. <div className="query-layout">
  364. <div className="search-wrapper">
  365. <Select theme="white" value={isOverseas} list={[{ title: '中国', key: false }, { title: '海外', key: true }]} onChange={({ key }) => this.setState({ isOverseas: key })} />
  366. <input value={keyword} onChange={(e) => this.setState({ keyword: e.target.value })} />
  367. <Button width={150} onClick={() => this.refreshRoom()}>
  368. <Icon className="m-r-5" type="search" />
  369. 搜索考场
  370. </Button>
  371. </div>
  372. {rooms.map((item, index) => {
  373. return (
  374. <div className="m-b-2">
  375. <div className="t-1 t-s-18">{index + 1}.{item.title}</div>
  376. <div className="t-1">{item.address}</div>
  377. <div className="t-1">
  378. 温馨提示: {item.description} <span className="t-4 c-p" onClick={() => User.needLogin().then(() => this.setState({ showSupple: true, supple: { roomId: item.id }, room: item }))}>我要补充</span>
  379. </div>
  380. </div>
  381. );
  382. })}
  383. <SuppleModal show={showSupple} defaultData={supple} info={room} onConfirm={() => this.setState({ showSupple: false, showFinish: true })} onCancel={() => this.setState({ showSupple: false })} />
  384. <SuppleFinishModal show={showFinish} onConfirm={() => this.setState({ showFinish: false })} onCancel={() => this.setState({ showFinish: false })} />
  385. </div>
  386. );
  387. }
  388. renderData() {
  389. const { datas = [], dataId } = this.state;
  390. return datas.map(item => {
  391. return (
  392. <div className="p-t-1 m-b-2" id={item.id}>
  393. <div className="t-1 t-s-18 m-b-1">{item.title}</div>
  394. <div className="data-list">
  395. {item.children.map(child => {
  396. if (child.id === dataId) {
  397. return <div style={{ width: 240, height: 310, overflowY: 'auto', display: 'inline-block' }} className="ws-p data-item" onClick={() => this.setState({ dataId: null })}>{child.content}</div>;
  398. }
  399. return <Assets width={240} height={310} src={child.cover} className="data-item" onClick={() => this.setState({ dataId: child.id })} />;
  400. })}
  401. </div>
  402. </div>
  403. );
  404. });
  405. }
  406. renderList() {
  407. const { articles = [], scrollCurrent } = this.state;
  408. return articles.map(item => {
  409. return (
  410. <div className="p-t-1 m-b-2" id={item.categoryId}>
  411. <div className="t-1 t-s-18 m-b-1">{scrollCurrent === item.categoryId ? <span className="t-4">{item.title}</span> : item.title}</div>
  412. <div className="t-2" dangerouslySetInnerHTML={{ __html: item.content }} />
  413. </div>
  414. );
  415. });
  416. }
  417. renderRead() {
  418. const { readTab, reads = [], readPlates, plate = {} } = this.state;
  419. return <div className='read-layout'>
  420. <Tabs
  421. className='m-b-2'
  422. type="division"
  423. theme="gray"
  424. space={2.5}
  425. active={readTab}
  426. tabs={readPlates}
  427. onChange={key => this.onChangeReadTab(key)}
  428. />
  429. {!!plate.jump && <div className='m-b-2'>
  430. <Button className='m-r-1' onClick={() => openLink(plate.link)}>{plate.text}</Button>
  431. </div>}
  432. {reads.map((item) => {
  433. return <div className='m-b-5'>
  434. <a href={item.link || ''} target="_blank">{item.title}</a>
  435. </div>;
  436. })}
  437. </div>;
  438. }
  439. renderFaq() {
  440. const { faqs = [], showFaq, showFinish, faq = {} } = this.state;
  441. return <div className='faq-layout'>
  442. <Button onClick={() => User.needLogin().then(() => this.setState({ showFaq: true, faq: { channel: 'getready' } }))}>我要提问 ></Button>
  443. <QAList data={faqs} />
  444. <FaqModal show={showFaq} defaultData={faq} onCancel={() => this.setState({ showFaq: false, faq: {} })} onConfirm={() => this.setState({ showFaq: false, faq: {}, showFinish: true })} />
  445. <FinishModal
  446. show={showFinish}
  447. onConfirm={() => this.setState({ showFinish: false })}
  448. />
  449. </div>;
  450. }
  451. }