index.tsx 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. import request from '@/helpers/request'
  2. import { state } from '@/state'
  3. import { Button, Empty, Grid, GridItem, Icon, showToast } from 'vant'
  4. import { defineComponent, onMounted, reactive } from 'vue'
  5. import styles from './index.module.less'
  6. import { useRoute, useRouter } from 'vue-router'
  7. import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
  8. import iconLook from './image/look.svg'
  9. import iconCourse from './image/icon-course.png'
  10. import { browser } from '@/helpers/utils'
  11. export default defineComponent({
  12. name: 'lessonCourseware',
  13. setup() {
  14. const route = useRoute()
  15. const router = useRouter()
  16. const browserInfo = browser()
  17. // const catchList = store
  18. const data = reactive({
  19. loading: true,
  20. list: [] as any
  21. })
  22. const getList = async () => {
  23. data.loading = true
  24. if (route.query.courseScheduleId) {
  25. try {
  26. const res: any = await request.post(
  27. state.platformApi + '/courseSchedule/getCoursewareDetail',
  28. {
  29. params: {
  30. courseScheduleId: route.query.courseScheduleId,
  31. coursewareId: route.query.id
  32. }
  33. }
  34. )
  35. if (Array.isArray(res?.data)) {
  36. data.list = res.data
  37. }
  38. } catch (error) {}
  39. } else {
  40. try {
  41. const res: any = await request.post(
  42. state.platformApi + '/courseSchedule/myCoursewareDetail/' + route.query.id
  43. )
  44. if (Array.isArray(res?.data)) {
  45. data.list = res.data
  46. }
  47. } catch (error) {}
  48. }
  49. data.loading = false
  50. }
  51. onMounted(() => {
  52. getList()
  53. })
  54. const handleClick = async (item: any) => {
  55. if (route.query.code === 'select') {
  56. console.log('选择课时')
  57. setCoursewareDetail(item)
  58. return
  59. }
  60. // const isCache = await checkCache(item)
  61. // if (!isCache) return
  62. router.push({
  63. path: '/coursewarePlay',
  64. query: {
  65. id: item.lessonCoursewareDetailId
  66. }
  67. })
  68. }
  69. // 检查课时是否有缓存
  70. const checkCache = async (item: any) => {
  71. if (browserInfo.isApp) {
  72. const res = await promisefiyPostMessage({
  73. api: 'checkCoursewareCache',
  74. content: {
  75. lessonCoursewareDetailId: item.lessonCoursewareDetailId,
  76. finish: true,
  77. rate: 0.2
  78. }
  79. })
  80. console.log(res)
  81. return res
  82. }
  83. return true
  84. }
  85. // 绑定课时
  86. const setCoursewareDetail = async (item: any) => {
  87. try {
  88. const res: any = await request.post(
  89. state.platformApi + '/courseSchedule/setCoursewareDetail',
  90. {
  91. params: {
  92. courseScheduleId: route.query.courseScheduleId,
  93. coursewareDetailId: item.lessonCoursewareDetailId
  94. }
  95. }
  96. )
  97. if (res.code === 200) {
  98. showToast('保存成功')
  99. postMessage({ api: 'back' })
  100. }
  101. } catch (error) {}
  102. }
  103. return () => (
  104. <div style={{ paddingTop: '14px' }}>
  105. <Grid gutter={14} columnNum={3} class={styles.grid}>
  106. {data.list.map((item: any) => {
  107. return (
  108. <GridItem>
  109. <div class={styles.gridItem} onClick={() => handleClick(item)}>
  110. <img src={iconCourse} class={styles.cover} />
  111. <div class={styles.title}>
  112. <div>{item.coursewareDetailName}</div>
  113. {route.query.code !== 'select' && <div>已使用 {item.useNum} 次</div>}
  114. </div>
  115. {route.query.code !== 'select' ? (
  116. <div class={styles.num} onClick={(e: Event) => {
  117. e.stopPropagation()
  118. }}>
  119. 缓存
  120. <Icon name="play-circle-o" />
  121. </div>
  122. ) : (
  123. <div class={styles.num}>选择</div>
  124. )}
  125. {route.query.code == 'select' && !item.unlock && (
  126. <div class={styles.look} onClick={(e: Event) => e.stopPropagation()}>
  127. <Icon name={iconLook} /> 未解锁
  128. </div>
  129. )}
  130. </div>
  131. </GridItem>
  132. )
  133. })}
  134. </Grid>
  135. {!data.loading && !data.list.length && <Empty description="空空如也" />}
  136. <Button
  137. onClick={() => {
  138. location.href =
  139. 'http://192.168.3.114:1000/teacher.html#/coursewarePlay?id=1610595720511209474&courseId=1612270880549044226'
  140. }}
  141. >
  142. 胜强测试
  143. </Button>
  144. </div>
  145. )
  146. }
  147. })