221 lines
6.8 KiB
Vue
221 lines
6.8 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { computed, onMounted, ref } from 'vue'
|
|||
|
|
import { useHomeStore } from '@/store/home'
|
|||
|
|
|
|||
|
|
const homeStore = useHomeStore()
|
|||
|
|
|
|||
|
|
// 获取学生ID参数
|
|||
|
|
const studentId = ref('')
|
|||
|
|
|
|||
|
|
// 选中的科目ID，0表示全科
|
|||
|
|
const selectedSubjectId = ref(0)
|
|||
|
|
|
|||
|
|
// 学生基本信息
|
|||
|
|
const studentInfo = ref({
|
|||
|
|
name: '李星云',
|
|||
|
|
totalScore: 570,
|
|||
|
|
classRank: 122,
|
|||
|
|
classTotal: 234,
|
|||
|
|
gradeRank: 11,
|
|||
|
|
gradeTotal: 22,
|
|||
|
|
gradeAverage: 470,
|
|||
|
|
classAverage: 510,
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 科目选项（包含全科）
|
|||
|
|
const subjectTabs = computed(() => {
|
|||
|
|
const tabs = [
|
|||
|
|
{ name: 'all', title: '全科', subjectId: 0 },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
homeStore.subjectOptions.forEach((subject) => {
|
|||
|
|
tabs.push({
|
|||
|
|
name: `subject-${subject.value}`,
|
|||
|
|
title: subject.label,
|
|||
|
|
subjectId: subject.value,
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
return tabs
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 当前选中的科目标签
|
|||
|
|
const activeTab = computed({
|
|||
|
|
get: () => selectedSubjectId.value === 0 ? 'all' : `subject-${selectedSubjectId.value}`,
|
|||
|
|
set: (value) => {
|
|||
|
|
if (value === 'all') {
|
|||
|
|
selectedSubjectId.value = 0
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
const subjectId = Number.parseInt(value.replace('subject-', ''))
|
|||
|
|
selectedSubjectId.value = subjectId
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 返回上一页
|
|||
|
|
function goBack() {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 科目切换处理
|
|||
|
|
function handleTabClick({ name }: { name: string }) {
|
|||
|
|
activeTab.value = name
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 页面初始化
|
|||
|
|
onMounted(async () => {
|
|||
|
|
// 获取页面参数
|
|||
|
|
const pages = getCurrentPages()
|
|||
|
|
const currentPage = pages[pages.length - 1]
|
|||
|
|
const options = (currentPage as any).options || {}
|
|||
|
|
studentId.value = options.id || ''
|
|||
|
|
|
|||
|
|
// 如果store中没有数据，先获取选项数据
|
|||
|
|
if (homeStore.examOptions.length === 0) {
|
|||
|
|
await homeStore.fetchOptions()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// TODO: 根据studentId获取学生详情数据
|
|||
|
|
console.log('学生ID:', studentId.value)
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<view class="min-h-screen bg-gray-50">
|
|||
|
|
<!-- 导航栏 -->
|
|||
|
|
<wd-navbar placeholder fixed>
|
|||
|
|
<template #left>
|
|||
|
|
<view class="flex items-center" @click="goBack">
|
|||
|
|
<wd-icon name="arrow-left" size="20px" />
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<template #title>
|
|||
|
|
<text class="text-lg font-semibold">{{ studentInfo.name }}成绩报告</text>
|
|||
|
|
</template>
|
|||
|
|
</wd-navbar>
|
|||
|
|
|
|||
|
|
<!-- 科目选择标签栏 -->
|
|||
|
|
<wd-tabs
|
|||
|
|
v-model="activeTab"
|
|||
|
|
sticky
|
|||
|
|
class="bg-white"
|
|||
|
|
@click="handleTabClick"
|
|||
|
|
>
|
|||
|
|
<wd-tab
|
|||
|
|
v-for="tab in subjectTabs"
|
|||
|
|
:key="tab.name"
|
|||
|
|
:name="tab.name"
|
|||
|
|
:title="tab.title"
|
|||
|
|
/>
|
|||
|
|
</wd-tabs>
|
|||
|
|
|
|||
|
|
<!-- 主要内容区域 -->
|
|||
|
|
<view class="p-4 space-y-4">
|
|||
|
|
<!-- 个人成绩卡片 -->
|
|||
|
|
<view class="rounded-xl bg-white p-4 shadow-sm">
|
|||
|
|
<!-- 学生姓名和总分 -->
|
|||
|
|
<view class="mb-4 flex items-center justify-between">
|
|||
|
|
<view class="rounded-full bg-blue-100 px-3 py-1">
|
|||
|
|
<text class="text-sm text-blue-600 font-medium">{{ studentInfo.name }}</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="text-2xl text-orange-500 font-bold">{{ studentInfo.totalScore }}分</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 成绩统计网格 - 2行2列 -->
|
|||
|
|
<view class="grid grid-cols-2 gap-3">
|
|||
|
|
<!-- 年级排名 -->
|
|||
|
|
<view class="rounded-lg bg-orange-50 p-3">
|
|||
|
|
<view class="mb-1 flex items-center justify-between">
|
|||
|
|
<text class="text-2xl text-gray-800 font-bold">{{ studentInfo.classRank }}</text>
|
|||
|
|
<text class="text-xs text-gray-500">/{{ studentInfo.classTotal }}</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="text-sm text-gray-600">年级排名</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 班级排名 -->
|
|||
|
|
<view class="rounded-lg bg-orange-50 p-3">
|
|||
|
|
<view class="mb-1 flex items-center justify-between">
|
|||
|
|
<text class="text-2xl text-gray-800 font-bold">{{ studentInfo.gradeRank }}</text>
|
|||
|
|
<text class="text-xs text-gray-500">/{{ studentInfo.gradeTotal }}</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="text-sm text-gray-600">班级排名</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 年级平均分 -->
|
|||
|
|
<view class="flex flex-col rounded-lg bg-orange-50 p-3">
|
|||
|
|
<text class="text-2xl text-gray-800 font-bold">{{ studentInfo.gradeAverage }}</text>
|
|||
|
|
<text class="text-sm text-gray-600">年级平均分</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 班级平均分 -->
|
|||
|
|
<view class="flex flex-col rounded-lg bg-blue-50 p-3">
|
|||
|
|
<text class="text-2xl text-gray-800 font-bold">{{ studentInfo.classAverage }}</text>
|
|||
|
|
<text class="text-sm text-gray-600">班级平均分</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 成绩分布图 -->
|
|||
|
|
<view class="rounded-xl bg-white p-4 shadow-sm">
|
|||
|
|
<view class="mb-4 flex items-center justify-between">
|
|||
|
|
<text class="text-lg text-gray-800 font-semibold">成绩分布图</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- TODO: 实现成绩分布图表 -->
|
|||
|
|
<view class="h-48 flex items-center justify-center rounded-lg bg-gray-50">
|
|||
|
|
<text class="text-gray-500">成绩分布图表（待实现）</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 全科专属内容 -->
|
|||
|
|
<template v-if="selectedSubjectId === 0">
|
|||
|
|
<!-- 优劣势分析 -->
|
|||
|
|
<view class="rounded-xl bg-white p-4 shadow-sm">
|
|||
|
|
<view class="mb-4 flex items-center justify-between">
|
|||
|
|
<text class="text-lg text-gray-800 font-semibold">优劣势分析</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- TODO: 实现优劣势分析内容 -->
|
|||
|
|
<view class="space-y-3">
|
|||
|
|
<view class="rounded-lg bg-green-50 p-3">
|
|||
|
|
<text class="text-sm text-green-600 font-medium">优势学科</text>
|
|||
|
|
<view class="mt-2">
|
|||
|
|
<text class="text-gray-600">数学、物理等学科表现优秀...</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="rounded-lg bg-red-50 p-3">
|
|||
|
|
<text class="text-sm text-red-600 font-medium">待提升学科</text>
|
|||
|
|
<view class="mt-2">
|
|||
|
|
<text class="text-gray-600">语文、英语等学科有提升空间...</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 均分对比 -->
|
|||
|
|
<view class="rounded-xl bg-white p-4 shadow-sm">
|
|||
|
|
<view class="mb-4 flex items-center justify-between">
|
|||
|
|
<text class="text-lg text-gray-800 font-semibold">各科均分对比</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- TODO: 实现各科均分对比图表 -->
|
|||
|
|
<view class="h-48 flex items-center justify-center rounded-lg bg-gray-50">
|
|||
|
|
<text class="text-gray-500">各科均分对比图表（待实现）</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<route lang="jsonc">
|
|||
|
|
{
|
|||
|
|
"style": {
|
|||
|
|
"navigationStyle": "custom",
|
|||
|
|
"navigationBarTitleText": "学生详情"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</route>
|