Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6570b51f 1 parent f616ebe8

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

实现作业点评弹窗，包含评分和点评内容输入
支持已有点评的编辑和展示
添加点评状态标识和样式优化
Inline Side-by-side
Showing 1 changed file with 172 additions and 11 deletions
......@@ -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
v-for="course in studentInfo.courses"
:key="course"
<van-tag 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'"
size="large"
@click="toggleCourseSelection(course)"
class="cursor-pointer transition-all duration-200 hover:opacity-80"
>
:text-color="selectedCourses.includes(course) ? '#ffffff' : '#666666'" size="large"
@click="toggleCourseSelection(course)" class="cursor-pointer transition-all duration-200 hover:opacity-80">
{{ course }}
</van-tag>
</div>
......@@ -242,9 +237,25 @@
}" @play="(player) => handleAudioPlay(player, post)" />
</div>
</div>
<div class="post-footer">
<div class="post-footer flex items-center justify-between">
<!-- 左侧：点赞 -->
<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">{{ post.likes }}</span>
<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>
......