hookehuyr

fix(课程页面): 修复课程目录滚动容器引用错误并优化代码格式

修复StudyDetailPage中滚动容器引用未定义的问题,添加正确的ref引用
移除CourseDetailPage中多余的空行,保持代码整洁
......@@ -269,7 +269,7 @@ const toggleFavorite = async () => {
// Curriculum items
const curriculumItems = computed(() => {
if (!course.value) return [];
return [
{ title: '课程特色', active: activeTab.value === '课程特色', show: !!course.value.feature },
{ title: '课程大纲', active: activeTab.value === '课程大纲', show: !!(course.value.schedule && course.value.schedule.length > 0) },
......@@ -368,13 +368,13 @@ onMounted(async () => {
isFavorite.value = foundCourse.is_favorite;
isPurchased.value = foundCourse.is_buy;
isReviewed.value = foundCourse.is_comment;
// 设置默认选中的 tab,确保选中的 tab 有内容
const availableTabs = curriculumItems.value;
if (availableTabs.length > 0 && !availableTabs.some(item => item.title === activeTab.value)) {
activeTab.value = availableTabs[0].title;
}
// 获取评论列表
await fetchCommentList()
} else {
......
......@@ -215,7 +215,7 @@
</div>
<!-- 可滚动的目录列表 -->
<div class="flex-1 overflow-y-auto px-4 py-2">
<div ref="scrollContainer" class="flex-1 overflow-y-auto px-4 py-2" style="overflow-y: scroll;">
<div v-if="course_lessons.length" class="space-y-4">
<div v-for="(lesson, index) in course_lessons" :key="index" @click="handleLessonClick(lesson)"
class="bg-white p-4 cursor-pointer hover:bg-gray-50 transition-colors border-b border-gray-200 relative">
......@@ -252,7 +252,7 @@ import dayjs from 'dayjs';
import { formatDate } from '@/utils/tools'
import axios from 'axios';
import { v4 as uuidv4 } from "uuid";
import { useIntersectionObserver } from '@vueuse/core';
import PdfPreview from '@/components/ui/PdfPreview.vue';
// 导入接口
......@@ -272,6 +272,8 @@ const audioPlayerRef = ref(null);
const showCommentPopup = ref(false);
const popupComment = ref('');
const scrollContainer = ref(null);
// 课程目录相关
const course_lessons = ref([]);
const course_type_maps = ref({
......@@ -870,7 +872,7 @@ watch(showCatalog, (newVal) => {
const lessonTop = selectedLesson.offsetTop;
const lessonHeight = selectedLesson.clientHeight;
const scrollTop = lessonTop - (containerHeight / 2) + (lessonHeight / 2);
// 平滑滚动到指定位置
scrollContainer.scrollTo({
top: scrollTop,
......