194 lines
7.5 KiB
Vue
194 lines
7.5 KiB
Vue
<template>
|
|
<div class="px-[30px] py-5 user-info min-h-full flex flex-col">
|
|
<div class="border-b border-br pb-5">
|
|
<span class="text-2xl font-medium">新生报名</span>
|
|
</div>
|
|
<el-card class="!border-none mb-4" shadow="never">
|
|
<div class="lg:flex gap-6">
|
|
<!-- 基本信息表单 -->
|
|
<el-card class="!border-none flex-1" shadow="never">
|
|
<el-form
|
|
layout="vertical"
|
|
:model="studentData.baseInfo"
|
|
class="mt-4"
|
|
>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<el-form-item label="学生姓名">
|
|
<el-input
|
|
v-model="studentData.baseInfo.name"
|
|
placeholder="请输入姓名"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="性别">
|
|
<el-radio-group
|
|
v-model="studentData.baseInfo.gender"
|
|
>
|
|
<el-radio label="male">男</el-radio>
|
|
<el-radio label="female">女</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="身份证号">
|
|
<el-input
|
|
v-model="studentData.baseInfo.idCard"
|
|
placeholder="请输入18位身份证号"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="联系方式">
|
|
<el-input
|
|
v-model="studentData.baseInfo.phone"
|
|
placeholder="请输入手机号码"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="家庭住址"
|
|
class="md:col-span-2"
|
|
>
|
|
<el-input
|
|
v-model="studentData.baseInfo.address"
|
|
placeholder="请输入详细家庭住址"
|
|
type="textarea"
|
|
rows="3"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="紧急联系人">
|
|
<el-input
|
|
v-model="
|
|
studentData.baseInfo.emergencyContact
|
|
"
|
|
placeholder="请输入紧急联系人姓名"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="紧急联系电话">
|
|
<el-input
|
|
v-model="
|
|
studentData.baseInfo.emergencyPhone
|
|
"
|
|
placeholder="请输入紧急联系人电话"
|
|
/>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form>
|
|
</el-card>
|
|
</div>
|
|
</el-card>
|
|
<!-- 注册状态信息 -->
|
|
<el-card class="!border-none mb-4 flex-1" shadow="never">
|
|
<template #header>
|
|
<span>注册状态</span>
|
|
</template>
|
|
<div class="status-info mt-4">
|
|
<div class="mb-6">
|
|
<div class="text-tx-secondary text-sm mb-2">当前状态</div>
|
|
<el-tag :type="statusConfig.type">{{
|
|
statusConfig.label
|
|
}}</el-tag>
|
|
</div>
|
|
<div class="mb-6">
|
|
<div class="text-tx-secondary text-sm mb-2">状态进度</div>
|
|
<el-progress
|
|
:percentage="statusConfig.progress"
|
|
:stroke-width="6"
|
|
/>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center">
|
|
<el-checkbox
|
|
v-model="statusConfig.steps[0].completed"
|
|
disabled
|
|
>
|
|
已报名
|
|
</el-checkbox>
|
|
<span> {{ statusConfig.steps[0].time }} </span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<el-checkbox
|
|
v-model="statusConfig.steps[1].completed"
|
|
disabled
|
|
>
|
|
材料审核
|
|
</el-checkbox>
|
|
<span>
|
|
{{ statusConfig.steps[1].time || '待完成' }}
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<el-checkbox
|
|
v-model="statusConfig.steps[2].completed"
|
|
disabled
|
|
>
|
|
已录取
|
|
</el-checkbox>
|
|
<span>
|
|
{{ statusConfig.steps[2].time || '待完成' }}
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<el-checkbox
|
|
v-model="statusConfig.steps[3].completed"
|
|
disabled
|
|
>
|
|
已入学
|
|
</el-checkbox>
|
|
<span>
|
|
{{ statusConfig.steps[3].time || '待完成' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6">
|
|
<el-button type="primary" block>保存信息</el-button>
|
|
<el-button type="default" block class="mt-2"
|
|
>提交审核</el-button
|
|
>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { reactive } from 'vue'
|
|
import { ElButton } from 'element-plus'
|
|
|
|
definePageMeta({
|
|
module: 'personal',
|
|
auth: true
|
|
})
|
|
|
|
// 学生信息数据
|
|
const studentData = reactive({
|
|
baseInfo: {
|
|
name: '',
|
|
gender: 'male',
|
|
idCard: '',
|
|
phone: '',
|
|
address: '',
|
|
emergencyContact: '',
|
|
emergencyPhone: ''
|
|
},
|
|
additionalInfo: {
|
|
enrollYear: '',
|
|
major: '',
|
|
education: ''
|
|
}
|
|
})
|
|
|
|
// 状态配置
|
|
type TagType = '' | 'info' | 'success' | 'warning' | 'danger'
|
|
const statusConfig = reactive<{
|
|
label: string
|
|
type: TagType
|
|
progress: number
|
|
steps: { completed: boolean; time: string }[]
|
|
}>({
|
|
label: '已报名',
|
|
type: 'info',
|
|
progress: 25,
|
|
steps: [
|
|
{ completed: true, time: '2024-03-15' },
|
|
{ completed: false, time: '' },
|
|
{ completed: false, time: '' },
|
|
{ completed: false, time: '' }
|
|
]
|
|
})
|
|
</script>
|
|
<style lang="scss" scoped></style>
|