update

src/modules/course/my/components/ViewDetailsVideo.vue

 <script setup lang="ts">
 import { getVideoDetails } from '../api'
 import AppVideoPlayer from '@/components/base/AppVideoPlayer.vue'
+// import PreviewFiles from '@/components/base/PreviewFiles.vue'
+
 const props: any = defineProps({
   data: {
     type: Array
@@ -22,7 +24,7 @@ const videoOptions = computed(() => {
   return {
     sources: [
       {
-        src: resourceData.play_auth?.play_info_list[0].PlayURL
+        src: resourceData.play_auth?.play_info_list.find((item: any) => { return item.Definition === 'SD' }).PlayURL
       }
     ]
   }
@@ -65,6 +67,7 @@ const changeVideo = (index: number) => {
 <style lang="scss" scoped>
 .cover-box {
   display: flex;
+  margin-bottom: 20px;
 }
 .cover-img {
   width: 200px;

src/modules/course/my/views/ViewDetails.vue

@@ -2,6 +2,7 @@
 import { getCharacter } from '../api'
 import ViewCourseChapter from '../components/ViewCourseChapter.vue'
 import ViewDetailsVideo from '../components/ViewDetailsVideo.vue'
+import PreviewFiles from '@/components/base/PreviewFiles.vue'
 
 interface IChapterDetails {
   name: string
@@ -10,6 +11,7 @@ interface IChapterDetails {
 
 // 路由
 const route = useRoute()
+const router = useRouter()
 const courseId = route.params.courseId as string
 const chapterId = route.params.id
 
@@ -18,6 +20,10 @@ const chapterTree: any = ref([])
 // 当前章节的资源内容
 const chapterDetails = ref<IChapterDetails>()
 onMounted(() => {
+  initData()
+})
+
+const initData = () => {
   getCharacter({ course_id: courseId, type: 'tree' }).then((res: any) => {
     if (res.code === 0) {
       chapterTree.value = res.data[0]?.children || []
@@ -28,61 +34,149 @@ onMounted(() => {
         }
       })
     }
-    getChapterVideo()
+    getChapterResource()
   })
+}
+
+// 所有资源集合
+interface IResourceAll {
+  videoData: { cover: string; id: string }[]
+  courseware: { id: string; url: string }[]
+  lessonPlan: { id: string; url: string }[]
+  data: { id: string; url: string }[],
+  exam: any[],
+  live: any[]
+}
+
+// 所有要渲染的资源
+const resourceData = reactive<IResourceAll>({
+  videoData: [],
+  courseware: [],
+  lessonPlan: [],
+  data: [],
+  exam: [],
+  live: []
 })
 
-// 获取树结构里面的视频资源
+// 分配资源
 interface IResource {
+  resource_type: string
+  resource: {
     cover: string
     id: string
+    url: string
+  }
 }
-const videoData = ref<IResource[]>([])
-const getChapterVideo = () => {
-  chapterDetails.value?.children.forEach((item: { resource_type: string; resource: IResource }) => {
-    if (item.resource_type === '2') {
-      videoData.value.push(item.resource)
+const getChapterResource = () => {
+  chapterDetails.value?.children.forEach((item: IResource) => {
+    switch (item.resource_type) {
+      case '2':
+        resourceData.videoData.push(item.resource)
+        break
+      case '10':
+        resourceData.courseware.push(item.resource)
+        break
+      case '11':
+        resourceData.lessonPlan.push(item.resource)
+        break
+      case '4':
+        resourceData.data.push(item.resource)
+        break
+      case '9':
+        resourceData.exam.push(item.resource)
+        break
+      case '6':
+        resourceData.live.push(item.resource)
+        break
     }
   })
 }
-// 获取当前视频详情
-// const currentVideoDetails = (id: string) => {
-//   getVideoDetails({ id: id }).then((res: any) => {
-//     videoData.currentVideo = res.data
-//     videoData.currentId = id
-//   })
-// }
 
-// const btnList = [
-//   {
-//     btn_name: '视频',
-//     resource_type: '2'
-//   },
-//   {
-//     btn_name: '课件',
-//     resource_type: '10'
-//   },
-//   {
-//     btn_name: '教案',
-//     resource_type: '11'
-//   },
-//   {
-//     btn_name: '资料',
-//     resource_type: '4'
-//   },
-//   {
-//     btn_name: '作业',
-//     resource_type: '3'
-//   },
-//   {
-//     btn_name: '考试',
-//     resource_type: '9'
-//   },
-//   {
-//     btn_name: '直播',
-//     resource_type: '6'
-//   }
-// ]
+// 资料切换
+const activeName = ref('1')
+
+// 考试参数
+const listOptions = computed(() => {
+  return {
+    columns: [
+      { type: 'index', label: '序号', fixed: 'left' },
+      {
+        label: '组卷模式',
+        prop: 'paper_type',
+        computed: (row: any) => {
+          return row.row.paper_type === 1 ? '选题组卷' : '自动组卷'
+        }
+      },
+      {
+        label: '试卷用途',
+        prop: 'paper_uses',
+        computed: (row: any) => {
+          const map = { 1: '考试', 2: '课后作业', 3: '课程测试' }
+          return map[row.row.paper_uses] || row.row.paper_uses
+        }
+      },
+      { label: '试卷分类', prop: 'paper_category.name' },
+      { label: '试卷名称', prop: 'paper_title' },
+      { label: '总分', prop: 'paper_total_score' },
+      { label: '及格分数', prop: 'pass_score' },
+      { label: '更新时间', prop: 'updated_at' }
+    ],
+    data: resourceData.exam
+  }
+})
+
+// 直播
+const add0 = (m: number) => {
+  return m < 10 ? '0' + m : m
+}
+const format = (n: number) => {
+  const time = new Date(n)
+  const y = time.getFullYear()
+  const m = time.getMonth() + 1
+  const d = time.getDate()
+  const h = time.getHours()
+  const mm = time.getMinutes()
+  const s = time.getSeconds()
+  return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s)
+}
+const liveOptions = computed(() => {
+  return {
+    columns: [
+      { label: '会议code', prop: 'meeting_code', align: 'center' },
+      { label: '主题', prop: 'subject', align: 'center' },
+      {
+        label: '开始时间',
+        prop: 'start_time',
+        align: 'center',
+        computed({ row }: any) {
+          return format(parseInt(row.start_time))
+        }
+      },
+      {
+        label: '结束时间',
+        prop: 'end_time',
+        align: 'center',
+        computed({ row }: any) {
+          return format(parseInt(row.end_time))
+        }
+      },
+      { label: '操作', slots: 'table-operate', align: 'center' }
+    ],
+    data: resourceData.live
+  }
+})
+const goLive = (url: string) => {
+  window.open(url)
+}
+
+// 监听路由变化重新渲染页面
+watch(
+  () => route.params.id,
+  () => {
+    initData()
+    router.go(0)
+  }
+)
 </script>
 <template>
   <AppCard title="查阅课程">
@@ -90,7 +184,35 @@ const getChapterVideo = () => {
       <div class="title">{{ chapterDetails?.name }}</div>
       <div class="chapter-content">
         <div class="content-left">
-          <ViewDetailsVideo v-if="Object.keys(videoData).length" :data="videoData"></ViewDetailsVideo>
+          <ViewDetailsVideo
+            v-if="Object.keys(resourceData.videoData).length"
+            :data="resourceData.videoData"
+          ></ViewDetailsVideo>
+          <el-empty description="暂无数据" v-else/>
+          <el-tabs :lazy="true" v-model="activeName" class="demo-tabs">
+            <el-tab-pane label="课件" name="1">
+              <PreviewFiles v-for="item in resourceData.courseware" :key="item.id" :url="item.url"></PreviewFiles>
+              <el-empty description="暂无数据" v-if="!resourceData.courseware.length"/>
+            </el-tab-pane>
+            <el-tab-pane label="教案" name="2">
+              <PreviewFiles :url="item.url" v-for="item in resourceData.courseware" :key="item.id"></PreviewFiles>
+              <el-empty description="暂无数据" v-if="!resourceData.courseware.length"/>
+            </el-tab-pane>
+            <el-tab-pane label="资料" name="3">
+              <PreviewFiles :url="item.url" v-for="item in resourceData.courseware" :key="item.id"></PreviewFiles>
+              <el-empty description="暂无数据" v-if="!resourceData.courseware.length"/>
+            </el-tab-pane>
+            <el-tab-pane label="考试 / 测验" name="4">
+              <AppList v-bind="listOptions"></AppList>
+            </el-tab-pane>
+            <el-tab-pane label="直播" name="5">
+              <AppList v-bind="liveOptions">
+                <template #table-operate="{ row }">
+                  <el-button plain @click="goLive(row.join_url)">查看</el-button>
+                </template>
+              </AppList>
+            </el-tab-pane>
+          </el-tabs>
         </div>
         <ViewCourseChapter :isBlack="true" :data="chapterTree"></ViewCourseChapter>
       </div>