534 lines
17 KiB
Vue
534 lines
17 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* 首页组件
|
||
* 成绩查询入口页面，包含身份证输入和查询功能
|
||
*/
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { queryScoreByIdCard, getExamBatchList } from '@/api/score'
|
||
import Toast from '@/components/common/Toast.vue'
|
||
import PuzzleCaptcha from '@/components/common/PuzzleCaptcha.vue'
|
||
import type { ExamBatch } from '@/types'
|
||
|
||
// 路由实例
|
||
const router = useRouter()
|
||
|
||
// 响应式状态
|
||
/** 考试批次列表 */
|
||
const examBatchList = ref<ExamBatch[]>([])
|
||
/** 选中的考试批次ID */
|
||
const selectedBatchId = ref('')
|
||
/** 是否正在加载批次列表 */
|
||
const isBatchLoading = ref(false)
|
||
/** 下拉框是否展开 */
|
||
const isDropdownOpen = ref(false)
|
||
/** 身份证号输入值 */
|
||
const idCard = ref('')
|
||
/** 学生姓名输入值 */
|
||
const studentName = ref('')
|
||
/** 是否正在加载 */
|
||
const isLoading = ref(false)
|
||
/** 输入框是否获得焦点 */
|
||
const isFocused = ref(false)
|
||
const isNameFocused = ref(false)
|
||
/** 验证错误信息 */
|
||
const errorMessage = ref('')
|
||
/** Toast 显示状态 */
|
||
const showToast = ref(false)
|
||
/** Toast 消息 */
|
||
const toastMessage = ref('')
|
||
/** Toast 类型 */
|
||
const toastType = ref<'info' | 'success' | 'warning' | 'error'>('error')
|
||
/** 是否显示验证码 */
|
||
const showCaptcha = ref(false)
|
||
|
||
/**
|
||
* 获取选中的批次名称
|
||
*/
|
||
const selectedBatchName = computed(() => {
|
||
const batch = examBatchList.value.find(b => b.id === selectedBatchId.value)
|
||
return batch?.name || '请选择考试批次'
|
||
})
|
||
|
||
/**
|
||
* 页面加载时获取考试批次列表
|
||
*/
|
||
onMounted(async () => {
|
||
await loadExamBatchList()
|
||
})
|
||
|
||
/**
|
||
* 加载考试批次列表
|
||
*/
|
||
const loadExamBatchList = async () => {
|
||
isBatchLoading.value = true
|
||
try {
|
||
const response = await getExamBatchList()
|
||
if (response.code === 200 && response.data?.rows) {
|
||
examBatchList.value = response.data.rows
|
||
// 默认选中第一个批次
|
||
if (response.data.rows.length > 0) {
|
||
selectedBatchId.value = response.data.rows[0].id
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to load exam batch list:', error)
|
||
showMessage('加载考试批次失败', 'error')
|
||
} finally {
|
||
isBatchLoading.value = false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 选择考试批次
|
||
*/
|
||
const selectBatch = (batch: ExamBatch) => {
|
||
selectedBatchId.value = batch.id
|
||
isDropdownOpen.value = false
|
||
}
|
||
|
||
/**
|
||
* 切换下拉框展开状态
|
||
*/
|
||
const toggleDropdown = () => {
|
||
if (!isBatchLoading.value && examBatchList.value.length > 0) {
|
||
isDropdownOpen.value = !isDropdownOpen.value
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 点击外部关闭下拉框
|
||
*/
|
||
const closeDropdown = () => {
|
||
isDropdownOpen.value = false
|
||
}
|
||
|
||
/**
|
||
* 按钮是否可点击
|
||
*/
|
||
const isButtonDisabled = computed(() => {
|
||
return isLoading.value ||
|
||
idCard.value.trim().length === 0 ||
|
||
studentName.value.trim().length === 0 ||
|
||
!selectedBatchId.value
|
||
})
|
||
|
||
/**
|
||
* 身份证输入框样式类
|
||
*/
|
||
const inputClasses = computed(() => {
|
||
const base = 'input-field'
|
||
if (errorMessage.value && !idCard.value.trim()) {
|
||
return `${base} border-red-400 focus:border-red-400 focus:ring-red-100`
|
||
}
|
||
if (isFocused.value) {
|
||
return `${base} border-primary-400`
|
||
}
|
||
return base
|
||
})
|
||
|
||
/**
|
||
* 姓名输入框样式类
|
||
*/
|
||
const nameInputClasses = computed(() => {
|
||
const base = 'input-field'
|
||
if (errorMessage.value && !studentName.value.trim()) {
|
||
return `${base} border-red-400 focus:border-red-400 focus:ring-red-100`
|
||
}
|
||
if (isNameFocused.value) {
|
||
return `${base} border-primary-400`
|
||
}
|
||
return base
|
||
})
|
||
|
||
/**
|
||
* 处理输入变化
|
||
* 清除之前的错误提示，限制输入长度
|
||
*/
|
||
const handleInput = (event: Event) => {
|
||
const target = event.target as HTMLInputElement
|
||
// 只允许数字和X
|
||
const value = target.value.replace(/[^0-9xX]/g, '').toUpperCase()
|
||
// 限制长度为18位
|
||
idCard.value = value.slice(0, 18)
|
||
// 清除错误信息
|
||
if (errorMessage.value) {
|
||
errorMessage.value = ''
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 显示 Toast 提示
|
||
*/
|
||
const showMessage = (message: string, type: 'info' | 'success' | 'warning' | 'error' = 'error') => {
|
||
toastMessage.value = message
|
||
toastType.value = type
|
||
showToast.value = true
|
||
}
|
||
|
||
/**
|
||
* 处理查询点击
|
||
*/
|
||
const handleQueryClick = () => {
|
||
// 检查考试批次
|
||
if (!selectedBatchId.value) {
|
||
errorMessage.value = '请选择考试批次'
|
||
showMessage(errorMessage.value, 'warning')
|
||
return
|
||
}
|
||
|
||
// 简单非空检查
|
||
if (!studentName.value.trim()) {
|
||
errorMessage.value = '请输入学生姓名'
|
||
showMessage(errorMessage.value, 'warning')
|
||
return
|
||
}
|
||
|
||
if (!idCard.value.trim()) {
|
||
errorMessage.value = '请输入身份证号码'
|
||
showMessage(errorMessage.value, 'warning')
|
||
return
|
||
}
|
||
|
||
// 显示验证码
|
||
showCaptcha.value = true
|
||
}
|
||
|
||
/**
|
||
* 验证成功后执行查询
|
||
*/
|
||
const handleCaptchaSuccess = async () => {
|
||
// 开始加载
|
||
isLoading.value = true
|
||
errorMessage.value = ''
|
||
|
||
try {
|
||
// 使用选中的考试批次ID进行查询
|
||
const response = await queryScoreByIdCard(idCard.value, studentName.value, selectedBatchId.value)
|
||
|
||
if (response.code === 200 && response.data) {
|
||
// 查询成功，存储数据并跳转
|
||
sessionStorage.setItem('scoreResult', JSON.stringify(response.data))
|
||
router.push({
|
||
name: 'Result',
|
||
query: { id: idCard.value.slice(-4) },
|
||
})
|
||
} else {
|
||
// 查询失败
|
||
errorMessage.value = response.message || '查询失败，请稍后重试'
|
||
showMessage(errorMessage.value, 'error')
|
||
}
|
||
} catch (error) {
|
||
// 网络或其他错误
|
||
errorMessage.value = '网络错误，请检查网络连接后重试'
|
||
showMessage(errorMessage.value, 'error')
|
||
console.error('Query error:', error)
|
||
} finally {
|
||
isLoading.value = false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 处理键盘回车事件
|
||
*/
|
||
const handleKeyPress = (event: KeyboardEvent) => {
|
||
if (event.key === 'Enter' && !isButtonDisabled.value) {
|
||
handleQueryClick()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page-container safe-area-inset-bottom">
|
||
<!-- 验证码弹窗 -->
|
||
<PuzzleCaptcha
|
||
v-model:visible="showCaptcha"
|
||
@success="handleCaptchaSuccess"
|
||
/>
|
||
|
||
<!-- 页面头部 -->
|
||
<header class="text-center mb-8 pt-8">
|
||
<!-- 学校标识 -->
|
||
<div class="w-20 h-20 mx-auto mb-4 rounded-2xl bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center shadow-lg shadow-primary-200">
|
||
<svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<!-- 标题 -->
|
||
<h1 class="text-2xl font-bold text-slate-800 mb-2">
|
||
德艺中学
|
||
</h1>
|
||
<p class="text-slate-500">
|
||
期末考试成绩查询
|
||
</p>
|
||
</header>
|
||
|
||
<!-- 查询表单卡片 -->
|
||
<div class="card">
|
||
<!-- 考试批次选择 -->
|
||
<div class="mb-5">
|
||
<label class="block text-sm font-medium text-slate-700 mb-2">
|
||
考试批次
|
||
</label>
|
||
<div class="relative" @click.stop>
|
||
<!-- 下拉按钮 -->
|
||
<button
|
||
type="button"
|
||
class="input-field w-full flex items-center justify-between cursor-pointer"
|
||
:class="{ 'border-primary-400 ring-2 ring-primary-100': isDropdownOpen }"
|
||
@click="toggleDropdown"
|
||
>
|
||
<span :class="selectedBatchId ? 'text-slate-800' : 'text-slate-400'">
|
||
<template v-if="isBatchLoading">
|
||
<span class="flex items-center gap-2">
|
||
<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
||
</svg>
|
||
加载中...
|
||
</span>
|
||
</template>
|
||
<template v-else-if="examBatchList.length === 0">
|
||
暂无考试批次
|
||
</template>
|
||
<template v-else>
|
||
{{ selectedBatchName }}
|
||
</template>
|
||
</span>
|
||
<!-- 下拉箭头 -->
|
||
<svg
|
||
class="w-5 h-5 text-slate-400 transition-transform duration-200"
|
||
:class="{ 'rotate-180': isDropdownOpen }"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||
</svg>
|
||
</button>
|
||
|
||
<!-- 下拉列表 -->
|
||
<Transition name="dropdown">
|
||
<div
|
||
v-if="isDropdownOpen"
|
||
class="absolute z-20 mt-1 w-full bg-white border border-slate-200 rounded-xl shadow-lg overflow-hidden"
|
||
>
|
||
<div class="max-h-60 overflow-y-auto scrollbar-thin">
|
||
<button
|
||
v-for="batch in examBatchList"
|
||
:key="batch.id"
|
||
type="button"
|
||
class="w-full px-4 py-3 text-left text-sm transition-colors cursor-pointer
|
||
hover:bg-primary-50 active:bg-primary-100"
|
||
:class="batch.id === selectedBatchId
|
||
? 'bg-primary-50 text-primary-600 font-medium'
|
||
: 'text-slate-700'"
|
||
@click="selectBatch(batch)"
|
||
>
|
||
<div class="flex items-center justify-between">
|
||
<span class="line-clamp-2">{{ batch.name }}</span>
|
||
<!-- 选中标记 -->
|
||
<svg
|
||
v-if="batch.id === selectedBatchId"
|
||
class="w-5 h-5 text-primary-500 flex-shrink-0 ml-2"
|
||
fill="currentColor"
|
||
viewBox="0 0 20 20"
|
||
>
|
||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||
</svg>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
|
||
<!-- 点击外部关闭遮罩 -->
|
||
<div
|
||
v-if="isDropdownOpen"
|
||
class="fixed inset-0 z-10"
|
||
@click="closeDropdown"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-5">
|
||
<label class="block text-sm font-medium text-slate-700 mb-2">
|
||
学生姓名
|
||
</label>
|
||
<div class="relative">
|
||
<input
|
||
v-model="studentName"
|
||
:class="nameInputClasses"
|
||
type="text"
|
||
placeholder="请输入学生姓名"
|
||
maxlength="20"
|
||
autocomplete="off"
|
||
@focus="isNameFocused = true"
|
||
@blur="isNameFocused = false"
|
||
@keypress="handleKeyPress"
|
||
/>
|
||
<button
|
||
v-if="studentName.length > 0 && !isLoading"
|
||
class="absolute right-3 top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-slate-200 flex items-center justify-center transition-colors active:bg-slate-300"
|
||
@click="studentName = ''; errorMessage = ''"
|
||
>
|
||
<svg class="w-3.5 h-3.5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-5">
|
||
<label class="block text-sm font-medium text-slate-700 mb-2">
|
||
身份证号码
|
||
</label>
|
||
<!-- 输入框 -->
|
||
<div class="relative">
|
||
<input
|
||
:value="idCard"
|
||
:class="inputClasses"
|
||
type="text"
|
||
inputmode="numeric"
|
||
placeholder="请输入学生身份证号码"
|
||
maxlength="18"
|
||
autocomplete="off"
|
||
@input="handleInput"
|
||
@focus="isFocused = true"
|
||
@blur="isFocused = false"
|
||
@keypress="handleKeyPress"
|
||
/>
|
||
<!-- 清除按钮 -->
|
||
<button
|
||
v-if="idCard.length > 0 && !isLoading"
|
||
class="absolute right-3 top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-slate-200 flex items-center justify-center transition-colors active:bg-slate-300"
|
||
@click="idCard = ''; errorMessage = ''"
|
||
>
|
||
<svg class="w-3.5 h-3.5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<!-- 错误提示 -->
|
||
<p v-if="errorMessage" class="mt-2 text-sm text-red-500 flex items-center gap-1">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
{{ errorMessage }}
|
||
</p>
|
||
<!-- 输入提示 -->
|
||
<p v-else class="mt-2 text-xs text-slate-400">
|
||
请输入18位身份证号码进行查询
|
||
</p>
|
||
</div>
|
||
|
||
<!-- 查询按钮 -->
|
||
<button
|
||
:class="['btn-primary', { 'opacity-60': isButtonDisabled }]"
|
||
:disabled="isButtonDisabled"
|
||
@click="handleQueryClick"
|
||
>
|
||
<span v-if="isLoading" class="flex items-center justify-center gap-2">
|
||
<svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
|
||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||
</svg>
|
||
查询中...
|
||
</span>
|
||
<span v-else>查询成绩</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 使用说明 -->
|
||
<div class="mt-6 px-2">
|
||
<h3 class="text-sm font-medium text-slate-700 mb-3">
|
||
温馨提示
|
||
</h3>
|
||
<ul class="space-y-2 text-sm text-slate-500">
|
||
<li class="flex items-start gap-2">
|
||
<svg class="w-4 h-4 mt-0.5 text-primary-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||
</svg>
|
||
<span>请使用学生本人身份证号进行查询</span>
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<svg class="w-4 h-4 mt-0.5 text-primary-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||
</svg>
|
||
<span>成绩仅供参考，如有疑问请联系班主任</span>
|
||
</li>
|
||
<li class="flex items-start gap-2">
|
||
<svg class="w-4 h-4 mt-0.5 text-primary-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
|
||
</svg>
|
||
<span>请妥善保管个人信息，避免泄露</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 底部版权信息 -->
|
||
<footer class="mt-auto pt-8 pb-4 text-center">
|
||
<p class="text-xs text-slate-400">
|
||
© 2025 德艺中学 版权所有
|
||
</p>
|
||
</footer>
|
||
|
||
<!-- Toast 提示 -->
|
||
<Toast
|
||
v-model:visible="showToast"
|
||
:message="toastMessage"
|
||
:type="toastType"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 下拉动画 */
|
||
.dropdown-enter-active,
|
||
.dropdown-leave-active {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.dropdown-enter-from,
|
||
.dropdown-leave-to {
|
||
opacity: 0;
|
||
transform: translateY(-8px);
|
||
}
|
||
|
||
/* 多行文本截断 */
|
||
.line-clamp-2 {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 自定义滚动条样式 */
|
||
.scrollbar-thin {
|
||
scrollbar-width: thin;
|
||
scrollbar-color: #cbd5e1 transparent;
|
||
}
|
||
|
||
.scrollbar-thin::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.scrollbar-thin::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||
background-color: #cbd5e1;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
||
background-color: #94a3b8;
|
||
}
|
||
</style>
|