将视频界面的保存进度提取出来

src/components/videopage/VideoPlayer.vue

@@ -54,10 +54,7 @@ import {
 import { videoPlay as Vue3VideoPlay } from 'vue3-video-play'
 import Hls from 'hls.js'
 import { ElMessage } from 'element-plus'
-// 导入全局年级id
-import { globalState } from '@/utils/globalState.js'
 // 导入图标
-import { saveRecord } from '@/api/personalized/index.js'
 import { CloseBold } from '@element-plus/icons-vue'
 
 
@@ -81,14 +78,6 @@ const videoRef = ref(null)
 const hlsRef = ref(null)
 // 记录已经暂停过的时间点索引
 const pausedIndices = ref([])
-// 记录已经保存的进度百分比
-const savedProgress = ref([])
-// 节流时间间隔(毫秒)
-const THROTTLE_TIME = 3000
-// 上次播放进度
-const lastPlayProgress = ref(0)
-// 定义进度数组
-const targetProgresses = [10, 50, 100]
 // 章节要点标记
 const chapterMarkers = ref([])
 // 历史播放位置提示状态
@@ -98,22 +87,9 @@ const lastPlayTime = ref(0)
 // 历史播放提示位置百分比
 const historyTipPosition = ref(0)
 
-// 定义节流函数
-const throttle = (fn, delay) => {
-  let lastCall = 0
-  return function (...args) {
-    const now = Date.now()
-    if (now - lastCall >= delay) {
-      lastCall = now
-      return fn.apply(this, args)
-    }
-  }
-}
-
-// 保存进度(带节流)
-const saveProgress = throttle(async (progress, currentTime) => {
+// 保存本地进度(只保存到localStorage，用于续播功能)
+const saveLocalProgress = (progress, currentTime) => {
   try {
-    // 保存到localStorage，下次加载视频续播
     localStorage.setItem(
       `videoProgress_${props.courseId}`,
       JSON.stringify({
@@ -122,19 +98,10 @@ const saveProgress = throttle(async (progress, currentTime) => {
         timestamp: Date.now()
       })
     )
-    // 保存视频进度接口
-    await saveRecord({
-      brpNjId: globalState.getGradeId(),
-      brpCtId: props.typeId,
-      brpCourseId: props.courseId,
-      brpType: 'course',
-      brpProgress: progress
-    })
-    savedProgress.value.push(progress)
   } catch (error) {
-    console.error(`保存进度失败:`, error)
+    console.error(`保存本地进度失败:`, error)
   }
-}, THROTTLE_TIME)
+}
 
 // 处理视频元数据加载完成
 const handleLoadedMetadata = () => {
@@ -174,24 +141,9 @@ const handleTimeUpdate = ev => {
 
   const progressPercentage =
     duration > 0 ? Math.round((currentTime / duration) * 100) : 0
-
-  // 更新最后播放进度
-  lastPlayProgress.value = progressPercentage
-
-  // 检查是否达到目标进度点且尚未保存
-  targetProgresses.some(target => {
-    const isNearTarget = Math.abs(progressPercentage - target) <= 2
-    const isNotSaved = !savedProgress.value.includes(target)
-    if (isNearTarget && isNotSaved) {
-      // 保存目标进度
-      saveProgress(target, currentTime)
-      return true
-    }
-    return false
-  })
-
-  // 使用节流保存进度
-  saveProgress(progressPercentage, currentTime)
+    
+  // 保存本地进度用于续播功能
+  saveLocalProgress(progressPercentage, currentTime)
 
   // 触发父组件的时间更新事件
   emits('timeUpdate', { currentTime, progressPercentage })
@@ -226,11 +178,10 @@ const handleSeeked = () => {
 
 // 添加视频结束事件处理
 const handleVideoEnded = () => {
-  // 视频结束时保存100%进度
-  if (!savedProgress.value.includes(100)) {
-    saveProgress(100, videoRef.value.duration)
-  }
-  // emits('videoEnded')
+  // 保存本地100%进度用于续播功能
+  saveLocalProgress(100, videoRef.value?.duration || 0)
+  // 触发父组件的视频结束事件
+  emits('videoEnded')
 }
 
 // 在视频加载完成后设置上次播放进度
@@ -243,17 +194,11 @@ const setLastPlayPosition = () => {
       if (currentTime && !isNaN(currentTime) && currentTime > 0) {
         // 存储上次播放位置但不自动跳转
         lastPlayTime.value = currentTime
-        lastPlayProgress.value = progress
         // 计算历史提示位置
         const duration = videoRef.value.duration
         historyTipPosition.value = duration > 0 ? (currentTime / duration) * 100 : 0
         showHistoryTip.value = true
         
-        // 检查是否已有保存的进度点
-        if (progress >= 10) savedProgress.value.push(10)
-        if (progress >= 50) savedProgress.value.push(50)
-        if (progress >= 100) savedProgress.value.push(100)
-        
         // 5秒后自动隐藏历史位置提示
         setTimeout(() => {
           showHistoryTip.value = false

src/views/AIPage/AIDevelop.vue

@@ -187,6 +187,7 @@ import isDisabledImage from '@/assets/images/permission/isDisabled.png'
 import classImages from '@/assets/icon/class.png'
 import { ClassType } from '@/api/class.js'
 import { Message } from '@/utils/message/Message.js'
+// 保存进度接口
 import { saveRecord } from '@/api/personalized/index.js'
 
 // 导入全局状态
@@ -247,6 +248,15 @@ const courseDataScope = ref([])
 // 测试账号禁用视频
 const isDisabled = ref(false)
 
+// 保存进度相关状态
+const savedProgress = ref([])
+// 节流时间间隔(毫秒)
+const THROTTLE_TIME = 3000
+// 上次播放进度
+const lastPlayProgress = ref(0)
+// 定义进度数组
+const targetProgresses = [10, 50, 100]
+
 
 //课程小节字典
 const menuDict = ref({
@@ -257,6 +267,71 @@ const menuDict = ref({
   5: '课程总结'
 })
 
+// 定义节流函数
+const throttle = (fn, delay) => {
+  let lastCall = 0
+  return function (...args) {
+    const now = Date.now()
+    if (now - lastCall >= delay) {
+      lastCall = now
+      return fn.apply(this, args)
+    }
+  }
+}
+
+// 保存进度(带节流)
+const saveProgress = throttle(async (progress, currentTime, courseId) => {
+  try {
+    // 保存到localStorage，下次加载视频续播
+    localStorage.setItem(
+      `videoProgress_${courseId}`,
+      JSON.stringify({
+        progress: progress,
+        currentTime: currentTime,
+        timestamp: Date.now()
+      })
+    )
+    // 保存视频进度接口
+    await saveRecord({
+      brpNjId: gradeId.value || globalState.getGradeId(),
+      brpCtId: typeId.value,
+      brpCourseId: courseId,
+      brpType: 'course',
+      brpProgress: progress
+    })
+    savedProgress.value.push(progress)
+  } catch (error) {
+    console.error(`保存进度失败:`, error)
+  }
+}, THROTTLE_TIME)
+
+// 检查并保存进度
+const checkAndSaveProgress = (progressPercentage, currentTime, courseId) => {
+  // 更新最后播放进度
+  lastPlayProgress.value = progressPercentage
+
+  // 检查是否达到目标进度点且尚未保存
+  targetProgresses.some(target => {
+    const isNearTarget = Math.abs(progressPercentage - target) <= 2
+    const isNotSaved = !savedProgress.value.includes(target)
+    if (isNearTarget && isNotSaved) {
+      // 保存目标进度
+      saveProgress(target, currentTime, courseId)
+      return true
+    }
+    return false
+  })
+
+  // 使用节流保存进度
+  saveProgress(progressPercentage, currentTime, courseId)
+}
+
+// 重置保存进度状态
+const resetSaveProgressState = () => {
+  savedProgress.value = []
+  lastPlayProgress.value = 0
+}
+
 // 切换抽屉显示状态的函数
 const toggleDrawer = () => {
   drawerVisible.value = !drawerVisible.value
@@ -281,6 +356,8 @@ const handleSelect = index => {
     console.log("课程id：",courseId.value)
     // 切换标题后，关闭抽屉
     drawerVisible.value = false
+    // 重置保存进度状态
+    resetSaveProgressState()
   } else {
     //视频不存在
     Message().notifyWarning('视频不存在！', true)
@@ -330,6 +407,12 @@ const playNextVideo = () => {
 // 播放结束
 const handleVideoEnded = () => {
   console.log("播放结束")
+  
+  // 如果是视频类型并且有课程ID，保存100%进度
+  if (course.value.courseContentType === 'video' && courseId.value && !savedProgress.value.includes(100)) {
+    saveProgress(100, 0, courseId.value)
+  }
+  
   // 记录当前视频ID为已观看
   if (
     course.value &&
@@ -373,6 +456,11 @@ const disableVideo = (index = course.value.key) => {
 
 // 处理视频时间更新事件
 const handleVideoTimeUpdate = ({ currentTime, progressPercentage, courseConfig: config }) => {
+  // 检查并保存视频进度
+  if (courseId.value) {
+    checkAndSaveProgress(progressPercentage, currentTime, courseId.value)
+  }
+  
   if (config) {
     questionDialogVisible.value = true
     courseConfig.value = config