orchestra-app/src/views/courseList/index.tsx

import request from '@/helpers/request'
import { state } from '@/state'
import {
  Button,
  Cell,
  CellGroup,
  Dialog,
  Empty,
  Grid,
  GridItem,
  Icon,
  Image,
  Loading,
  Popup,
  showConfirmDialog,
  showLoadingToast,
  showToast,
  Skeleton,
  SkeletonImage,
  Space
} from 'vant'
import {
  defineComponent,
  onMounted,
  reactive,
  onUnmounted,
  nextTick,
  Transition,
  TransitionGroup
} from 'vue'
import styles from './index.module.less'
import { useRoute, useRouter } from 'vue-router'
import {
  listenerMessage,
  postMessage,
  promisefiyPostMessage,
  removeListenerMessage
} from '@/helpers/native-message'
import iconLook from './image/look.svg'
import iconCachePoint from './image/icon-cache-point.png'
import iconCourse from './image/icon-course.png'
import iconCourseLock from './image/icon-course-lock.png'
import iconTip from './image/iconTip.png'
import { browser } from '@/helpers/utils'
import OEmpty from '@/components/o-empty'
import { handleCheckVip } from '../hook/useFee'
import iconList from './image/icon-list.png'
import OSticky from '@/components/o-sticky'
import OHeader from '@/components/o-header'
import { useEventListener } from '@vant/use'
import OLoading from '@/components/o-loading'
export default defineComponent({
  name: 'courseList',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const browserInfo = browser()
    // const catchList = store
    const data = reactive({
      titleOpacity: 0,
      catchStatus: false,
      catchItem: {} as any,
      loading: true,
      detail: {
        cover: '',
        name: '',
        des: ''
      },
      list: [] as any,
      isDownloading: false // 是否在下载资源
    })

    /** 获取课件详情 */
    const getDetail = async () => {
      const res: any = await request.get(
        `${state.platformApi}/lessonCourseware/detail/${route.query.id}`
      )
      if (res?.data) {
        data.detail.cover = res.data.coverImg
        data.detail.name = res.data.name
        data.detail.des = res.data.lessonTargetDesc
      }
    }
    const getList = async () => {
      data.loading = true
      if (route.query.courseScheduleId) {
        try {
          const res: any = await request.post(
            state.platformApi + '/courseSchedule/getCoursewareDetail',
            {
              params: {
                courseScheduleId: route.query.courseScheduleId,
                coursewareId: route.query.id
              }
            }
          )
          if (Array.isArray(res?.data)) {
            data.list = res.data
          }
        } catch (error) {}
      } else {
        try {
          const res: any = await request.post(
            state.platformApi + '/courseSchedule/myCoursewareDetail/' + route.query.id
          )
          if (Array.isArray(res?.data)) {
            res.data.forEach((item: any) => {
              const { knowledgePointList, ...res } = item
              const tempK = knowledgePointList || []
              tempK.forEach((child: any) => {
                child.materialList = [
                  ...(child.materialList || []),
                  ...getKnowledgeMaterials(child.children || [])
                ]
                child.children = null
              })
            })

            const _list = await checkCoursewareCache(res.data)
            data.list = browserInfo.isApp
              ? res.data.map((item: any) => {
                  const _item = _list.find(
                    (n: any) => n.lessonCoursewareDetailId == item.lessonCoursewareDetailId
                  )
                  const n = {
                    ...item
                  }
                  if (_item) {
                    n.hasCache = _item.hasCache
                  }
                  return n
                })
              : res.data
          }
        } catch (error) {}
      }
      data.loading = false
    }
    // 获取子节点数据
    const getKnowledgeMaterials = (list: any = []) => {
      const tempList: any = []
      list.forEach((item: any) => {
        if (item.materialList && item.materialList.length > 0) {
          tempList.push(...(item.materialList || []))
        }

        if (item.children && item.children.length > 0) {
          tempList.push(...getKnowledgeMaterials(item.children || []))
        }
      })
      return tempList
    }

    onMounted(() => {
      getDetail()
      getList()
      listenerMessage('downloadCoursewareToCache', getProgress)
    })
    onUnmounted(() => {
      removeListenerMessage('downloadCoursewareToCache', getProgress)
    })

    const handleClick = async (item: any) => {
      if (!item.knowledgePointList) {
        showConfirmDialog({
          message: '该课件暂无知识点'
        })
        return
      }
      if (route.query.code === 'select') {
        console.log('选择课时')
        setCoursewareDetail(item)
        return
      }

      // 有正在上传中的
      if (item.downloadStatus === 1) return
      if (!item.hasCache) {
        const hasFree = String(item.accessScope) === '0'
        if (!hasFree) {
          const hasVip = handleCheckVip()
          if (!hasVip) return
        }

        // 下载中不提示
        if (item.downloadStatus == 1) {
          // 取消下载
          postMessage({ api: 'cancelDownloadCourseware' })
          setTimeout(() => {
            postMessage({ api: 'cancelDownloadCourseware' })
            item.downloadStatus = 0
            data.isDownloading = false
          }, 1000)
          showLoadingToast({
            message: '取消中...',
            forbidClick: false,
            loadingType: 'spinner',
            duration: 1000
          })
          return
        }
        // 重新下载
        if (item.downloadStatus == 3) {
          downCatch(item)
          return
        }
        data.catchStatus = true
        data.catchItem = item
        // 下载中不提示
        // if (item.downloadStatus == 1) {
        //   return
        // }
        // // 重新下载
        // if (item.downloadStatus == 3) {
        //   downCatch(item)
        //   return
        // }
        // data.catchStatus = true
        // data.catchItem = item
        // try {
        //   await showConfirmDialog({
        //     message: '当前课程没有缓存,是否缓存?',
        //   })
        // } catch (error) {
        //   gotoPlay(item)
        //   return
        // }
        // downCatch(item)
        return
      }
      gotoPlay(item)
    }
    // 去课件播放
    const gotoPlay = (item: any) => {
      data.catchStatus = false
      postMessage({
        api: 'openWebView',
        content: {
          url: `${location.origin}${location.pathname}#/coursewarePlay?id=${item.lessonCoursewareDetailId}&source=my-course`,
          orientation: 0,
          isHideTitle: true,
          statusBarTextColor: false,
          isOpenLight: true,
          showLoadingAnim: true
        }
      })
    }
    // 检查数据的缓存状态
    const checkCoursewareCache = (list: []): Promise<any[]> => {
      if (!browser().isApp) {
        return Promise.resolve(list)
      }
      return new Promise((resolve) => {
        postMessage(
          {
            api: 'checkCoursewareCache',
            content: {
              data: list
            }
          },
          (res) => {
            if (res?.content?.data) {
              resolve(res.content.data)
              return
            }
            return []
          }
        )
      })
    }
    // 下载缓存
    const downCatch = async (item: any) => {
      if (browserInfo.isApp) {
        data.catchStatus = false
        data.isDownloading = true
        const res = await postMessage({
          api: 'downloadCoursewareToCache',
          content: {
            data: item
          }
        })
        return res
      }

      return true
    }
    // 下载缓存进度
    const getProgress = (res: any) => {
      // console.log('🚀 ~ res', res)
      if (!data.isDownloading) {
        return
      }
      if (res?.content?.lessonCoursewareDetailId) {
        const { lessonCoursewareDetailId, downloadStatus, progress } = res.content
        const course = data.list.find(
          (n: any) => n.lessonCoursewareDetailId == lessonCoursewareDetailId
        )
        if (course) {
          course.downloadStatus = downloadStatus
          course.progress = progress
          if (downloadStatus == 2) {
            course.hasCache = 1
            course.progress = 100
            // 下载完成
            data.isDownloading = false
          }
        }
      }
    }
    // 绑定课时
    const setCoursewareDetail = async (item: any) => {
      try {
        const res: any = await request.post(
          state.platformApi + '/courseSchedule/setCoursewareDetail',
          {
            params: {
              courseScheduleId: route.query.courseScheduleId,
              coursewareDetailId: item.lessonCoursewareDetailId
            }
          }
        )
        if (res.code === 200) {
          postMessage({ api: 'back' })
        }
      } catch (error) {}
    }

    useEventListener('scroll', (e: Event) => {
      const height = window.scrollY || window.pageYOffset || document.documentElement.scrollTop
      data.titleOpacity = height > 100 ? 1 : height / 100
    })
    return () => (
      <div class={styles.courseList}>
        <OHeader
          border={false}
          background={`rgba(255,255,255, ${data.titleOpacity})`}
          color="rgba(124, 61, 18, 1)"
          title="教材详情"
        />
        <div class={styles.periodContent}>
          <div class={styles.cover}>
            <img
              src={data.detail.cover}
              onLoad={(e: Event) => {
                if (e.target) {
                  ;(e.target as any).style.opacity = 1
                }
              }}
            />
          </div>
          <div>
            <div class={styles.contentTitle}>{data.detail.name}</div>
            <div class={styles.contentLabel}>教学目标：{data.detail.des}</div>
          </div>
        </div>

        <TransitionGroup name="van-fade">
          {!data.loading && (
            <>
              <div key="periodTitle" class={styles.periodTitle}>
                <img class={styles.pIcon} src={iconList} />
                <div class={styles.pTitle}>课程列表</div>
                <div class={styles.pNum}>共{data.list.length}课</div>
              </div>

              <div key="list" class={styles.periodList}>
                <CellGroup inset>
                  {data.list.map((item: any) => {
                    const isLock =
                      item.lockFlag ||
                      ((route.query.code == 'select' || state.platformType == 'STUDENT') &&
                        !item.unlock)
                    const isSelect = route.query.code === 'select'
                    return (
                      <Cell
                        border
                        center
                        title={item.coursewareDetailName}
                        label={!browserInfo.isStudent ? `已使用${item.useNum || 0}次` : ''}
                        onClick={() => !isLock && handleClick(item)}
                      >
                        {{
                          icon: () => (
                            <div class={styles.periodItem}>
                              <div class={styles.periodItemModel}>
                                <img src={isLock ? iconCourseLock : iconCourse} />
                                {!isLock && String(item.accessScope) === '0' && (
                                  <img class={styles.periodTip} src={iconTip} />
                                )}

                                {item.hasCache ? (
                                  <img class={styles.iconCachePoint} src={iconCachePoint} />
                                ) : (
                                  ''
                                )}
                                {item.downloadStatus === 1 && (
                                  <div class={styles.downloading}>{`${item.progress || 0}%`}</div>
                                )}
                              </div>
                            </div>
                          ),
                          value: () => (
                            <>
                              {isSelect ? (
                                <Button
                                  disabled={isLock}
                                  class={[styles.baseBtn, isLock ? styles.disable : styles.look]}
                                >
                                  选择
                                </Button>
                              ) : item.knowledgePointList ? (
                                <>
                                  {item.hasCache ? (
                                    <Button
                                      class={[
                                        styles.baseBtn,
                                        isLock ? styles.disable : styles.look
                                      ]}
                                    >
                                      查看
                                    </Button>
                                  ) : (
                                    <Button
                                      disabled={item.downloadStatus === 1 ? true : false}
                                      class={[
                                        styles.baseBtn,
                                        isLock ? styles.disable : styles.down,
                                        item.downloadStatus ? styles.downing : ''
                                      ]}
                                    >
                                      {item.downloadStatus === 1 ? `取消下载` : '查看'}
                                    </Button>
                                  )}
                                </>
                              ) : (
                                ''
                              )}
                            </>
                          )
                        }}
                      </Cell>
                    )
                  })}
                </CellGroup>
              </div>
            </>
          )}
        </TransitionGroup>
        {data.loading && <OLoading />}
        {!data.loading && !data.list.length && <OEmpty tips="暂无内容" />}

        <Popup v-model:show={data.catchStatus} round class={styles.courseDialog}>
          <i class={styles.iconClose} onClick={() => (data.catchStatus = false)}></i>
          <div class={styles.title}>下载提醒</div>

          <div class={styles.content}>
            您尚未下载课件内容，为了更加流畅的学习体验，推荐您下载后观看课件。
          </div>

          <div class={styles.popupBtnGroup}>
            <Button round onClick={() => gotoPlay(data.catchItem)}>
              直接观看
            </Button>
            <Button round type="primary" onClick={() => downCatch(data.catchItem)}>
              下载课件
            </Button>
          </div>
        </Popup>
      </div>
    )
  }
})