Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
54ed8a14 1 parent 602ae2b2

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

- 在班级页面添加点击学生跳转至详情页功能
- 在签到页面添加作业点评弹窗及相关逻辑
- 调整日历组件高度和显示文本
- 优化图标大小和间距
Inline Side-by-side
Showing 2 changed files with 142 additions and 12 deletions
<!--
* @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">
<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="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 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>
......
......@@ -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="chat-o" size="20" color="#10b981" class="mr-1" />
<van-icon name="comment-circle-o" size="20" color="#10b981" />
<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;
<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,
})
}
/**
......