hookehuyr

feat(课程学习): 添加课程详情页和课程学习页的滚动位置同步功能

在课程详情页跳转至学习页时传递课程ID,并在学习页中监听课程ID变化时同步滚动位置
......@@ -125,6 +125,9 @@ import CheckInDialog from '@/components/checkin/CheckInDialog.vue';
import { getCourseDetailAPI } from '@/api/course';
const router = useRouter();
const course_id = computed(() => {
return router.currentRoute.value.params.id || '';
});
// 页面标题
useTitle('课程详情');
......@@ -265,8 +268,7 @@ const timeout_task_list = ref([]);
*/
const get_scroll_store_key = () => {
const course_id = router.currentRoute.value.params.id || '';
return `study_course_scroll_${course_id}`;
return `study_course_scroll_${course_id.value}`;
};
/**
......@@ -485,7 +487,7 @@ const handleTabChange = (name) => {
const goToStudyDetail = (lessonId) => {
save_scroll_state(lessonId);
router.push(`/studyDetail/${lessonId}`);
router.push({ path: `/studyDetail/${lessonId}`, query: { from_course_id: course_id.value } });
};
// 打卡相关状态
......
......@@ -426,9 +426,51 @@ const handleScroll = () => {
const courseFile = ref({});
/**
* @function sync_study_course_back_position
* @description 同步学习课程返回位置
* @param {string} lesson_id - 当前课程目录项ID
* @returns {void}
* 注释:在用户点击目录项时调用,记录当前滚动位置和目录项ID
*/
const sync_study_course_back_position = (lesson_id) => {
const from_course_id = route.query.from_course_id || '';
if (!from_course_id) return;
const key = `study_course_scroll_${from_course_id}`;
const raw = sessionStorage.getItem(key);
let payload = null;
try {
payload = raw ? JSON.parse(raw) : null;
} catch (e) {
payload = null;
}
if (!payload || typeof payload !== 'object') {
payload = { scroll_y: 0, lesson_id: '', saved_at: 0 };
}
payload.lesson_id = lesson_id || payload.lesson_id || '';
payload.saved_at = Date.now();
sessionStorage.setItem(key, JSON.stringify(payload));
};
watch(
() => route.params.id,
(val) => {
sync_study_course_back_position(val || '');
},
{ immediate: true }
);
const handleLessonClick = async (lesson) => {
showCatalog.value = false; // 关闭目录弹窗
isPlaying.value = false; // 重置播放状态
// 同步学习课程返回位置
sync_study_course_back_position(lesson.id);
// 更新URL地址,不触发页面重新加载
router.replace({ params: { id: lesson.id } });
......