index.tsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439
  1. import request from '@/helpers/request';
  2. import { state } from '@/state';
  3. import {
  4. Button,
  5. Cell,
  6. CellGroup,
  7. Popup,
  8. showConfirmDialog,
  9. showLoadingToast
  10. } from 'vant';
  11. import {
  12. defineComponent,
  13. onMounted,
  14. reactive,
  15. onUnmounted,
  16. TransitionGroup,
  17. computed
  18. } from 'vue';
  19. import styles from './index.module.less';
  20. import { useRoute, useRouter } from 'vue-router';
  21. import {
  22. listenerMessage,
  23. postMessage,
  24. removeListenerMessage
  25. } from '@/helpers/native-message';
  26. // import iconLook from './image/look.svg'
  27. import iconCourse from './image/icon-course.png';
  28. import iconCachePoint from './image/icon-cache-point.png';
  29. // import iconCourseLock from './image/icon-course-lock.png';
  30. // import iconTip from './image/iconTip.png';
  31. import { browser } from '@/helpers/utils';
  32. import OEmpty from '@/components/o-empty';
  33. import { handleCheckVip, gotoMemberCenter, hasVip } from '../hook/useFee';
  34. import iconList from './image/icon-list.png';
  35. // import OSticky from '@/components/o-sticky';
  36. import OHeader from '@/components/o-header';
  37. import { useEventListener } from '@vant/use';
  38. import OLoading from '@/components/o-loading';
  39. import OSticky from '@/components/o-sticky';
  40. export default defineComponent({
  41. name: 'courseList',
  42. setup() {
  43. const route = useRoute();
  44. const router = useRouter();
  45. const browserInfo = browser();
  46. const data = reactive({
  47. titleOpacity: 0,
  48. catchStatus: false,
  49. catchItem: {} as any,
  50. loading: true,
  51. detail: {
  52. cover: '',
  53. name: '',
  54. des: ''
  55. },
  56. list: [] as any,
  57. isDownloading: false // 是否在下载资源
  58. });
  59. /** 获取课件详情 */
  60. const getDetail = async () => {
  61. const res: any = await request.get(
  62. `${state.platformApi}/lessonCourseware/getLessonCoursewareDetail/${route.query.id}`
  63. );
  64. if (res?.data) {
  65. data.detail.cover = res.data.coverImg;
  66. data.detail.name = res.data.name;
  67. data.detail.des = res.data.lessonTargetDesc;
  68. }
  69. };
  70. const getList = async () => {
  71. data.loading = true;
  72. try {
  73. const res: any = await request.get(
  74. state.platformApi +
  75. '/lessonCourseware/getLessonCoursewareCourseList/' +
  76. route.query.id
  77. );
  78. if (Array.isArray(res?.data)) {
  79. data.list = res.data;
  80. res.data.forEach((item: any) => {
  81. const { knowledgePointList, ...res } = item;
  82. const tempK = knowledgePointList || [];
  83. tempK.forEach((child: any) => {
  84. child.materialList = [
  85. ...(child.materialList || []),
  86. ...getKnowledgeMaterials(child.children || [])
  87. ];
  88. child.children = null;
  89. });
  90. });
  91. const _list = await checkCoursewareCache(res.data);
  92. data.list = browserInfo.isApp
  93. ? res.data.map((item: any) => {
  94. const _item = _list.find(
  95. (n: any) =>
  96. n.lessonCoursewareDetailId == item.lessonCoursewareDetailId
  97. );
  98. const n = {
  99. ...item
  100. };
  101. if (_item) {
  102. n.hasCache = _item.hasCache;
  103. }
  104. return n;
  105. })
  106. : res.data;
  107. }
  108. } catch (error) {
  109. //
  110. }
  111. data.loading = false;
  112. };
  113. // 获取子节点数据
  114. const getKnowledgeMaterials = (list: any = []) => {
  115. const tempList: any = [];
  116. list.forEach((item: any) => {
  117. if (item.materialList && item.materialList.length > 0) {
  118. tempList.push(...(item.materialList || []));
  119. }
  120. if (item.children && item.children.length > 0) {
  121. tempList.push(...getKnowledgeMaterials(item.children || []));
  122. }
  123. });
  124. return tempList;
  125. };
  126. // 去购买
  127. const onGoVip = () => {
  128. // window.location.href = location.origin + '/#/member';
  129. };
  130. onMounted(() => {
  131. getDetail();
  132. getList();
  133. listenerMessage('downloadCoursewareToCache', getProgress);
  134. });
  135. onUnmounted(() => {
  136. removeListenerMessage('downloadCoursewareToCache', getProgress);
  137. });
  138. const handleClick = async (item: any) => {
  139. if (!item.knowledgePointList) {
  140. showConfirmDialog({
  141. message: '该课件暂无知识点'
  142. });
  143. return;
  144. }
  145. if (!item.hasCache) {
  146. // const hasFree = String(item.accessScope) === '0';
  147. // if (!hasFree) {
  148. const isVip = handleCheckVip();
  149. if (!isVip) return;
  150. // 下载中不提示
  151. if (item.downloadStatus == 1) {
  152. // 取消下载
  153. postMessage({ api: 'cancelDownloadCourseware' });
  154. setTimeout(() => {
  155. postMessage({ api: 'cancelDownloadCourseware' });
  156. item.downloadStatus = 0;
  157. data.isDownloading = false;
  158. }, 1000);
  159. showLoadingToast({
  160. message: '取消中...',
  161. forbidClick: false,
  162. loadingType: 'spinner',
  163. duration: 1000
  164. });
  165. return;
  166. }
  167. // 重新下载
  168. if (item.downloadStatus == 3) {
  169. downCatch(item);
  170. return;
  171. }
  172. data.catchStatus = true;
  173. data.catchItem = item;
  174. return;
  175. }
  176. gotoPlay(item);
  177. };
  178. // 去课件播放
  179. const gotoPlay = (item: any) => {
  180. data.catchStatus = false;
  181. if (browser().isApp) {
  182. postMessage({
  183. api: 'openWebView',
  184. content: {
  185. url: `${location.origin}${location.pathname}#/coursewarePlay?id=${item.coursewareDetailId}&source=my-course`,
  186. orientation: 0,
  187. isHideTitle: true,
  188. statusBarTextColor: false,
  189. isOpenLight: true,
  190. showLoadingAnim: true
  191. }
  192. });
  193. } else {
  194. router.push({
  195. path: '/coursewarePlay',
  196. query: {
  197. id: item.coursewareDetailId,
  198. source: 'my-course'
  199. }
  200. });
  201. }
  202. };
  203. // 检查数据的缓存状态
  204. const checkCoursewareCache = (list: []): Promise<any[]> => {
  205. if (!browser().isApp) {
  206. return Promise.resolve(list);
  207. }
  208. return new Promise(resolve => {
  209. postMessage(
  210. {
  211. api: 'checkCoursewareCache',
  212. content: {
  213. data: list
  214. }
  215. },
  216. res => {
  217. if (res?.content?.data) {
  218. resolve(res.content.data);
  219. return;
  220. }
  221. return [];
  222. }
  223. );
  224. });
  225. };
  226. // 下载缓存
  227. const downCatch = async (item: any) => {
  228. if (browserInfo.isApp) {
  229. data.catchStatus = false;
  230. data.isDownloading = true;
  231. const res = await postMessage({
  232. api: 'downloadCoursewareToCache',
  233. content: {
  234. data: item
  235. }
  236. });
  237. return res;
  238. }
  239. return true;
  240. };
  241. // 下载缓存进度
  242. const getProgress = (res: any) => {
  243. // console.log('🚀 ~ res', res)
  244. if (!data.isDownloading) {
  245. return;
  246. }
  247. if (res?.content?.lessonCoursewareDetailId) {
  248. const { lessonCoursewareDetailId, downloadStatus, progress } =
  249. res.content;
  250. const course = data.list.find(
  251. (n: any) => n.lessonCoursewareDetailId == lessonCoursewareDetailId
  252. );
  253. if (course) {
  254. course.downloadStatus = downloadStatus;
  255. course.progress = progress;
  256. if (downloadStatus == 2) {
  257. course.hasCache = 1;
  258. course.progress = 100;
  259. // 下载完成
  260. data.isDownloading = false;
  261. }
  262. }
  263. }
  264. };
  265. useEventListener('scroll', () => {
  266. const height =
  267. window.scrollY ||
  268. window.pageYOffset ||
  269. document.documentElement.scrollTop;
  270. data.titleOpacity = height > 100 ? 1 : height / 100;
  271. });
  272. return () => (
  273. <div class={styles.courseList}>
  274. <OHeader
  275. border={false}
  276. background={`rgba(255,255,255, ${data.titleOpacity})`}
  277. title="教材详情"
  278. />
  279. <div class={styles.periodContent}>
  280. <div class={styles.cover}>
  281. <img
  282. src={data.detail.cover}
  283. onLoad={(e: Event) => {
  284. if (e.target) {
  285. (e.target as any).style.opacity = 1;
  286. }
  287. }}
  288. />
  289. </div>
  290. <div>
  291. <div class={styles.contentTitle}>{data.detail.name}</div>
  292. <div class={styles.contentLabel}>教学目标:{data.detail.des}</div>
  293. </div>
  294. </div>
  295. <TransitionGroup name="van-fade">
  296. {!data.loading && (
  297. <>
  298. <div key="periodTitle" class={styles.periodTitle}>
  299. <img class={styles.pIcon} src={iconList} />
  300. <div class={styles.pTitle}>课程列表</div>
  301. <div class={styles.pNum}>共{data.list.length}课</div>
  302. </div>
  303. <div key="list" class={styles.periodList}>
  304. <CellGroup inset>
  305. {data.list.map((item: any) => {
  306. // const isLock =
  307. // item.lockFlag ||
  308. // ((route.query.code == 'select' ||
  309. // state.platformType == 'STUDENT') &&
  310. // !item.unlock);
  311. // const isSelect = route.query.code === 'select';
  312. return (
  313. <Cell
  314. border
  315. center
  316. title={item.coursewareDetailName}
  317. // label={
  318. // !browserInfo.isStudent
  319. // ? `已使用${item.useNum || 0}次`
  320. // : ''
  321. // }
  322. onClick={() => handleClick(item)}>
  323. {{
  324. icon: () => (
  325. <div class={styles.periodItem}>
  326. <div class={styles.periodItemModel}>
  327. <img src={iconCourse} />
  328. {item.hasCache ? (
  329. <img
  330. class={styles.iconCachePoint}
  331. src={iconCachePoint}
  332. />
  333. ) : (
  334. ''
  335. )}
  336. {item.downloadStatus === 1 && (
  337. <div class={styles.downloading}>{`${
  338. item.progress || 0
  339. }%`}</div>
  340. )}
  341. </div>
  342. </div>
  343. ),
  344. value: () => (
  345. <>
  346. {item.knowledgePointList ? (
  347. <>
  348. {item.hasCache ? (
  349. <Button
  350. class={[
  351. styles.baseBtn,
  352. styles.look,
  353. !hasVip() ? styles.disabled : ''
  354. ]}>
  355. 查看
  356. </Button>
  357. ) : (
  358. <Button
  359. class={[
  360. styles.baseBtn,
  361. styles.down,
  362. !hasVip() ? styles.disabled : '',
  363. item.downloadStatus == 1
  364. ? styles.downing
  365. : ''
  366. ]}>
  367. {item.downloadStatus === 1
  368. ? `取消下载`
  369. : '查看'}
  370. </Button>
  371. )}
  372. </>
  373. ) : (
  374. ''
  375. )}
  376. </>
  377. )
  378. }}
  379. </Cell>
  380. );
  381. })}
  382. </CellGroup>
  383. </div>
  384. </>
  385. )}
  386. </TransitionGroup>
  387. {data.loading && <OLoading />}
  388. {!data.loading && !data.list.length && <OEmpty tips="暂无内容" />}
  389. {!hasVip() && (
  390. <OSticky position="bottom">
  391. <div class={styles.btnGroup}>
  392. <Button round block type="primary" onClick={gotoMemberCenter}>
  393. 开通会员即可查看所有课件
  394. </Button>
  395. </div>
  396. </OSticky>
  397. )}
  398. <Popup
  399. v-model:show={data.catchStatus}
  400. round
  401. class={styles.courseDialog}>
  402. <i
  403. class={styles.iconClose}
  404. onClick={() => (data.catchStatus = false)}></i>
  405. <div class={styles.title}>下载提醒</div>
  406. <div class={styles.content}>
  407. 您尚未下载课件内容,为了更加流畅的学习体验,推荐您下载后观看课件。
  408. </div>
  409. <div class={styles.popupBtnGroup}>
  410. <Button round onClick={() => gotoPlay(data.catchItem)}>
  411. 直接观看
  412. </Button>
  413. <Button
  414. round
  415. type="primary"
  416. onClick={() => downCatch(data.catchItem)}>
  417. 下载课件
  418. </Button>
  419. </div>
  420. </Popup>
  421. </div>
  422. );
  423. }
  424. });