feat(teacher): 添加学生点评删除功能并更新班级页面

- 在学生详情页添加删除点评功能，包括确认对话框 - 更新班级页面学生信息展示，使用真实数据字段 - 移除多余的排序选项并调整头像尺寸

feat(teacher): 添加学生点评删除功能并更新班级页面
- 在学生详情页添加删除点评功能，包括确认对话框 - 更新班级页面学生信息展示，使用真实数据字段 - 移除多余的排序选项并调整头像尺寸
hookehuyr
Commit 94520fd17640043cf3deceb30da6e73af5c062bd 94520fd1 1 parent ecc35066
Showing 2 changed files with 106 additions and 47 deletions
src/views/teacher/myClassPage.vue
src/views/teacher/studentPage.vue
--- a/src/views/teacher/myClassPage.vue
View file @94520fd
+++ b/src/views/teacher/myClassPage.vue
View file @94520fd
@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2025-01-20 10:00:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-25 16:12:36
+ * @LastEditTime: 2025-06-25 17:22:37
  * @FilePath: /mlaj/src/views/teacher/myClassPage.vue
  * @Description: 我的班级页面
 -->
@@ -13,10 +13,10 @@
       <div>
         <div class="bg-white p-4">
           <div class="flex items-center mb-4">
-            <van-image round width="3rem" height="3rem"
+            <van-image round width="4rem" height="4rem"
-              :src="userInfo.avatar || 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'" fit="cover" class="mr-3" />
+              :src="currentUser.avatar || 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'" fit="cover" class="mr-3" />
             <div class="flex-1">
-              <h2 class="text-lg font-bold text-gray-800">{{ userInfo.name }}</h2>
+              <h2 class="text-lg font-bold text-gray-800">{{ currentUser.name }}</h2>
               <div class="flex items-center mt-1">
                 <van-icon name="clock-o" size="22" color="#10b981" class="mr-1" />&nbsp;
                 <van-icon name="chat-o" size="22" color="#10b981" class="mr-1" />&nbsp;
@@ -106,15 +106,17 @@
                       <font-awesome-icon v-if="student.gender === 'male'" icon="venus" color="#3b82f6" class="mr-2" style="font-size: 0.85rem;" />
                       <font-awesome-icon v-else icon="mars" color="#ec4899" class="mr-2" style="font-size: 0.85rem;" />
                     </div>
-                    <div class="text-sm text-gray-500" style="text-align: left;">{{ student.className }}</div>
+                    <div class="text-sm text-gray-500" style="text-align: left;">
+                      <span v-for="(item, index) in student.class_list" :key="index" class="mr-2">{{ item }}</span>
+                    </div>
                   </div>
                 </div>
                 <div class="text-right">
                   <div class="flex items-center text-sm text-gray-500 mb-1">
                     <van-icon name="phone-o" size="12" class="mr-1" />
-                    <span>{{ formatPhone(student.phone) }}</span>
+                    <span>{{ formatPhone(student.mobile) }}</span>
                   </div>
-                  <div class="text-xs text-gray-400">{{ student.lastActiveTime }}</div>
+                  <div class="text-xs text-gray-400">{{ student.last_checkin_time }}</div>
                 </div>
                 <van-icon name="arrow" color="#d1d5db" size="16" class="ml-2" />
               </div>
@@ -156,6 +158,7 @@ import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import AppLayout from '@/layouts/AppLayout.vue'
 import { useTitle } from '@vueuse/core';
+import { useAuth } from '@/contexts/auth'
 import { getTeacherGradeClassListAPI } from "@/api/teacher";
@@ -168,11 +171,8 @@ const themeVars = ref({
   searchInputHeight: '2.5rem',
 })
-// 用户信息
+// 获取用户认证状态
-const userInfo = ref({
+const { currentUser } = useAuth()
-  name: '我的班级',
-  avatar: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
-})
 // 筛选器数据
 const selectGradeValue = ref(null);
@@ -189,8 +189,6 @@ const showSortPopup = ref(false)
 // 筛选器选项
 const sortOptions = ref([
   { text: '按活跃度', value: '按活跃度' },
-  { text: '按姓名', value: '按姓名' },
-  { text: '按成绩', value: '按成绩' }
 ])
 // 统计数据
