hookehuyr

feat(teacher): 添加班主任点评列表功能并优化学生记录样式

- 新增班主任点评列表展示功能,包含日期、内容和评分
- 优化学生记录卡片样式,改进日期时间显示和状态图标
- 添加相关数据结构和加载逻辑
......@@ -120,27 +120,60 @@
<van-list v-show="activeTab === 'statistics'" v-model:loading="recordLoading" :finished="recordFinished"
finished-text="没有更多了" @load="onRecordLoad" class="px-4">
<div v-for="record in filteredRecords" :key="record.id"
class="flex items-center justify-between py-4 border-b border-gray-100 last:border-b-0 bg-white px-4">
<div class="flex items-center flex-1">
<div class="mr-4">
<div style="display: flex; justify-content: center;">
<van-icon name="calendar-o" size="18" color="#6b7280" class="mb-1" /> &nbsp;
<span class="text-sm text-gray-500">{{ record.date }}</span>
class="bg-white rounded-lg shadow-sm p-4 mb-3 border border-gray-100">
<!-- 左右布局:左侧日期时间,右侧状态 -->
<div class="flex items-center justify-between">
<!-- 左侧:日期时间 -->
<div class="flex flex-col">
<div class="flex items-center mb-1">
<van-icon name="calendar-o" size="16" color="#10b981" class="mr-2" />
<span class="text-sm text-gray-600">{{ record.date }}</span>
</div>
<div style="display: flex; ">
<van-icon name="clock-o" size="18" color="#6b7280" class="mb-1" /> &nbsp;
<span class="text-sm text-gray-500">{{ record.time }}</span>
<div class="flex items-center">
<van-icon name="clock-o" size="16" color="#3b82f6" class="mr-2" />
<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>
<span v-else-if="record.status === '迟到'" class="text-orange-500 text-sm mr-2">{{ record.status }}</span>
<span v-else class="text-red-500 text-sm mr-2">{{ record.status }}</span>
<van-icon v-if="record.status === '正常'" name="passed" color="#10b981" size="16" />
<van-icon v-else-if="record.status === '迟到'" name="warning-o" color="#f59e0b" size="16" />
<van-icon v-else name="close" color="#ef4444" size="16" />
</div>
</div>
<div class="flex items-center">
<span v-if="record.status === '正常'" class="text-green-600 text-sm mr-2">{{ record.status }}</span>
<span v-else-if="record.status === '迟到'" class="text-orange-500 text-sm mr-2">{{ record.status }}</span>
<span v-else class="text-red-500 text-sm mr-2">{{ record.status }}</span>
</div>
</van-list>
<van-icon v-if="record.status === '正常'" name="passed" color="#10b981" size="16" />
<van-icon v-else-if="record.status === '迟到'" name="warning-o" color="#f59e0b" size="16" />
<van-icon v-else name="close" color="#ef4444" size="16" />
<!-- 班主任点评列表 -->
<van-list v-show="activeTab === 'evaluation'" v-model:loading="evaluationLoading" :finished="evaluationFinished"
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">
<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" />
<div class="flex-1">
<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" />
<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>
......@@ -358,6 +391,44 @@ const records = ref([
const recordLoading = ref(false)
const recordFinished = ref(false)
// 班主任点评列表数据
const evaluationList = ref([
{
id: 1,
date: '2023-11-20 14:30',
content: '李华同学在本周的学习中表现优秀,课堂参与度很高,作业完成质量也很好。希望继续保持这种学习态度,在数学方面可以多加练习。',
score: 4
},
{
id: 2,
date: '2023-11-15 16:45',
content: '本周李华在语文课上积极发言,写作能力有明显提升。但需要注意课堂纪律,不要和同桌说话。总体表现良好。',
score: 4
},
{
id: 3,
date: '2023-11-10 15:20',
content: '李华同学这周在英语学习上进步很大,单词记忆和口语表达都有提升。建议多读英语文章,培养语感。',
score: 5
},
{
id: 4,
date: '2023-11-05 17:10',
content: '本周表现一般,上课有时会走神,作业完成情况还可以。希望能够更加专注学习,提高课堂效率。',
score: 3
},
{
id: 5,
date: '2023-10-30 14:50',
content: '李华同学在体育课上表现积极,团队合作意识强。学习方面需要加强时间管理,合理安排各科学习时间。',
score: 4
}
])
// 班主任点评列表加载状态
const evaluationLoading = ref(false)
const evaluationFinished = ref(false)
/**
* 过滤后的记录列表
*/
......@@ -402,6 +473,16 @@ const onRecordLoad = () => {
}
/**
* 加载更多班主任点评数据
*/
const onEvaluationLoad = () => {
setTimeout(() => {
evaluationLoading.value = false
evaluationFinished.value = true
}, 1000)
}
/**
* 组件挂载时初始化数据
*/
const checkinDataList = ref([]);
......