feat(teacher): 添加学生详情跳转和作业点评功能

- 在班级页面添加点击学生跳转至详情页功能 - 在签到页面添加作业点评弹窗及相关逻辑 - 调整日历组件高度和显示文本 - 优化图标大小和间距

feat(teacher): 添加学生详情跳转和作业点评功能
- 在班级页面添加点击学生跳转至详情页功能 - 在签到页面添加作业点评弹窗及相关逻辑 - 调整日历组件高度和显示文本 - 优化图标大小和间距
hookehuyr
Commit 54ed8a1481f939c180611a02747125cfaa89f9cc 54ed8a14 1 parent 602ae2b2
Showing 2 changed files with 142 additions and 12 deletions
src/views/teacher/checkinPage.vue
src/views/teacher/myClassPage.vue
--- a/src/views/teacher/checkinPage.vue
View file @54ed8a1
+++ b/src/views/teacher/checkinPage.vue
View file @54ed8a1
 <!--
   * @Date: 2025-05-29 15:34:17
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-19 14:49:38
+ * @LastEditTime: 2025-06-20 10:40:58
  * @FilePath: /mlaj/src/views/teacher/checkinPage.vue
   * @Description: 文件描述
 -->
@@ -16,7 +16,7 @@
         </van-dropdown-menu>
       </van-sticky>
-      <van-calendar ref="myRefCalendar" :title="taskDetail.title" :poppable="false" :show-confirm="false" :style="{ height: calendarHeight }"
+      <van-calendar ref="myRefCalendar" :show-title="false" :poppable="false" :show-confirm="false" :style="{ height: calendarHeight }"
         switch-mode="year-month" color="#4caf50" :formatter="formatter" row-height="50" :show-mark="false"
         @select="onSelectDay"
         @click-subtitle="onClickSubtitle">
@@ -148,9 +148,25 @@
                 />
               </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>
@@ -161,6 +177,51 @@
       <div style="height: 5rem;"></div>
     </van-config-provider>
+    <!-- 点评详情弹窗 -->
+    <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>
+          <div class="flex justify-center">
+            <van-rate :model-value="currentCommentPost?.comment?.rating || 0" :size="24" color="#ffd21e" void-color="#eee" readonly />
+            <span class="ml-2 text-sm text-gray-500">({{ currentCommentPost?.comment?.rating || 0 }}/5)</span>
+          </div>
+        </div>
+
+        <!-- 显示点评内容 -->
+        <div class="mb-6">
+          <div class="text-sm text-gray-600 mb-2">点评内容</div>
+          <div class="bg-gray-50 rounded-lg p-3 min-h-[100px]">
+            <p class="text-gray-800 text-sm leading-relaxed">
+              {{ currentCommentPost?.comment?.content || '暂无点评内容' }}
+            </p>
+          </div>
+        </div>
+
+        <!-- 点评时间 -->
+        <div class="mb-6" v-if="currentCommentPost?.comment?.created_at">
+          <div class="text-sm text-gray-600 mb-2">点评时间</div>
+          <div class="text-sm text-gray-500">
+            {{ formatCommentTime(currentCommentPost.comment.created_at) }}
+          </div>
+        </div>
+
+        <!-- 关闭按钮 -->
+        <div class="flex justify-center">
+          <van-button
+            type="primary"
+            @click="closeCommentPopup"
+            class="w-32"
+          >
+            关闭
+          </van-button>
+        </div>
+      </div>
+    </van-popup>
+
     <van-dialog v-model:show="dialog_show" title="标题" show-cancel-button></van-dialog>
   </AppLayout>
 </template>
@@ -182,6 +243,10 @@ const route = useRoute()
 const router = useRouter()
 useTitle(route.meta.title);
+// 点评相关
+const showCommentPopup = ref(false)
+const currentCommentPost = ref(null)
+
 const value1 = ref(0);
 const value2 = ref('a');
 const value3 = ref('v');