@@ -204,72 +202,72 @@ const studentList = ref([
     id: 1,
     name: '张明',
     gender: 'male',
-    className: '高一(3)班',
+    class_list: ['高一(3)班', '高二(1)班', '高二(2)班'],
-    phone: '13812345678',
+    mobile: '13812345678',
-    lastActiveTime: '5分钟前活跃',
+    last_checkin_time: '5分钟前活跃',
     avatar: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
   },
   {
     id: 2,
     name: '李华',
     gender: 'female',
-    className: '高一(3)班',
+    class_list: ['高一(3)班', '高二(1)班', '高二(2)班'],
-    phone: '13987654321',
+    mobile: '13987654321',
-    lastActiveTime: '10分钟前活跃',
+    last_checkin_time: '10分钟前活跃',
     avatar: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
   },
   {
     id: 3,
     name: '王强',
     gender: 'male',
-    className: '高一(2)班',
+    class_list: ['高一(2)班', '高二(1)班', '高二(2)班'],
-    phone: '13512349876',
+    mobile: '13512349876',
-    lastActiveTime: '15分钟前活跃',
+    last_checkin_time: '15分钟前活跃',
     avatar: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
   },
   {
     id: 4,
     name: '赵敏',
     gender: 'female',
-    className: '高一(1)班',
+    class_list: ['高一(1)班', '高二(1)班', '高二(2)班'],
-    phone: '13643214321',
+    mobile: '13643214321',
-    lastActiveTime: '30分钟前活跃',
+    last_checkin_time: '30分钟前活跃',
     avatar: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
   },
   {
     id: 1,
     name: '张明',
     gender: 'male',
-    className: '高一(3)班',
+    class_list: ['高一(3)班', '高二(1)班', '高二(2)班'],
-    phone: '13812345678',
+    mobile: '13812345678',
-    lastActiveTime: '5分钟前活跃',
+    last_checkin_time: '5分钟前活跃',
     avatar: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
   },
   {
     id: 2,
     name: '李华',
     gender: 'female',
-    className: '高一(3)班',
+    class_list: ['高一(3)班'],
-    phone: '13987654321',
+    mobile: '13987654321',
-    lastActiveTime: '10分钟前活跃',
+    last_checkin_time: '10分钟前活跃',
     avatar: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
   },
   {
     id: 3,
     name: '王强',
     gender: 'male',
-    className: '高一(2)班',
+    class_list: ['高一(2)班'],
-    phone: '13512349876',
+    mobile: '13512349876',
-    lastActiveTime: '15分钟前活跃',
+    last_checkin_time: '15分钟前活跃',
     avatar: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
   },
   {
     id: 4,
     name: '赵敏',
     gender: 'female',
-    className: '高一(1)班',
+    class_list: ['高一(1)班'],
-    phone: '13643214321',
+    mobile: '13643214321',
-    lastActiveTime: '30分钟前活跃',
+    last_checkin_time: '30分钟前活跃',
     avatar: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
   }
 ])
--- a/src/views/teacher/studentPage.vue
View file @94520fd
+++ b/src/views/teacher/studentPage.vue
View file @94520fd
@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2025-06-19 17:12:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-24 17:23:46
+ * @LastEditTime: 2025-06-25 17:47:34
  * @FilePath: /mlaj/src/views/teacher/studentPage.vue
  * @Description: 学生详情页面
 -->
@@ -149,10 +149,19 @@
         finished-text="没有更多了" @load="onEvaluationLoad" class="px-4">
         <div v-for="evaluation in evaluationList" :key="evaluation.id"
           class="bg-white rounded-lg shadow-sm p-4 mb-3 border border-gray-100">
