修改更新星星状态

src/views/programming/ProgrammingCourset.vue

@@ -82,7 +82,7 @@
 <script setup>
 // 返回图标
 import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted, computed, watch } from 'vue';
 // 导入路由
 import { useRouter, useRoute } from 'vue-router';
 // 根据ID获取课程列表
@@ -238,20 +238,8 @@ const handleScroll = () => {
   }
 }
 
-// 组件挂载时获取路由参数设置标题
-onMounted(() => {
-  // 检查路由参数中是否有courseTitle
-  const courseTitle = route.query.courseTitle
-  if (courseTitle) {
-    // 设置页面标题
-    pageTitle.value = courseTitle
-  }
-  // 获取当前类型ID
-  typeId.value = route.query.typeId
-  // 保存原始的课程ID和标题，返回时使用
-  originalCourseId.value = route.query.originalCourseId
-  originalCourseTitle.value = route.query.originalCourseTitle
-  // 获取到topicId后，再获取课程列表getBlocklyByTypeId接口
+// 提取课程数据获取和处理逻辑为单独函数
+const fetchCourseData = () => {
   if (typeId.value) {
     getBlocklyByTypeId(typeId.value).then(res => {
       if (res && res.data && Array.isArray(res.data)) {
@@ -265,6 +253,8 @@ onMounted(() => {
           '2': practice,
           '3': summary
         }
+        // 清空旧的课程项
+        courseItems.value = [];
         // 遍历接口返回的数据，设置课程项
         res.data.forEach((item, index) => {
           // 每个课程项都对应位置样式和图片
@@ -281,6 +271,23 @@ onMounted(() => {
       }
     })
   }
+}
+
+// 组件挂载时获取路由参数设置标题
+onMounted(() => {
+  // 检查路由参数中是否有courseTitle
+  const courseTitle = route.query.courseTitle
+  if (courseTitle) {
+    // 设置页面标题
+    pageTitle.value = courseTitle
+  }
+  // 获取当前类型ID
+  typeId.value = route.query.typeId
+  // 保存原始的课程ID和标题，返回时使用
+  originalCourseId.value = route.query.originalCourseId
+  originalCourseTitle.value = route.query.originalCourseTitle
+  // 获取到topicId后，调用函数获取课程列表
+  fetchCourseData();
 })
 
 // 处理课程项点击事件
@@ -311,6 +318,14 @@ const goBackIndex = () => {
     }
   })
 }
+
+// 监听showVideo状态变化，当从true变为false时重新获取课程数据
+watch(showVideo, (newValue, oldValue) => {
+  if (oldValue === true && newValue === false) {
+    // 当视频界面关闭时，调用函数重新获取最新的课程数据
+    fetchCourseData();
+  }
+})
 </script>
 
 <style scoped lang="scss">