orchestra-app/src/teacher/screen-projection/index.tsx

import OEmpty from '@/components/o-empty'
import OHeader from '@/components/o-header'
import request from '@/helpers/request'
import { state } from '@/state'
import { Button, Cell, CellGroup, Image, Popup } from 'vant'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import Guide from './guide'
import { getImage } from './images'
import styles from './index.module.less'

export default defineComponent({
  name: 'screen-projection',
  setup(props, { emit }) {
    const icons = {
      SONG: getImage('icon-music.png'),
      VIDEO: getImage('icon-video.png'),
      IMG: getImage('icon-img.png')
    }
    const route = useRoute()
    const router = useRouter()
    const query = route.query || {}
    const data = reactive({
      loading: true,
      guideOpen: false,
      knowledgePointList: [] as any,
      name: '',
      lessonTargetDesc: ''
    })
    console.log(query)
    // 获取课件详情
    const getDetail = async () => {
      data.loading = true
      try {
        const res: any = await request.get(
          state.platformApi + `/lessonCoursewareDetail/detail/${query.lessonCoursewareDetailId}`
        )
        if (res?.data) {
          data.name = res.data.name
          data.lessonTargetDesc = res.data.lessonTargetDesc
          data.knowledgePointList = res.data.knowledgePointList || []
        }
      } catch (error) {}
      data.loading = false
    }
    onMounted(() => {
      getDetail()
    })

    // 去课时播放
    const hanldeOpenPlay = (n?: any) => {
      router.push({
        path: '/coursewarePlay',
        query: {
          ...query,
          id: query.lessonCoursewareDetailId,
          kId: n?.id
        }
      })
    }
    return () => (
      <div class={styles.screenProjection}>
        <OHeader
          desotry={false}
          rightText="投屏帮助"
          onClickRight={() => {
            console.log('打开投屏')
            data.guideOpen = true
          }}
        />
        <div class={styles.container}>
          {data.name && (
            <div class={styles.tips}>
              <div class={styles.line}></div>
              <div>{data.name}</div>
            </div>
          )}
          <CellGroup inset>
            {data.knowledgePointList.map((item: any) => {
              return (
                <>
                  {Array.isArray(item.materialList) &&
                    item.materialList.map((n: any) => {
                      return (
                        <Cell title={n.name} isLink center onClick={() => hanldeOpenPlay(n)}>
                          {{
                            icon: () => (
                              <Image
                                style={{ marginRight: '12px' }}
                                width={36}
                                height={36}
                                src={icons[n.type]}
                              />
                            )
                          }}
                        </Cell>
                      )
                    })}
                </>
              )
            })}
          </CellGroup>
        </div>
        {!data.loading && !data.knowledgePointList.length && <OEmpty />}

        <Button class={styles.playBtn} block type="primary" round onClick={() => hanldeOpenPlay()}>
          播放课件
        </Button>
        <Popup
          v-model:show={data.guideOpen}
          position="right"
          closeable
          closeIconPosition="top-left"
          safeAreaInsetBottom
          safeAreaInsetTop
        >
          <div class={styles.popup}>
            <Guide />
          </div>
        </Popup>
      </div>
    )
  }
})