feat(学生页面): 添加作业点评功能

实现作业点评弹窗，包含评分和点评内容输入支持已有点评的编辑和展示添加点评状态标识和样式优化

feat(学生页面): 添加作业点评功能
实现作业点评弹窗，包含评分和点评内容输入支持已有点评的编辑和展示添加点评状态标识和样式优化
hookehuyr
Commit 6570b51f19316bd0f21f43576ca3edea54fac595 6570b51f 1 parent f616ebe8
Showing 1 changed file with 180 additions and 19 deletions
src/views/teacher/studentPage.vue
--- a/src/views/teacher/studentPage.vue
View file @6570b51
+++ b/src/views/teacher/studentPage.vue
View file @6570b51
@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2025-06-19 17:12:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-20 00:11:37
+ * @LastEditTime: 2025-06-20 09:55:57
  * @FilePath: /mlaj/src/views/teacher/studentPage.vue
  * @Description: 学生详情页面
 -->
@@ -43,16 +43,11 @@
           <span class="text-sm font-medium text-gray-700">所学课程</span>
         </div>
         <div class="flex flex-wrap gap-2">
-          <van-tag
+          <van-tag v-for="course in studentInfo.courses" :key="course"
-            v-for="course in studentInfo.courses"
-            :key="course"
             :type="selectedCourses.includes(course) ? 'primary' : 'default'"
             :color="selectedCourses.includes(course) ? '#10b981' : '#f0f0f0'"
-            :text-color="selectedCourses.includes(course) ? '#ffffff' : '#666666'"
+            :text-color="selectedCourses.includes(course) ? '#ffffff' : '#666666'" size="large"
-            size="large"
+            @click="toggleCourseSelection(course)" class="cursor-pointer transition-all duration-200 hover:opacity-80">
-            @click="toggleCourseSelection(course)"
-            class="cursor-pointer transition-all duration-200 hover:opacity-80"
-          >
             {{ course }}
           </van-tag>
         </div>
@@ -106,15 +101,15 @@
       </div>
       <!-- 使用van-sticky包裹van-tabs实现粘性布局 -->
-        <div class="bg-white" style="margin: 1rem;">
+      <div class="bg-white" style="margin: 1rem;">
-      <van-sticky :offset-top="0">
+        <van-sticky :offset-top="0">
           <van-tabs v-model:active="activeTab" color="#10b981" animated swipeable @change="handleTabChange">
             <van-tab title="作业记录" name="homework"></van-tab>
             <van-tab title="班主任点评" name="evaluation"></van-tab>
             <van-tab title="打卡统计" name="statistics"></van-tab>
           </van-tabs>
-      </van-sticky>
+        </van-sticky>
-        </div>
+      </div>
       <!-- 记录列表 -->
       <van-list v-show="activeTab === 'statistics'" v-model:loading="recordLoading" :finished="recordFinished"
@@ -134,7 +129,7 @@
                 <span class="text-sm text-gray-600">{{ record.time }}</span>
               </div>
             </div>
-            
+
             <!-- 右侧：状态 -->
             <div class="flex items-center">
               <span v-if="record.status === '正常'" class="text-green-600 text-sm mr-2">{{ record.status }}</span>
@@ -159,7 +154,7 @@
             <van-icon name="calendar-o" size="16" color="#10b981" class="mr-2" />
             <span class="text-sm text-gray-600">{{ evaluation.date }}</span>
           </div>
-          
+
           <!-- 第二行：点评内容 + 图标 -->
           <div class="flex items-start mb-3">
             <van-icon name="chat-o" size="16" color="#3b82f6" class="mr-2 mt-0.5" />
@@ -167,7 +162,7 @@
               <p class="text-gray-800 text-sm leading-relaxed">{{ evaluation.content }}</p>
             </div>
           </div>
-          
+
           <!-- 第三行：点评分数 + rate评分组件 -->
           <div class="flex items-center">
             <van-icon name="star-o" size="16" color="#f59e0b" class="mr-2" />
@@ -242,9 +237,25 @@
               }" @play="(player) => handleAudioPlay(player, post)" />
             </div>
           </div>
-          <div class="post-footer">
+          <div class="post-footer flex items-center justify-between">
-            <van-icon @click="handLike(post)" name="good-job" class="like-icon" :color="post.is_liked ? 'red' : ''" />
+            <!-- 左侧：点赞 -->
-            <span class="like-count">{{ post.likes }}</span>
+            <div class="flex items-center">
+              <van-icon @click="handLike(post)" name="good-job" class="like-icon" :color="post.is_liked ? 'red' : ''" />
+              <span class="like-count ml-1">{{ post.likes }}</span>
+            </div>
+
+            <!-- 右侧：点评 -->
+            <div class="flex items-center cursor-pointer" @click="openCommentPopup(post)">
+              <van-icon
+                name="comment-o"
+                :color="post.is_commented ? '#10b981' : '#999'"
+                size="18"
+                class="mr-1"
+              />
+              <span class="text-sm" :class="post.is_commented ? 'text-green-600' : 'text-gray-500'">
+                {{ post.is_commented ? '已点评' : '点评' }}
+              </span>
+            </div>
           </div>
         </div>
       </van-list>
