page.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647
  1. import React from 'react';
  2. import { Link } from 'react-router-dom';
  3. import './index.less';
  4. import Page from '@src/containers/Page';
  5. import Assets from '@src/components/Assets';
  6. import { getMap, formatPercent, formatDate } from '@src/services/Tools';
  7. import Footer from '../../../components/Footer';
  8. import { FaqModal, CommentModal, FinishModal, CourseNoteModal, AskCourseModal } from '../../../components/OtherModal';
  9. import { Contact, AnswerCarousel, Comment } from '../../../components/Other';
  10. import Tabs from '../../../components/Tabs';
  11. import { Icon as GIcon } from '../../../components/Icon';
  12. import Button from '../../../components/Button';
  13. import IconButton from '../../../components/IconButton';
  14. import UserTable from '../../../components/UserTable';
  15. import ProgressText from '../../../components/ProgressText';
  16. import { OpenText } from '../../../components/Open';
  17. import Video from '../../../components/Video';
  18. import { Main } from '../../../stores/main';
  19. import { Course } from '../../../stores/course';
  20. import { User } from '../../../stores/user';
  21. import { Order } from '../../../stores/order';
  22. import { Question } from '../../../stores/question';
  23. import { My } from '../../../stores/my';
  24. export default class extends Page {
  25. initState() {
  26. this.columns = [
  27. {
  28. title: '学习内容',
  29. key: 'title',
  30. render: (text, record) => {
  31. const { no } = this.state;
  32. if (no === record.no) {
  33. // 当前正在
  34. }
  35. return `课时 ${record.no}: ${text}`;
  36. },
  37. },
  38. {
  39. title: '预习作业',
  40. key: 'paper',
  41. render: text => {
  42. text = text || {};
  43. const progress = text.report ? formatPercent(text.report.userNumber, text.report.questionNumber) : 0;
  44. const times = text.paper ? text.paper.times : 0;
  45. return (
  46. <div>
  47. <div className="v-a-m d-i-b">
  48. <ProgressText width={50} size="small" times={times} progress={progress} unit="次" />
  49. </div>
  50. {!text.report && (
  51. <IconButton
  52. className="m-l-2"
  53. type="start"
  54. tip="Start"
  55. onClick={() => {
  56. User.needLogin().then(() => {
  57. Question.startLink('preview', text);
  58. });
  59. }}
  60. />
  61. )}
  62. {text.report && !text.report.isFinish && (
  63. <IconButton
  64. className="m-l-2"
  65. type="continue"
  66. tip="Continue"
  67. onClick={() => {
  68. User.needLogin().then(() => {
  69. Question.continueLink('preview', text);
  70. });
  71. }}
  72. />
  73. )}
  74. {text.report && !!text.report.isFinish && (
  75. <IconButton
  76. className="m-l-2"
  77. type="restart"
  78. tip="Restart"
  79. onClick={() => {
  80. User.needLogin().then(() => {
  81. Question.restart('preview', text);
  82. });
  83. }}
  84. />
  85. )}
  86. {text.report && !!text.report.isFinish && (
  87. <IconButton
  88. className="m-l-5"
  89. type="report"
  90. tip="Report"
  91. onClick={() => {
  92. User.needLogin().then(() => {
  93. Question.reportLink('preview', text);
  94. });
  95. }}
  96. />
  97. )}
  98. </div>
  99. );
  100. },
  101. },
  102. {
  103. title: '进度',
  104. key: 'progress',
  105. render: (text, record) => {
  106. const { paper = {} } = record;
  107. return `${paper.paper && paper.paper.times > 0 ? `${paper.paper.times}次+` : ''}${
  108. paper.report ? formatPercent(paper.report.userNumber, paper.report.questionNumber, false) : '0%'}`;
  109. },
  110. },
  111. {
  112. title: '最近学习',
  113. key: 'lastTime',
  114. render: (text, record) => {
  115. const { paper = {} } = record;
  116. return paper.report && formatDate(paper.report.updateTime, 'YYYY-MM-DD HH:mm:ss');
  117. },
  118. },
  119. {
  120. title: '笔记',
  121. key: 'note',
  122. render: (text, record) => {
  123. return <GIcon name="note" active={record.note} />;
  124. },
  125. },
  126. {
  127. title: '问答',
  128. key: 'ask',
  129. render: (text, record) => {
  130. return (
  131. <Link to={`/course/answer/${record.courseId}?tab=my&courseNoId=${record.id}`}>{`${record.answerNumber ||
  132. 0}/${record.askNumber || 0}`}</Link>
  133. );
  134. },
  135. },
  136. ];
  137. return {
  138. tab: '1',
  139. rightTab: '1',
  140. key: '1',
  141. add: false,
  142. list: [{ key: '1' }, { key: '2' }, { key: '3' }],
  143. data: {},
  144. position: 0,
  145. };
  146. }
  147. init() {
  148. Main.dataStruct().then(result => {
  149. const dataStructSelect = result.map(row => {
  150. return {
  151. title: `${row.titleZh}${row.titleEn}`,
  152. key: row.id,
  153. };
  154. });
  155. const dataStructMap = getMap(dataStructSelect, 'key');
  156. this.setState({ dataStructSelect, dataStructMap });
  157. });
  158. Main.getBase().then(result => {
  159. this.setState({ base: result });
  160. });
  161. }
  162. formatRecord(row) {
  163. row.paperMap = {};
  164. if (row.papers) {
  165. row.papers.forEach(paper => {
  166. if (paper.courseNo) row.paperMap[paper.courseNo] = paper;
  167. });
  168. }
  169. row.progressMap = {};
  170. if (row.progress) {
  171. row.progress.forEach(progress => {
  172. row.progressMap[progress.courseNoId] = progress;
  173. });
  174. }
  175. row.courseNoMap = {};
  176. row.courseTime = 0;
  177. if (row.courseNos) {
  178. row.courseNos.forEach(no => {
  179. row.courseNoMap[no.id] = no;
  180. row.courseTime += no.time;
  181. no.paper = row.paperMap[no.id];
  182. no.progress = row.progressMap[no.id];
  183. });
  184. }
  185. if (row.currentNo) {
  186. row.currentCourseNo = row.courseNoMap[row.currentNo];
  187. } else {
  188. row.currentNo = 0;
  189. }
  190. return row;
  191. }
  192. initData() {
  193. const { id } = this.params;
  194. Course.detail(id).then(result => {
  195. result = this.formatRecord(result);
  196. result.have = true;
  197. this.setState({ data: result });
  198. // 选择课时
  199. if (this.state.search.no) {
  200. this.onChangeItem(this.state.search.no);
  201. } else {
  202. this.onChangeItem(1);
  203. }
  204. this.refreshNote();
  205. });
  206. Main.listComment({ page: 1, size: 100, channel: 'course-video', position: id }).then(result => {
  207. this.comments = result.list;
  208. this.setState({ comments: result.list });
  209. });
  210. }
  211. refreshAsk(position) {
  212. const { id } = this.params;
  213. const { item = {} } = this.state;
  214. Course.listAsk(Object.assign({ page: 1, size: 1000, courseId: id, courseNoId: item.id, position })).then(result => {
  215. this.setState({ asks: result.list });
  216. });
  217. }
  218. refreshNote() {
  219. const { id } = this.params;
  220. const { data } = this.state;
  221. if (!data.have) return;
  222. My.listCourseNote({ courseId: id, page: 1, size: data.courseNos.length })
  223. .then((result) => {
  224. this.noteMap = getMap(result.list, 'courseNoId');
  225. data.courseNos.forEach((row) => {
  226. const note = this.noteMap[row.id];
  227. if (note) row.note = true;
  228. });
  229. this.setState({ data });
  230. });
  231. }
  232. onChangeRightTab(rightTab) {
  233. this.setState({ rightTab });
  234. }
  235. onChangeTab(tab) {
  236. this.setState({ tab });
  237. }
  238. onChangeItem(key) {
  239. key = Number(key);
  240. this.changeQuery({ no: key });
  241. this.setState({ no: key });
  242. const { data, item } = this.state;
  243. const index = key - 1;
  244. const timelineSelect = [];
  245. const current = data.courseNos[index];
  246. if (current) {
  247. const max = current.time;
  248. let start = 0;
  249. let end = start + 5;
  250. while (start < max) {
  251. timelineSelect.push({
  252. title: `${start} - ${end}min`,
  253. key: `${start}`,
  254. });
  255. start += 5;
  256. end = Math.min(start + 5, max);
  257. }
  258. }
  259. // 切换播放,记录进度
  260. if (item) {
  261. this.updateProgress(item.id, this.lastSecond, item.time, true);
  262. }
  263. this.setState({ item: current, timelineSelect });
  264. }
  265. onTimeUpdate(second) {
  266. const { position, item = {}, data } = this.state;
  267. if (!data.have) {
  268. // 如果是试用,则按秒数增加
  269. second += (item.startTrail || 0) * 60;
  270. }
  271. const minute = parseInt(second / 60, 10);
  272. const nowPosition = parseInt(minute / 5, 10) * 5;
  273. if (nowPosition !== position) {
  274. this.refreshAsk(position);
  275. this.setState({ position: nowPosition });
  276. // 定时更新进度
  277. this.updateProgress(item.id, second, item.time);
  278. }
  279. this.lastSecond = second;
  280. }
  281. playVideo() {
  282. // 开始计时
  283. this.lastTime = new Date();
  284. }
  285. pauseVideo() {
  286. // 停止计时
  287. const now = new Date();
  288. this.time += (now.getTime() - this.lastTime.getTime()) / 1000;
  289. this.lastTime = null;
  290. }
  291. next() {
  292. const { data, item } = this.state;
  293. if (data.courseNos.length === item.no) {
  294. return;
  295. }
  296. this.onChangeItem(item.no + 1);
  297. }
  298. onVideoAction(key) {
  299. const { rightTab, showTab, showAsk, showNote, item = {} } = this.state;
  300. switch (key) {
  301. case 'ask':
  302. return this.setState({ showAsk: !showAsk });
  303. case 'note':
  304. return this.setState({ showNote: !showNote, note: this.noteMap ? this.noteMap[item.id] || {} : {} });
  305. case 'answer':
  306. return this.setState({ showTab: rightTab === '1' ? !showTab : true, rightTab: '1' });
  307. case 'list':
  308. return this.setState({ showTab: rightTab === '2' ? !showTab : true, rightTab: '2' });
  309. default:
  310. return '';
  311. }
  312. }
  313. updateProgress(courseNoId, currentTime, totalTime, record) {
  314. if (!this.lastTime) return;
  315. const { id } = this.params;
  316. const now = new Date();
  317. this.time += (now.getTime() - this.lastTime.getTime()) / 1000;
  318. this.lastTime = now;
  319. const progress = formatPercent(currentTime, totalTime);
  320. if (record || this.time > 600) {
  321. // 最长5分钟记录一次
  322. Course.noProgress(id, courseNoId, progress, this.time, courseNoId);
  323. this.time = 0;
  324. } else {
  325. Course.noProgress(id, courseNoId, progress, null, null);
  326. }
  327. }
  328. buy() {
  329. const { data } = this.props;
  330. User.needLogin().then(() => {
  331. Order.speedPay({ productType: 'course', productId: data.id }).then(result => {
  332. User.needPay(result).then(() => {
  333. this.refresh();
  334. });
  335. });
  336. });
  337. }
  338. add() {
  339. const { data } = this.props;
  340. User.needLogin().then(() => {
  341. Order.addCheckout({ productType: 'course', productId: data.id }).then(() => {
  342. this.setState({ add: true });
  343. });
  344. });
  345. }
  346. viewAsk(id) {
  347. Course.askView(id);
  348. }
  349. setVideo(video) {
  350. this.video = video;
  351. }
  352. renderView() {
  353. const { base = {}, data = {}, item = {}, add, rightTab, showTab, showAsk, showNote, dataStructMap = {}, showComment, comment = {}, showFaq, faq = {}, showFinish, note = {}, ask = {}, timelineSelect = [] } = this.state;
  354. const { courseNos = [] } = data;
  355. return (
  356. <div>
  357. <div className="top content t-8">
  358. 千行课堂 > 全部课程 > {data.parentStructId > 0 ? `${(dataStructMap[data.parentStructId] || {}).title} >` : ''}{' '}
  359. {(dataStructMap[data.structId] || {}).title} > {data.title} > <span className="t-1">课程详情</span>
  360. </div>
  361. <div className="center content">
  362. <div className="t-1 t-s-20">
  363. {data.title}
  364. <div className="action f-r">
  365. {!data.have && <Button className="m-r-1" radius size="lager" onClick={() => this.buy()}>
  366. 立即购买
  367. </Button>}
  368. {!data.have && <Button theme="default" radius size="lager" disabled={data.add || add} onClick={() => this.add()}>
  369. <Assets name="add" />
  370. </Button>}
  371. {data.have && <Button className="m-r-1" radius size="lager" onClick={() => linkTo('/my/course')}>
  372. 我的课程
  373. </Button>}
  374. </div>
  375. </div>
  376. <div className="t-2 m-b-1">授课老师:{data.teacher}</div>
  377. <div className={'detail'}>
  378. <div className="left">
  379. {data.have && <div hidden={(item.paper && item.paper.times > 0)} className="left-top">
  380. <span className="d-i-b m-r-1">预习作业</span>
  381. <span className="d-i-b m-r-2">
  382. <ProgressText width={480} size="small" progress={item.report ? formatPercent(item.report.userNumber, item.report.questionNumber) : 0} />
  383. </span>
  384. <Button className="f-r" radius onClick={() => (item.report ? Question.continueLink('preview', item) : Question.startLink('preview', item))}>
  385. 做题
  386. </Button>
  387. </div>}
  388. <div className="video-layout">
  389. {item && <Video
  390. key={item.id}
  391. src={item.resource || '/1.mp4'}
  392. width={750}
  393. height={467}
  394. ref={ref => this.setVideo(ref)}
  395. btnList={[
  396. { title: '提问', key: 'ask', show: data.have, active: showAsk, pause: true },
  397. {
  398. key: 'answer',
  399. render(active) {
  400. return <Assets name={active ? 'question_on' : 'question_off'} />;
  401. },
  402. full: true,
  403. show: true,
  404. active: showTab && rightTab === '1',
  405. },
  406. { title: '笔记', key: 'note', show: data.have, active: showNote, pause: true },
  407. { title: '课表', key: 'list', show: true, full: true, active: showTab && rightTab === '2' },
  408. ]}
  409. onPlay={() => this.playVideo()}
  410. onPause={() => this.pauseVideo()}
  411. onNext={() => this.next()}
  412. onAction={key => this.onVideoAction(key)}
  413. onTimeUpdate={time => this.onTimeUpdate(time)}
  414. onFullChange={() => this.setState({ showTab: true, rightTab: '1' })}
  415. >
  416. <div hidden={!showTab} className="video-fixed tab-warpper">
  417. <Tabs
  418. type="division"
  419. theme="gray"
  420. space={2.5}
  421. active={rightTab}
  422. tabs={[{ title: '精选问答', key: '1' }, { title: '课时列表', key: '2' }]}
  423. onChange={key => this.onChangeRightTab(key)}
  424. />
  425. <div className="tab-body">{this[`renderRightTab${rightTab}`]()}</div>
  426. </div>
  427. </Video>}
  428. </div>
  429. </div>
  430. <div className={`detail-right ${data.have && !(item.paper && item.paper.times > 0) ? 'have' : ''} tab-warpper`}>
  431. <Tabs
  432. type="division"
  433. theme="gray"
  434. space={2.5}
  435. active={rightTab}
  436. tabs={[{ title: '精选问答', key: '1' }, { title: '课时列表', key: '2' }]}
  437. onChange={key => this.onChangeRightTab(key)}
  438. />
  439. <div className="tab-body">{this[`renderRightTab${rightTab}`]()}</div>
  440. </div>
  441. </div>
  442. {data.have && <UserTable columns={this.columns} list={courseNos} />}
  443. </div>
  444. <div hidden={data.have} className="bottom">
  445. <div className="content">{this.renderTab()}</div>
  446. </div>
  447. <Contact data={base.contact} />
  448. <Footer />
  449. <AskCourseModal getContainer={() => (showTab ? document.getElementById(this.video.state.id) : document.body)} show={showAsk} defaultData={ask} course={data} courseNo={item} selectList={timelineSelect} onConfirm={() => this.setState({ showAsk: false })} onCancel={() => this.setState({ showAsk: false })} />
  450. <CourseNoteModal getContainer={() => (showTab ? document.getElementById(this.video.state.id) : document.body)} show={showNote} defaultData={note} course={data} courseNos={courseNos} noteMap={this.noteMap} onConfirm={() => {
  451. this.setState({ showNote: false });
  452. this.refreshNote();
  453. }} onCancel={() => this.setState({ showNote: false })} />
  454. <CommentModal
  455. show={showComment}
  456. defaultData={comment}
  457. onConfirm={() => this.setState({ showComment: false, commnet: {}, showFinish: true })}
  458. onCancel={() => this.setState({ showComment: false, commnet: {} })}
  459. onClose={() => this.setState({ showComment: false, commnet: {} })}
  460. />
  461. <FaqModal show={showFaq} defaultData={faq} onCancel={() => this.setState({ showFaq: false, faq: {} })} onConfirm={() => this.setState({ showFaq: false, faq: {}, showFinish: true })} />
  462. <FinishModal
  463. getContainer={() => document.getElementById(this.video.state.id)}
  464. show={showFinish}
  465. onConfirm={() => this.setState({ showFinish: false })}
  466. />
  467. </div >
  468. );
  469. }
  470. renderRightTab1() {
  471. const { asks = [], data = {}, position } = this.state;
  472. return [
  473. <div className="all-answer">
  474. <span className="d-i-b b m-r-5" />
  475. <span className="d-i-b t-6">{position}:00~{position + 5}:00</span>
  476. <a className="f-r d-i-b t-4 c-p" href={`/course/answer/${data.id}`} target="_blank">全部问答 ></a>
  477. </div>,
  478. <div className="answer-layout">
  479. {asks.map(item => {
  480. return (
  481. <div className="answer-item">
  482. <div>
  483. <div className="small-tag">提问</div>
  484. </div>
  485. <div className="desc">
  486. <OpenText>{item.content}</OpenText>
  487. </div>
  488. {item.answerStatus > 0 && (
  489. <div>
  490. <div className="small-tag">回答</div>
  491. </div>
  492. )}
  493. {item.answerStatus > 0 && (
  494. <div className="desc">
  495. <OpenText onOpen={() => this.viewAsk(item.id)}>{item.answer}</OpenText>
  496. </div>
  497. )}
  498. </div>
  499. );
  500. })}
  501. </div>,
  502. ];
  503. }
  504. renderRightTab2() {
  505. const { data = {}, no } = this.state;
  506. const { courseNos = [] } = data;
  507. return (
  508. <div className="item-layout">
  509. {courseNos.map(item => {
  510. return (
  511. <div className={`item ${item.no === no ? 'active' : ''}`} onClick={() => this.onChangeItem(item.no)}>
  512. <span className="t-1">课时{item.no}</span>
  513. <span className="t-2">{item.title}</span>
  514. </div>
  515. );
  516. })}
  517. </div>
  518. );
  519. }
  520. renderTab() {
  521. const { tab } = this.state;
  522. return [
  523. <div className="bottom">
  524. <div className="content">
  525. <Tabs
  526. type="full"
  527. border
  528. active={tab}
  529. tabs={[
  530. { title: '课程介绍', key: '1' },
  531. { title: '授课大纲', key: '2' },
  532. { title: '小助手', key: '3' },
  533. { title: 'FAQs', key: '4' },
  534. { title: '优惠信息', key: '5' },
  535. { title: '学员评价', key: '6' },
  536. ]}
  537. onChange={key => this.onChangeTab(key)}
  538. />
  539. {this[`renderTab${tab}`]()}
  540. </div>
  541. </div>,
  542. ];
  543. }
  544. renderTab1() {
  545. const { data = {} } = this.state;
  546. return (
  547. <div className="tab-layout">
  548. <div className="tab-title">老师资历</div>
  549. <div className="tab-desc" dangerouslySetInnerHTML={{ __html: data.teacherContent }} />
  550. <div className="tab-title">基本参数</div>
  551. <div className="tab-desc" dangerouslySetInnerHTML={{ __html: data.baseContent }} />
  552. <div className="tab-title">授课重点</div>
  553. <div className="tab-desc" dangerouslySetInnerHTML={{ __html: data.pointContent }} />
  554. <div className="tab-title">适合人群</div>
  555. <div className="tab-desc" dangerouslySetInnerHTML={{ __html: data.crowdContent }} />
  556. </div>
  557. );
  558. }
  559. renderTab2() {
  560. const { data } = this.state;
  561. return (
  562. <div className="tab-layout">
  563. <div className="tab-desc" dangerouslySetInnerHTML={{ __html: data.syllabusContent }} />
  564. </div>
  565. );
  566. }
  567. renderTab3() {
  568. return (
  569. <div className="tab-layout">
  570. <div className="qr-layout">
  571. <Assets name="qrcode" className="m-r-2 v-a-t" />
  572. <div className="p-l-1 d-i-b t-l">
  573. <div className="t-1">千行小助手:</div>
  574. <div className="t-1 m-b-2">1232104-310431</div>
  575. <div className="t-2 t-s-12">微信扫码添加千行小助手为好友,</div>
  576. <div className="t-2 t-s-12">咨询课程,了解更多信息</div>
  577. </div>
  578. </div>
  579. </div>
  580. );
  581. }
  582. renderTab4() {
  583. const { faqs, data = {} } = this.state;
  584. return (
  585. <div className="tab-layout">
  586. <AnswerCarousel
  587. hideBtn
  588. list={faqs}
  589. onFaq={() => User.needLogin().then(() => this.setState({ showFaq: true, faq: { channel: 'course-video', position: data.id } }))}
  590. />
  591. </div>
  592. );
  593. }
  594. renderTab5() {
  595. const { data = {} } = this.state;
  596. return (
  597. <div className="tab-layout">
  598. <div className="tab-desc" dangerouslySetInnerHTML={{ __html: data.promoteContent }} />
  599. </div>
  600. );
  601. }
  602. renderTab6() {
  603. const { data = {}, comments = [] } = this.state;
  604. return (
  605. <div className="tab-layout">
  606. {data.have && <div className="m-b-1 t-r">
  607. <Button width={100} radius onClick={() => User.needLogin().then(() => this.setState({ showComment: true, comment: { channel: 'course-video', position: data.id } }))}>
  608. 写评论
  609. </Button>
  610. </div>}
  611. {(comments || []).map(item => {
  612. return <Comment data={item} />;
  613. })}
  614. </div>
  615. );
  616. }
  617. }