-          <!-- 第一行：时间 + 日历图标 -->
+          <!-- 第一行：时间 + 日历图标 + 删除按钮 -->
-          <div class="flex items-center mb-3">
+          <div class="flex items-center justify-between mb-3">
-            <van-icon name="calendar-o" size="16" color="#10b981" class="mr-2" />
+            <div class="flex items-center">
-            <span class="text-sm text-gray-600">{{ evaluation.date }}</span>
+              <van-icon name="calendar-o" size="16" color="#10b981" class="mr-2" />
+              <span class="text-sm text-gray-600">{{ evaluation.date }}</span>
+            </div>
+            <van-icon
+              name="delete-o"
+              size="16"
+              color="#ef4444"
+              class="cursor-pointer hover:opacity-70"
+              @click="deleteEvaluation(evaluation.id)"
+            />
           </div>
           <!-- 第二行：点评内容 + 图标 -->
@@ -168,7 +177,6 @@
             <van-icon name="star-o" size="16" color="#f59e0b" class="mr-2" />
             <span class="text-sm text-gray-600 mr-3">评分：</span>
             <van-rate v-model="evaluation.score" :size="16" color="#ffd21e" void-color="#eee" readonly />
-            <!-- <span class="text-sm text-gray-500 ml-2">({{ evaluation.score }}/5)</span> -->
           </div>
         </div>
       </van-list>
@@ -330,6 +338,23 @@
           </div>
         </div>
       </van-popup>
+
+      <!-- 删除确认对话框 -->
+      <van-dialog
+        v-model:show="showDeleteDialog"
+        title="温馨提示"
+        :show-cancel-button="true"
+        :show-confirm-button="true"
+        confirm-button-text="确定删除"
+        cancel-button-text="取消"
+        confirm-button-color="#ef4444"
+        @confirm="confirmDelete"
+        @cancel="cancelDelete"
+      >
+        <div class="p-4">
+          <p class="text-gray-700 text-center">确定要删除这条点评吗？</p>
+        </div>
+      </van-dialog>
     </div>
   </van-config-provider>
 </template>
@@ -343,7 +368,7 @@ import AudioPlayer from "@/components/ui/AudioPlayer.vue";
 import { useTitle } from '@vueuse/core';
 import dayjs from 'dayjs';
-import { getTaskDetailAPI, getUploadTaskListAPI, delUploadTaskInfoAPI, likeUploadTaskInfoAPI, dislikeUploadTaskInfoAPI } from "@/api/checkin";
+import { getCheckinTeacherListAPI, delUploadTaskInfoAPI, likeUploadTaskInfoAPI, dislikeUploadTaskInfoAPI } from "@/api/checkin";
 const router = useRouter()
@@ -529,6 +554,10 @@ const records = ref([
 const recordLoading = ref(false)
 const recordFinished = ref(false)
+// 删除对话框相关状态
+const showDeleteDialog = ref(false)
+const currentDeleteId = ref(null)
+
 // 班主任点评列表数据
 const evaluationList = ref([
   {
@@ -621,6 +650,38 @@ const onEvaluationLoad = () => {
 }
 /**
+ * 删除点评
+ * @param {number} evaluationId - 点评ID
+ */
+const deleteEvaluation = (evaluationId) => {
+  currentDeleteId.value = evaluationId
+  showDeleteDialog.value = true
+}
+
+/**
+ * 确认删除操作
+ */
+const confirmDelete = () => {
+  // 这里应该调用API删除点评，暂时模拟删除操作
+  const index = evaluationList.value.findIndex(item => item.id === currentDeleteId.value)
+  if (index !== -1) {
+    evaluationList.value.splice(index, 1)
+    showSuccessToast('删除成功')
+  }
+  showDeleteDialog.value = false
+  currentDeleteId.value = null
+}
+
+/**
+ * 取消删除操作
+ */
+const cancelDelete = () => {
+  showDeleteDialog.value = false
+  currentDeleteId.value = null
+  console.log('用户取消删除操作')
+}
+
+/**
  * 组件挂载时初始化数据
  */
 const checkinDataList = ref([]);
@@ -863,7 +924,7 @@ const onLoad = async (date) => {
   const nextPage = page.value;
   const current_date = date || route.query.date || dayjs().format('YYYY-MM-DD');
   //
-  const res = await getUploadTaskListAPI({
+  const res = await getCheckinTeacherListAPI({
     limit: limit.value,
     page: nextPage,
     task_id: route.query.id,
@@ -932,7 +993,7 @@ const formatData = (data) => {
 }
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .van-back-top {
   background-color: #4caf50;
 }