完善前台

pc/api/enrollment.ts

@@ -0,0 +1,71 @@
+/**
+ * @description 获取学生基本信息
+ * @return { Promise } 包含学生基本信息的响应
+ */
+export function getStudentBaseInfo() {
+    // 模拟后端数据
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve({
+                data: {
+                    name: '张三',
+                    gender: 'male',
+                    idCard: '110101201001011234',
+                    phone: '13800138000',
+                    address: '北京市海淀区XX街道XX小区',
+                    emergencyContact: '李四',
+                    emergencyPhone: '13900139000'
+                }
+            })
+        }, 500) // 模拟网络延迟
+    })
+    // 真实接口（后端恢复后启用）
+    // return $request.get({ url: '/enrollment/studentInfo', params })
+}
+
+/**
+ * @description 更新学生基本信息（对应"保存信息"按钮）
+ * @param {Object} params - 学生基本信息对象
+ * @return { Promise } 更新结果
+ */
+export function updateStudentBaseInfo(params: any) {
+    // 模拟后端数据
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve({
+                data: {
+                    success: true,
+                    message: '信息保存成功'
+                }
+            })
+        }, 500)
+    })
+    // 真实接口（后端恢复后启用）
+    // return $request.post({ url: '/enrollment/studentInfo', params })
+}
+
+/**
+ * @description 获取完整报名流程状态
+ * @return { Promise } 包含所有步骤状态的响应
+ */
+export function getEnrollmentProcessStatus() {
+    // 模拟后端数据
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve({
+                data: {
+                    label: '审核完毕',
+                    type: 'success',
+                    steps: [
+                        { completed: true, time: '2025-05-01 10:30:00' },
+                        { completed: true, time: '2025-05-01 10:30:00' },
+                        { completed: false, time: '' },
+                        { completed: false, time: '' }
+                    ]
+                }
+            })
+        }, 500)
+    })
+    // 真实接口（后端恢复后启用）
+    // return $request.get({ url: '/enrollment/processStatus' })
+}

pc/pages/user/enrollment.vue

@@ -136,9 +136,8 @@
                 </div>
             </div>
             <div class="mt-6">
-                <el-button type="primary" block>保存信息</el-button>
-                <el-button type="default" block class="mt-2"
-                    >提交审核</el-button
+                <el-button type="primary" block @click="handleSave"
+                    >保存信息</el-button
                 >
             </div>
         </el-card>
@@ -147,6 +146,11 @@
 <script lang="ts" setup>
 import { reactive } from 'vue'
 import { ElButton } from 'element-plus'
+import {
+    getStudentBaseInfo,
+    updateStudentBaseInfo,
+    getEnrollmentProcessStatus
+} from '@/api/enrollment'
 
 definePageMeta({
     module: 'personal',
@@ -179,15 +183,53 @@ const statusConfig = reactive<{
     progress: number
     steps: { completed: boolean; time: string }[]
 }>({
-    label: '已报名',
+    label: '未报名',
     type: 'info',
-    progress: 25,
+    get progress() {
+        const completedCount = this.steps.filter(
+            (step: { completed: any }) => step.completed
+        ).length
+        return (completedCount / this.steps.length) * 100
+    },
     steps: [
-        { completed: true, time: '2024-03-15' },
+        { 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>