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

import request from '@/helpers/request'
import { state } from '@/state'
import {
  Button,
  Cell,
  CellGroup,
  Empty,
  Grid,
  GridItem,
  Icon,
  Image,
  Loading,
  showConfirmDialog,
  showToast,
  Skeleton,
  SkeletonImage,
  Space
} from 'vant'
import { defineComponent, onMounted, reactive, onUnmounted } 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 iconCourse from './image/icon-course.png'
import iconCourseLock from './image/icon-course-lock.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'
export default defineComponent({
  name: 'courseList',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const browserInfo = browser()
    // const catchList = store
    const data = reactive({
      loading: true,
      detail: {
        cover: '',
        name: '',
        des: ''
      },
      list: [] as any
    })

    /** 获取课件详情 */
    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)) {
            data.list = browserInfo.isApp ? await checkCoursewareCache(res.data) : res.data
          }
        } catch (error) {}
      }
      data.loading = false
    }
    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.hasCache) {
        const hasVip = handleCheckVip()
        if (!hasVip) return
        // 下载中不提示
        if (item.downloadStatus == 1) {
          return
        }
        // 重新下载
        if (item.downloadStatus == 3) {
          downCatch(item)
          return
        }
        try {
          await showConfirmDialog({
            message: '当前课程没有缓存,是否缓存?'
          })
        } catch (error) {
          gotoPlay(item)
          return
        }
        downCatch(item)
        return
      }
      gotoPlay(item)
    }
    // 去课件播放
    const gotoPlay = (item: any) => {
      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: []) => {
      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) {
        const res = await postMessage({
          api: 'downloadCoursewareToCache',
          content: {
            data: item
          }
        })
        return res
      }

      return true
    }
    // 下载缓存进度
    const getProgress = (res: any) => {
      // console.log('🚀 ~ res', res)
      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
          }
        }
      }
    }
    // 绑定课时
    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) {}
    }
    return () => (
      <div class={styles.courseList}>
        <OSticky
          onGetHeight={(height: number) => {
            document.documentElement.style.setProperty('--header-height', height + 'px')
          }}
        >
          <OHeader
            border={false}
            background="transparent"
            color="rgba(124, 61, 18, 1)"
            title="教材详情"
          />
        </OSticky>

        <div class={styles.periodContent}>
          <Image class={styles.cover} src={data.detail.cover}>
            {{
              loading: () => <Loading />, 
            }}
          </Image>
          {/* <img class={styles.cover} src={data.detail.cover} /> */}
          <div>
            <div class={styles.contentTitle}>{data.detail.name}</div>
            <div class={styles.contentLabel}>
              教学目标：{data.detail.des}
            </div>
          </div>
        </div>

        <div class={styles.periodTitle}>
          <img class={styles.pIcon} src={iconList} />
          <div class={styles.pTitle}>课程列表</div>
          <div class={styles.pNum}>共{data.list.length}课</div>
        </div>

        <div class={styles.periodList}>
          <CellGroup inset>
            {data.list.map((item: any) => {
              const isLock =
                (route.query.code == 'select' || state.platformType == 'STUDENT') &&
                !item.unlock &&
                true
              const isSelect = route.query.code === 'select'
              return (
                <Cell
                  border
                  center
                  title={item.coursewareDetailName}
                  label={!browserInfo.isStudent ? `已使用${item.useNum}次` : ''}
                  onClick={() => !isLock && handleClick(item)}
                >
                  {{
                    icon: () => (
                      <div class={styles.periodItem}>
                        <div class={styles.periodItemModel}>
                          <img src={isLock ? iconCourseLock : iconCourse} />
                        </div>
                      </div>
                    ),
                    value: () => (
                      <>
                        {isSelect ? (
                          <Button disabled={isLock} class={[styles.baseBtn, isLock ? styles.disable : styles.look]}>选择</Button>
                        ) : item.knowledgePointList ? (
                          <>
                            {item.hasCache ? (
                              <Button class={[styles.baseBtn, styles.look]}>查看</Button>
                            ) : (
                              <Button
                                disabled={isLock}
                                class={[styles.baseBtn, isLock ? styles.disable : styles.down, item.downloadStatus ? styles.downing : '']}
                              >
                                {item.downloadStatus === 1
                                  ? `下载中 ${item.progress || 0}%`
                                  : item.downloadStatus === 2
                                  ? '下载成功'
                                  : item.downloadStatus === 3
                                  ? '重新下载'
                                  : '下载'}
                              </Button>
                            )}
                          </>
                        ) : (
                          ''
                        )}
                      </>
                    )
                  }}
                </Cell>
              )
            })}
          </CellGroup>
        </div>

        {!data.loading && !data.list.length && <OEmpty tips="暂无内容" />}
      </div>
    )
  }
})