@@ -269,6 +280,55 @@
           </div>
         </div>
       </van-popup>
+
+      <!-- 点评弹窗 -->
+      <van-popup v-model:show="showCommentPopup" position="bottom" round class="comment-popup">
+        <div class="p-6 w-100">
+          <div class="text-center text-lg font-bold mb-4">作业点评</div>
+
+          <!-- 评分 -->
+          <div class="mb-4">
+            <div class="text-sm text-gray-600 mb-2">评分</div>
+            <van-rate v-model="commentForm.rating" :size="24" color="#ffd21e" void-color="#eee" />
+          </div>
+
+          <!-- 点评内容 -->
+          <div class="mb-6">
+            <div class="text-sm text-gray-600 mb-2">点评内容</div>
+            <van-field
+              v-model="commentForm.content"
+              type="textarea"
+              placeholder="请输入点评内容..."
+              rows="4"
+              maxlength="200"
+              show-word-limit
+              :border="false"
+              class="bg-gray-50 rounded-lg"
+            />
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class="flex gap-3">
+            <van-button
+              block
+              type="default"
+              @click="closeCommentPopup"
+              class="flex-1"
+            >
+              取消
+            </van-button>
+            <van-button
+              block
+              type="primary"
+              @click="submitComment"
+              class="flex-1"
+              :disabled="!commentForm.content.trim()"
+            >
+              提交
+            </van-button>
+          </div>
+        </div>
+      </van-popup>
     </div>
   </van-config-provider>
 </template>
@@ -322,6 +382,83 @@ const activeTab = ref('homework')
 const statusFilter = ref('按状态')
 const showStatusPopup = ref(false)
+// 点评相关
+const showCommentPopup = ref(false)
+const currentCommentPost = ref(null)
+const commentForm = ref({
+  rating: 0,
+  content: ''
+})
+
+/**
+ * 打开点评弹窗
+ * @param {Object} post - 作业帖子对象
+ */
+const openCommentPopup = (post) => {
+  currentCommentPost.value = post
+  // 如果已有点评，填充表单
+  if (post.comment) {
+    commentForm.value.rating = post.comment.rating || 0
+    commentForm.value.content = post.comment.content || ''
+  } else {
+    // 重置表单
+    commentForm.value.rating = 0
+    commentForm.value.content = ''
+  }
+  showCommentPopup.value = true
+}
+
+/**
+ * 关闭点评弹窗
+ */
+const closeCommentPopup = () => {
+  showCommentPopup.value = false
+  currentCommentPost.value = null
+  commentForm.value.rating = 0
+  commentForm.value.content = ''
+}
+
+/**
+ * 提交点评
+ */
+const submitComment = async () => {
+  if (!commentForm.value.content.trim()) {
+    showFailToast('请输入点评内容')
+    return
+  }
+
+  if (commentForm.value.rating === 0) {
+    showFailToast('请选择评分')
+    return
+  }
+
+  try {
+    showLoadingToast('提交中...')
+
+    // 这里应该调用API提交点评
+    // await submitCommentAPI(currentCommentPost.value.id, commentForm.value)
+
+    // 模拟API调用
+    await new Promise(resolve => setTimeout(resolve, 1000))
+
+    // 更新本地数据
+    if (currentCommentPost.value) {
+      currentCommentPost.value.is_commented = true
+      currentCommentPost.value.comment = {
+        rating: commentForm.value.rating,
+        content: commentForm.value.content,
+        created_at: new Date().toISOString()
+      }
+    }
+
+    showSuccessToast('点评提交成功')
+    closeCommentPopup()
+  } catch (error) {
+    console.error('提交点评失败:', error)
+    showFailToast('提交失败，请重试')
+  }
+}
+
 /**
  * 切换课程选中状态（单选模式）
  * @param {string} course - 课程名称
@@ -786,6 +923,8 @@ const formatData = (data) => {
       is_liked: item.is_like,
       is_my: item.is_my,
       file_type: item.file_type,
+      is_commented: item.is_commented || false, // 是否已点评
+      comment: item.comment || null, // 点评内容
     }
   })
   return formattedData;
@@ -887,4 +1026,26 @@ const formatData = (data) => {
     }
   }
 }
+
+/* 点评弹窗样式 */
+.comment-popup {
+  .van-popup {
+    max-width: 90vw;
+  }
+
+  .van-rate {
+    display: flex;
+    justify-content: center;
+  }
+
+  .van-field {
+    padding: 12px;
+    border-radius: 8px;
+  }
+
+  .van-button {
+    height: 44px;
+    border-radius: 8px;
+  }
+}
 </style>