@@ -240,7 +305,7 @@ const calendarHeight = computed(() => {
   const maxHeight = 500; // 最大高度
   // 根据屏幕宽度调整高度比例
-  let heightRatio = 0.6; // 默认占可用高度的55%
+  let heightRatio = 0.5; // 默认占可用高度的55%
   if (windowWidth.value < 375) {
     // 小屏手机
@@ -481,11 +546,11 @@ const formatter = (day) => {
       if (selectedDate.value === formattedDate) {
         day.className = 'calendar-selected';
         day.type = 'selected';
-        day.bottomInfo = '已签到';
+        day.bottomInfo = '已打卡';
       } else {
         day.className = 'calendar-checkin';
         day.type = 'selected';
-        day.bottomInfo = '已签到';
+        day.bottomInfo = '已打卡';
       }
     }
   }
@@ -549,6 +614,40 @@ const handLike = async (post) => {
   }
 }
+/**
+ * 打开点评详情弹窗
+ * @param {Object} post - 作业帖子对象
+ */
+const openCommentPopup = (post) => {
+  currentCommentPost.value = post
+  showCommentPopup.value = true
+}
+
+/**
+ * 关闭点评详情弹窗
+ */
+const closeCommentPopup = () => {
+  showCommentPopup.value = false
+  currentCommentPost.value = null
+}
+
+/**
+ * 格式化点评时间
+ * @param {string} timeString - 时间字符串
+ * @returns {string} 格式化后的时间
+ */
+const formatCommentTime = (timeString) => {
+  if (!timeString) return ''
+  const date = new Date(timeString)
+  return date.toLocaleString('zh-CN', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
 const editCheckin = (post) => {
   if (post.file_type === 'image') {
     router.push({
@@ -707,6 +806,12 @@ const formatData = (data) => {
         is_liked: item.is_like,
         is_my: item.is_my,
         file_type: item.file_type,
+        is_commented: item.is_commented || Math.random() > 0.5, // 随机设置是否已点评，用于测试
+        comment: item.comment || (Math.random() > 0.5 ? {
+          rating: Math.floor(Math.random() * 5) + 1,
+          content: ['作业完成得很好，继续保持！', '需要更加仔细一些，注意细节。', '表现优秀，值得表扬！', '还有进步空间，加油！'][Math.floor(Math.random() * 4)],
+          created_at: new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000).toISOString()
+        } : null)
       }
     })
   return formattedData;
@@ -841,4 +946,26 @@ const handleAdd = () => {
     }
   }
 }
+
+// 点评弹窗样式
+.comment-popup {
+  .van-popup {
+    max-width: 500px;
+    margin: 0 auto;
+  }
+
+  .van-rate {
+    justify-content: center;
+  }
+
+  .van-field {
+    padding: 12px;
+    border-radius: 8px;
+  }
+
+  .van-button {
+    height: 44px;
+    border-radius: 8px;
+  }
+}
 </style>
--- a/src/views/teacher/myClassPage.vue
View file @54ed8a1
+++ b/src/views/teacher/myClassPage.vue
View file @54ed8a1
@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2025-01-20 10:00:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-20 10:11:32
+ * @LastEditTime: 2025-06-20 10:17:50
  * @FilePath: /mlaj/src/views/teacher/myClassPage.vue
  * @Description: 我的班级页面
 -->
@@ -18,9 +18,9 @@
             <div class="flex-1">
               <h2 class="text-lg font-bold text-gray-800">{{ userInfo.name }}</h2>
               <div class="flex items-center mt-1">
-                <van-icon name="clock-o" size="20" color="#10b981" class="mr-1" />
+                <van-icon name="clock-o" size="22" color="#10b981" class="mr-1" />&nbsp;
-                <van-icon name="chat-o" size="20" color="#10b981" class="mr-1" />
+                <van-icon name="chat-o" size="22" color="#10b981" class="mr-1" />&nbsp;
-                <van-icon name="comment-circle-o" size="20" color="#10b981" />
+                <van-icon name="comment-circle-o" size="22" color="#10b981" />&nbsp;
               </div>
             </div>
           </div>
@@ -387,6 +387,9 @@ const handleSearch = (value) => {
 const handleStudentClick = (student) => {
   console.log('点击学生:', student)
   // 这里可以跳转到学生详情页
+  router.push({
+    path: '/teacher/student/' + student.id,
+  })
 }
 /**