Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
mlaj
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2026-01-22 20:13:57 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
be225c21d03da15d31924f2e302272b691ce31ce
be225c21
1 parent
5b3fcd78
feat(课程学习): 添加课程详情页和课程学习页的滚动位置同步功能
在课程详情页跳转至学习页时传递课程ID,并在学习页中监听课程ID变化时同步滚动位置
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
47 additions
and
3 deletions
src/views/profile/StudyCoursePage.vue
src/views/study/StudyDetailPage.vue
src/views/profile/StudyCoursePage.vue
View file @
be225c2
...
...
@@ -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 } }
);
};
// 打卡相关状态
...
...
src/views/study/StudyDetailPage.vue
View file @
be225c2
...
...
@@ -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 } });
...
...
Please
register
or
login
to post a comment