课程章节修改

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

 <script setup lang="ts">
+import { CaretBottom, CaretRight } from '@element-plus/icons-vue'
+
 defineProps<{ data: any[]; isBlack?: boolean }>()
 
 const route = useRoute()
 const id = route.query.id ? route.query.id : (route.params.courseId as string)
+
+const handleRes = function (item: any) {
+  if (item === undefined) {
+    item.show = true
+  } else {
+    item.show = !item.show
+  }
+}
 </script>
 <template>
   <div :class="isBlack ? 'chapter-box active-black' : 'chapter-box'">
@@ -17,9 +27,27 @@ const id = route.query.id ? route.query.id : (route.params.courseId as string)
         <div class="chapter-text">
           <div class="chapter">{{ item.name }}</div>
           <div class="sections" v-for="child in item.children" :key="child.id">
-            <router-link :to="`/course/my/view/${child.id}/${id}`">
-              {{ child.name }}
-            </router-link>
+            <div style="display: flex" @click="handleRes(child)">
+              <template v-if="child.children.length">
+                <template v-if="child.children.length">
+                  <el-icon v-if="child.show" style="margin-right: 5px; margin-top: 2px" color="#fff"
+                    ><CaretBottom
+                  /></el-icon>
+                  <el-icon v-else style="margin-right: 5px; margin-top: 2px" color="#fff"><CaretRight /></el-icon>
+                </template>
+                <span>{{ child.name }}</span>
+              </template>
+              <router-link v-else :to="`/course/my/view/${child.id}/${id}`">
+                {{ child.name }}
+              </router-link>
+            </div>
+            <template v-for="(res, cI) in child.children">
+              <div v-if="child.show" class="resources" :key="res.id">
+                <router-link :to="`/course/my/view/${child.id}/${id}?index=${cI}`">
+                  {{ res.name }}
+                </router-link>
+              </div>
+            </template>
           </div>
         </div>
       </div>
@@ -110,6 +138,17 @@ const id = route.query.id ? route.query.id : (route.params.courseId as string)
           word-break: break-all;
           text-align: left;
         }
+        .resources {
+          font-size: 14px;
+          line-height: 1.5;
+          color: #ffffff;
+          margin-top: 10px;
+          cursor: pointer;
+          margin-left: 30px;
+          cursor: pointer;
+          word-break: break-all;
+          text-align: left;
+        }
       }
     }
   }

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

@@ -3,6 +3,8 @@ import { getVideoDetails } from '../api'
 import AppVideoPlayer from '@/components/base/AppVideoPlayer.vue'
 import ViewCourseChapter from './ViewCourseChapter.vue'
 
+const route = useRoute()
+
 const props: any = defineProps({
   data: {
     type: Array
@@ -23,6 +25,13 @@ const getResourceData = (id: string) => {
 
 // 切换视频
 let videoIndex = $ref(0)
+
+onMounted(() => {
+  if (route.query.index !== undefined) {
+    videoIndex = parseInt(route.query.index as '')
+  }
+})
+
 const videoOptions = computed(() => {
   return {
     sources: [
@@ -38,8 +47,11 @@ const video = $computed<{ id: string }>(() => {
   return props.data[videoIndex]
 })
 watch(
-  () => videoIndex,
+  () => [videoIndex, route.query.index],
   () => {
+    if (route.query.index !== undefined) {
+      videoIndex = parseInt(route.query.index as '')
+    }
     getResourceData(video.id)
   },
   { immediate: true }

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

@@ -12,6 +12,8 @@ const route = useRoute()
 const id = route.query.id as string
 
 const courseDetails: any = ref({})
+
+let chapters = $ref([])
 onMounted(() => {
   // 课程详情
   handleGetViewCourseDetails()
@@ -19,6 +21,16 @@ onMounted(() => {
 const handleGetViewCourseDetails = () => {
   getViewCourseDetails({ id: id }).then((res: any) => {
     courseDetails.value = res.data
+    if (courseDetails.value.chapters[0]?.children) {
+      chapters = courseDetails.value.chapters[0].children.reduce((a: any, b: any) => {
+        b.children.map((item: any, index: number) => {
+          index === 0 ? (item.show = true) : (item.show = false)
+          return item
+        })
+        a.push(b)
+        return a
+      }, [])
+    }
   })
 }
 
@@ -36,7 +48,7 @@ const handleFresh = () => {
         <ViewCourseInfo :data="courseDetails" class="info_bottom" :id="id"></ViewCourseInfo>
         <ViewCourseChapter
           v-if="Object.keys(courseDetails).length"
-          :data="courseDetails.chapters[0]?.children || []"
+          :data="chapters"
           class="info_chapter"
         ></ViewCourseChapter>
       </div>