diff --git a/src/views/CourseDetail.vue b/src/views/CourseDetail.vue index a298754..e7b0214 100644 --- a/src/views/CourseDetail.vue +++ b/src/views/CourseDetail.vue @@ -237,7 +237,7 @@ {{ comment.likeCount }} - + @@ -271,7 +271,7 @@ -
+
@@ -288,7 +288,7 @@
@@ -310,7 +310,7 @@
@@ -347,11 +347,11 @@ 笔记
2025.07.23 16:28 - +
-
+
回复 @{{ replyToUsername }} @@ -661,7 +661,7 @@ const instructorsLoading = ref(false) const instructorsError = ref('') // 评论数据 -const comments = ref([]) +const comments = ref([]) const commentsLoading = ref(false) const commentsError = ref('') @@ -701,6 +701,11 @@ const isUserEnrolled = computed(() => { const enrollConfirmVisible = ref(false) const enrollSuccessVisible = ref(false) +// 评论回复相关状态 +const replyingTo = ref(null) +const replyToUsername = ref('') +const replyText = ref('') + // 章节分组数据 interface ChapterGroup { title: string @@ -1025,6 +1030,45 @@ const loadCourseComments = async () => { } } +// 评论相关函数 +const startReply = (commentId: string, username: string) => { + replyingTo.value = commentId + replyToUsername.value = username + replyText.value = '' +} + +const cancelReply = () => { + replyingTo.value = null + replyToUsername.value = '' + replyText.value = '' +} + +const submitReply = () => { + if (!replyText.value.trim()) return + + console.log('提交回复:', { + commentId: replyingTo.value, + username: replyToUsername.value, + content: replyText.value + }) + + // 这里可以调用API提交回复 + // 提交成功后清空状态 + cancelReply() +} + +const adjustReplyTextareaHeight = (event: Event) => { + const textarea = event.target as HTMLTextAreaElement + textarea.style.height = 'auto' + textarea.style.height = textarea.scrollHeight + 'px' +} + +const handleReplyTextareaClick = () => { + if (!userStore.isLoggedIn) { + showLoginModal() + } +} + // 切换章节展开/折叠 const toggleChapter = (chapterIndex: number) => { console.log('点击切换章节,章节索引:', chapterIndex) @@ -3243,16 +3287,12 @@ onMounted(() => { } /* 讲师评论特殊样式 */ -.reply-item.instructor-reply {} - .reply-item.instructor-reply .reply-username { color: #666666; font-weight: 500; } /* 用户评论样式 */ -.reply-item.user-reply {} - .reply-item.user-reply .reply-username { color: #666666; font-weight: 500; diff --git a/src/views/CourseDetailEnrolled.vue b/src/views/CourseDetailEnrolled.vue index 2ba1657..ba14338 100644 --- a/src/views/CourseDetailEnrolled.vue +++ b/src/views/CourseDetailEnrolled.vue @@ -450,7 +450,7 @@ import { ref, onMounted, onUnmounted, computed, nextTick } from 'vue' import { useRoute, useRouter } from 'vue-router' import { useUserStore } from '@/stores/user' import { CourseApi } from '@/api/modules/course' -import type { Course, CourseSection, SectionVideo, VideoQuality } from '@/api/types' +import type { Course, CourseSection, SectionVideo, VideoQuality, CourseComment, Instructor } from '@/api/types' import SafeAvatar from '@/components/common/SafeAvatar.vue' import LearningProgressStats from '@/components/common/LearningProgressStats.vue' import NotesModal from '@/components/common/NotesModal.vue' @@ -495,6 +495,9 @@ const instructors = ref([]) const instructorsLoading = ref(false) const instructorsError = ref('') +// 评论输入相关状态 +const newComment = ref('') + // 视频源配置 const VIDEO_CONFIG = { // 本地视频(当前使用) @@ -1247,6 +1250,27 @@ const saveNote = (content: string) => { // 这里可以添加保存笔记到服务器的逻辑 } +// 评论相关函数 +const adjustTextareaHeight = (event: Event) => { + const textarea = event.target as HTMLTextAreaElement + textarea.style.height = 'auto' + textarea.style.height = textarea.scrollHeight + 'px' +} + +const handleTextareaClick = () => { + // 处理评论输入框点击事件 + console.log('评论输入框被点击') +} + +const submitComment = () => { + if (!newComment.value.trim()) return + + console.log('提交评论:', newComment.value) + // 这里可以调用API提交评论 + // 提交成功后清空输入框 + newComment.value = '' +} + onMounted(async () => { console.log('已报名课程详情页加载完成,课程ID:', courseId.value) initializeEnrolledState() // 初始化已报名状态