SYN/pc/pages/user/enrollment.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 @click="handleSave"
                    >保存信息</el-button
                >
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { ElButton } from 'element-plus'
import {
    getStudentBaseInfo,
    updateStudentBaseInfo,
    getEnrollmentProcessStatus
} from '@/api/enrollment'

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',
    get progress() {
        const completedCount = this.steps.filter(
            (step: { completed: any }) => step.completed
        ).length
        return (completedCount / this.steps.length) * 100
    },
    steps: [
        { completed: false, time: '' },
        { completed: false, time: '' },
        { completed: false, time: '' },
        { completed: false, time: '' }
    ]
})

const handleSave = async () => {
    try {
        // 调用更新API，传入表单数据（studentData.baseInfo）
        const res = await updateStudentBaseInfo(studentData.baseInfo)
        // 接口返回成功时提示
        if (res.data.success) {
            ElMessage.success(res.data.message || '信息保存成功')
        } else {
            ElMessage.warning(res.data.message || '保存失败，请检查数据')
        }
    } catch (error) {
        // 处理提交失败（如网络错误）
        ElMessage.error('保存失败，请稍后重试')
        console.error('更新信息失败：', error)
    }
}

onMounted(async () => {
    try {
        // 1. 获取学生基本信息并赋值
        const studentInfoRes = await getStudentBaseInfo()
        Object.assign(studentData.baseInfo, studentInfoRes.data)
        // 2. 获取报名流程状态并赋值
        const statusRes = await getEnrollmentProcessStatus()
        // 将接口返回的状态合并到statusConfig
        Object.assign(statusConfig, statusRes.data)
    } catch (error) {
        // 处理接口调用失败（如网络错误、后端异常）
        ElMessage.error('数据加载失败，请稍后重试')
        console.error('获取初始数据失败：', error)
    }
})
</script>
<style lang="scss" scoped></style>