From b37cdd3ccc04b7bca2593938e7bb83c72692e732 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E5=BC=A0?= <2091066548@qq.com>
Date: Tue, 19 Aug 2025 02:21:57 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=89=93=E5=8C=85=E6=8A=A5?=
 =?UTF-8?q?=E9=94=99=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/CourseDetail.vue         | 62 ++++++++++++++++++++++++------
 src/views/CourseDetailEnrolled.vue | 26 ++++++++++++-
 2 files changed, 76 insertions(+), 12 deletions(-)

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 @@
                                     </svg>
                                     {{ comment.likeCount }}
                                   </button>
-                                  <button class="action-btn" @click="startReply(comment.id, comment.username)">回复</button>
+                                  <button class="action-btn" @click="startReply(comment.id, comment.userName)">回复</button>
                               </div>
 
                               <!-- 回复输入区域 -->
@@ -271,7 +271,7 @@
                               </div>
 
                               <!-- 回复区域示例 -->
-                              <div class="comment-replies" v-if="comment.id === 1">
+                              <div class="comment-replies" v-if="comment.id === '1'">
                                 <!-- 讲师回复 -->
                                 <div class="reply-item instructor-reply">
                                   <div class="reply-avatar">
@@ -288,7 +288,7 @@
                                     <div class="reply-footer">
                                       <span class="reply-time">2025.07.23 17:30</span>
                                       <div class="reply-actions">
-                                        <button class="reply-action-btn" @click="startReply(1, '张老师')">回复</button>
+                                        <button class="reply-action-btn" @click="startReply('1', '张老师')">回复</button>
                                       </div>
                                     </div>
                                   </div>
@@ -310,7 +310,7 @@
                                     <div class="reply-footer">
                                       <span class="reply-time">2025.07.23 18:15</span>
                                       <div class="reply-actions">
-                                        <button class="reply-action-btn" @click="startReply(1, '李同学')">回复</button>
+                                        <button class="reply-action-btn" @click="startReply('1', '李同学')">回复</button>
                                       </div>
                                     </div>
                                   </div>
@@ -347,11 +347,11 @@
                                   <span>笔记</span>
                                 </div>
                                 <span class="comment-time">2025.07.23 16:28</span>
-                                <button class="action-btn" @click="startReply(1, '张老师')">回复</button>
+                                <button class="action-btn" @click="startReply('1', '张老师')">回复</button>
                               </div>
 
                               <!-- 回复输入区域 -->
-                              <div v-if="replyingTo === 1" class="reply-input-section">
+                              <div v-if="replyingTo === '1'" class="reply-input-section">
                                 <div class="reply-input-header">
                                   <span class="reply-to-text">回复 @{{ replyToUsername }}</span>
                                   <button class="cancel-reply-btn" @click="cancelReply">取消</button>
@@ -661,7 +661,7 @@ const instructorsLoading = ref(false)
 const instructorsError = ref('')
 
 // 评论数据
-const comments = ref([])
+const comments = ref<CourseComment[]>([])
 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<string | null>(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<Instructor[]>([])
 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()  // 初始化已报名状态