From 69b73a93739af5629356c6ff33b1016378b0b847 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=97=AD=E6=98=8E?=
 <lixuming@lixumingdeMacBook-Pro.local>
Date: Fri, 29 Aug 2025 23:02:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BF=83=E7=90=86=E5=92=A8=E8=AF=A2=E9=A2=84?=
 =?UTF-8?q?=E7=BA=A6=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...ljkConsultationAppointmentServiceImpl.java |   18 +-
 mobile/src/api/xljk.js                        |  236 ++++
 mobile/src/pages.json                         |   26 +-
 mobile/src/pages/index/index.vue              |   24 +-
 .../src/pages/xljk/my-appointments/index.vue  |  737 ++++++++++++
 .../xljk/reservation/appointment-form.vue     |  708 ++++++++++++
 mobile/src/pages/xljk/reservation/index.vue   | 1006 +++++++++++++++++
 7 files changed, 2752 insertions(+), 3 deletions(-)
 create mode 100644 mobile/src/api/xljk.js
 create mode 100644 mobile/src/pages/xljk/my-appointments/index.vue
 create mode 100644 mobile/src/pages/xljk/reservation/appointment-form.vue
 create mode 100644 mobile/src/pages/xljk/reservation/index.vue

diff --git a/backend/ruoyi-modules/ruoyi-xljk/src/main/java/org/dromara/xljk/service/impl/XljkConsultationAppointmentServiceImpl.java b/backend/ruoyi-modules/ruoyi-xljk/src/main/java/org/dromara/xljk/service/impl/XljkConsultationAppointmentServiceImpl.java
index 94af7357..98bb0546 100644
--- a/backend/ruoyi-modules/ruoyi-xljk/src/main/java/org/dromara/xljk/service/impl/XljkConsultationAppointmentServiceImpl.java
+++ b/backend/ruoyi-modules/ruoyi-xljk/src/main/java/org/dromara/xljk/service/impl/XljkConsultationAppointmentServiceImpl.java
@@ -431,7 +431,23 @@ public class XljkConsultationAppointmentServiceImpl implements IXljkConsultation
             slot.put("availableCount", totalDetailSlots - bookedCount); // 可用数量
             slot.put("isExpired", isExpired); // 是否已过期
             
-            // TODO: 添加咨询师姓名等信息
+            // 查询咨询师姓名
+            if (schedule.getCounselorId() != null) {
+                try {
+                    String sql = "SELECT nick_name FROM sys_user WHERE user_id = ?";
+                    List<Map<String, Object>> result = jdbcTemplate.queryForList(sql, schedule.getCounselorId());
+                    if (!result.isEmpty()) {
+                        slot.put("counselorName", result.get(0).get("nick_name"));
+                    } else {
+                        slot.put("counselorName", null);
+                    }
+                } catch (Exception e) {
+                    log.warn("查询咨询师姓名失败, counselorId: {}, error: {}", schedule.getCounselorId(), e.getMessage());
+                    slot.put("counselorName", null);
+                }
+            } else {
+                slot.put("counselorName", null);
+            }
             
             availableSlots.add(slot);
         }
diff --git a/mobile/src/api/xljk.js b/mobile/src/api/xljk.js
new file mode 100644
index 00000000..926a3c1c
--- /dev/null
+++ b/mobile/src/api/xljk.js
@@ -0,0 +1,236 @@
+import { request } from '@/common/request';
+
+/**
+ * 心理健康咨询预约 API
+ * 移动端API接口 - 基于web端功能移植
+ */
+
+// ===== 预约时段管理 API =====
+
+/**
+ * 获取可预约时段列表（用于日历视图）
+ * @param {string} startDate 开始日期 YYYY-MM-DD
+ * @param {string} endDate 结束日期 YYYY-MM-DD
+ */
+export const getAvailableTimeSlots = (startDate, endDate) => {
+    return request({
+        url: '/xljk/consultation/appointment/available-slots',
+        method: 'GET',
+        params: { startDate, endDate }
+    });
+};
+
+/**
+ * 获取可用的详细时段列表（30分钟一个时段）
+ * @param {string} date 日期 YYYY-MM-DD
+ * @param {string} timeSlot 时段 如 "09:00-12:00"
+ */
+export const getAvailableDetailSlots = (date, timeSlot) => {
+    return request({
+        url: '/xljk/consultation/appointment/available-detail-slots',
+        method: 'GET',
+        params: { date, timeSlot }
+    });
+};
+
+// ===== 预约记录管理 API =====
+
+/**
+ * 学生提交预约
+ * @param {object} data 预约数据
+ */
+export const submitAppointment = (data) => {
+    return request({
+        url: '/xljk/consultation/appointment/submit',
+        method: 'POST',
+        data
+    });
+};
+
+/**
+ * 获取我的预约记录（学生用）
+ * @param {string|number} studentId 学生ID
+ * @param {boolean} forceRefresh 是否强制刷新
+ */
+export const getMyAppointments = (studentId, forceRefresh = false) => {
+    let url = `/xljk/consultation/appointment/my-appointments/${studentId}`;
+    
+    // 强制添加时间戳参数，确保绕过浏览器缓存
+    url += `?_t=${new Date().getTime()}`;
+    
+    // 如果需要额外强制刷新
+    if (forceRefresh) {
+        url += `&force=true`;
+    }
+    
+    return request({
+        url,
+        method: 'GET',
+        header: {
+            // 禁止所有缓存
+            'Cache-Control': 'no-cache, no-store, must-revalidate',
+            'Pragma': 'no-cache',
+            'Expires': '0'
+        }
+    });
+};
+
+/**
+ * 查询预约记录详细信息
+ * @param {string|number} id 预约记录ID
+ */
+export const getAppointmentDetail = (id) => {
+    return request({
+        url: `/xljk/consultation/appointment/${id}`,
+        method: 'GET'
+    });
+};
+
+/**
+ * 取消预约（更新状态为已取消，不删除记录）
+ * @param {string|number} id 预约记录ID
+ */
+export const cancelAppointment = (id) => {
+    return request({
+        url: `/xljk/consultation/appointment`,
+        method: 'PUT',
+        data: {
+            id: id,
+            status: 2 // 已取消状态
+        }
+    });
+};
+
+/**
+ * 更新预约信息（通用方法）
+ * @param {object} data 更新数据，必须包含id字段
+ */
+export const updateAppointment = (data) => {
+    return request({
+        url: `/xljk/consultation/appointment`,
+        method: 'PUT',
+        data
+    });
+};
+
+// ===== 选项数据 API =====
+
+/**
+ * 获取咨询师选项
+ */
+export const getCounselorOptions = () => {
+    return request({
+        url: '/xljk/consultation/schedule/options/counselors',
+        method: 'GET'
+    });
+};
+
+/**
+ * 获取学生信息（通过学号）
+ * @param {string} studentNo 学号
+ */
+export const getStudentByNo = (studentNo) => {
+    return request({
+        url: `/xljk/consultation/student/${studentNo}`,
+        method: 'GET'
+    });
+};
+
+/**
+ * 获取院系选项
+ */
+export const getCollegeOptions = () => {
+    return request({
+        url: '/xljk/consultation/appointment/options/colleges',
+        method: 'GET'
+    });
+};
+
+/**
+ * 获取专业选项
+ * @param {string} collegeName 院系名称（可选）
+ */
+export const getMajorOptions = (collegeName) => {
+    return request({
+        url: '/xljk/consultation/appointment/options/majors',
+        method: 'GET',
+        params: { collegeName }
+    });
+};
+
+/**
+ * 获取班级选项
+ * @param {string} collegeName 院系名称（可选）
+ * @param {string} majorName 专业名称（可选）
+ */
+export const getClassOptions = (collegeName, majorName) => {
+    return request({
+        url: '/xljk/consultation/appointment/options/classes',
+        method: 'GET',
+        params: { collegeName, majorName }
+    });
+};
+
+// ===== 移动端专用辅助方法 =====
+
+/**
+ * 格式化日期为 YYYY-MM-DD
+ * @param {Date} date 日期对象
+ */
+export const formatDate = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+};
+
+/**
+ * 获取指定日期的周日期范围
+ * @param {Date} date 指定日期
+ * @returns {object} { startDate, endDate, weekDates }
+ */
+export const getWeekDateRange = (date = new Date()) => {
+    const currentDate = new Date(date);
+    const currentDay = currentDate.getDay(); // 0=Sunday, 1=Monday, ...
+    
+    // 计算本周一的日期
+    const monday = new Date(currentDate);
+    monday.setDate(currentDate.getDate() - currentDay + (currentDay === 0 ? -6 : 1));
+    
+    // 生成一周的日期数组
+    const weekDates = [];
+    for (let i = 0; i < 7; i++) {
+        const weekDate = new Date(monday);
+        weekDate.setDate(monday.getDate() + i);
+        weekDates.push({
+            date: formatDate(weekDate),
+            dayName: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'][i],
+            dayNumber: weekDate.getDate(),
+            isToday: formatDate(weekDate) === formatDate(new Date())
+        });
+    }
+    
+    return {
+        startDate: formatDate(monday),
+        endDate: formatDate(new Date(monday.getTime() + 6 * 24 * 60 * 60 * 1000)),
+        weekDates
+    };
+};
+
+/**
+ * 检查预约限制
+ * @param {string|number} studentId 学生ID
+ */
+export const checkAppointmentLimitation = async (studentId) => {
+    try {
+        // 这里可能需要导入noshow相关的API，暂时使用简单的实现
+        return request({
+            url: `/xljk/consultation/appointment/check-limitation/${studentId}`,
+            method: 'GET'
+        });
+    } catch (error) {
+        console.error('检查预约限制失败', error);
+        // 检查失败不阻止预约
+        return { code: 200, data: { limited: false } };
+    }
+}; 
\ No newline at end of file
diff --git a/mobile/src/pages.json b/mobile/src/pages.json
index c3960042..8db5e1ac 100644
--- a/mobile/src/pages.json
+++ b/mobile/src/pages.json
@@ -302,7 +302,31 @@
 				"navigationBarBackgroundColor": "#0051d9",
 				"navigationBarTextStyle": "white"
 			}
-		}
+		},
+		        {
+            "path": "pages/xljk/reservation/index",
+            "style": {
+                "navigationBarTitleText": "心理咨询预约",
+                "navigationBarBackgroundColor": "#0051d9",
+                "navigationBarTextStyle": "white"
+            }
+        },
+        {
+            "path": "pages/xljk/my-appointments/index",
+            "style": {
+                "navigationBarTitleText": "我的预约",
+                "navigationBarBackgroundColor": "#0051d9",
+                "navigationBarTextStyle": "white"
+            }
+        },
+        {
+            "path": "pages/xljk/reservation/appointment-form",
+            "style": {
+                "navigationBarTitleText": "预约咨询",
+                "navigationBarBackgroundColor": "#0051d9",
+                "navigationBarTextStyle": "white"
+            }
+        }
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
diff --git a/mobile/src/pages/index/index.vue b/mobile/src/pages/index/index.vue
index 202e2d01..71c588cd 100644
--- a/mobile/src/pages/index/index.vue
+++ b/mobile/src/pages/index/index.vue
@@ -262,6 +262,20 @@
                             />
                         </template>
                     </ServiceItem>
+
+                    <ServiceItem
+                        v-if="hasPermi(['student:counsel:reservation'])"
+                        title="心理咨询预约"
+                        @click="gotoPsychologicalReservation"
+                    >
+                        <template #icon>
+                            <image
+                                src="/static/00113.png"
+                                mode="aspectFit"
+                                style="width: 24px; height: 24px"
+                            />
+                        </template>
+                    </ServiceItem>
                 </GridLayout>
             </Card>
 
@@ -710,7 +724,8 @@ export default {
                 this.hasPermi(['student:dormhygiene:listapp']) ||
                 this.hasPermi(['student:workstudy:list']) ||
                 this.hasPermi(['student:violation:listapp']) ||
-                this.hasPermi(['student:assessment:applyapp'])
+                this.hasPermi(['student:assessment:applyapp']) ||
+                this.hasPermi(['student:counsel:reservation'])
             );
         },
 
@@ -966,6 +981,13 @@ export default {
             });
         },
 
+        // 跳转到心理咨询预约页面
+        gotoPsychologicalReservation() {
+            uni.navigateTo({
+                url: '/pages/xljk/reservation/index',
+            });
+        },
+
         // 跳转到修改密码页面
         gotoResetPassword() {
             uni.navigateTo({
diff --git a/mobile/src/pages/xljk/my-appointments/index.vue b/mobile/src/pages/xljk/my-appointments/index.vue
new file mode 100644
index 00000000..efb6c804
--- /dev/null
+++ b/mobile/src/pages/xljk/my-appointments/index.vue
@@ -0,0 +1,737 @@
+<template>
+    <view class="page-container">
+        <!-- 导航栏 -->
+        <u-navbar 
+            title="我的预约" 
+            :border="false"
+            bg-color="#ffffff"
+            title-color="#333333"
+            @leftClick="goBack"
+        >
+            <template #left>
+                <u-icon name="arrow-left" size="22" color="#333333"></u-icon>
+            </template>
+        </u-navbar>
+
+        <!-- 主要内容区域 -->
+        <scroll-view class="main-content" scroll-y enhanced>
+            <!-- 筛选器 -->
+            <view class="filter-section">
+                <view class="filter-tabs">
+                    <view 
+                        v-for="(tab, index) in filterTabs" 
+                        :key="index"
+                        class="filter-tab"
+                        :class="{ active: activeFilterIndex === index }"
+                        @click="switchFilter(index)"
+                    >
+                        <text class="tab-text">{{ tab.label }}</text>
+                        <!-- 只有待咨询标签显示圆形标记 -->
+                        <view v-if="tab.value === '0' && tab.count > 0" class="tab-badge-circle"></view>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 加载状态 -->
+            <view v-if="loading" class="loading-container">
+                <u-loading-icon mode="circle"></u-loading-icon>
+                <text class="loading-text">加载中...</text>
+            </view>
+
+            <!-- 预约列表 -->
+            <view v-else-if="appointmentList.length > 0" class="appointment-list">
+                <view 
+                    v-for="appointment in appointmentList" 
+                    :key="appointment.id"
+                    class="appointment-card"
+                    @click="viewAppointmentDetail(appointment)"
+                >
+                    <!-- 预约状态 -->
+                    <view class="appointment-header">
+                        <view class="appointment-date">
+                            <text class="date-text">{{ appointment.appointmentDate }}</text>
+                            <text class="time-text">{{ appointment.appointmentTime }}</text>
+                        </view>
+                        <view class="appointment-status">
+                            <u-tag 
+                                :text="getStatusText(appointment.status)"
+                                :type="getStatusType(appointment.status)"
+                                size="mini"
+                            ></u-tag>
+                        </view>
+                    </view>
+
+                    <!-- 咨询师信息 -->
+                    <view class="counselor-section">
+                        <view class="counselor-avatar">
+                            <u-avatar 
+                                :src="appointment.counselorAvatar" 
+                                size="40"
+                                :text="appointment.counselorName ? appointment.counselorName.charAt(0) : '咨'"
+                            ></u-avatar>
+                        </view>
+                        <view class="counselor-info">
+                            <text class="counselor-name">{{ appointment.counselorName || '未知咨询师' }}</text>
+                            <text class="appointment-reason">{{ appointment.reason || '心理咨询' }}</text>
+                        </view>
+                        
+                        <!-- 取消按钮 -->
+                        <view v-if="appointment.status === '0'" class="inline-action">
+                            <button 
+                                class="cancel-button-inline"
+                                @click.stop="handleCancelClick(appointment)"
+                                :disabled="isCancelButtonDisabled(appointment.id)"
+                            >
+                                {{ getCancelButtonText(appointment.id) }}
+                            </button>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 空状态 -->
+            <view v-else class="empty-container">
+                <u-empty 
+                    mode="data" 
+                    :text="getEmptyText()"
+                    textColor="#909399"
+                    iconColor="#c8c9cc"
+                ></u-empty>
+                <u-button 
+                    type="primary" 
+                    size="normal"
+                    @click="goToReservation"
+                    style="margin-top: 40rpx;"
+                >
+                    立即预约
+                </u-button>
+            </view>
+        </scroll-view>
+
+
+    </view>
+</template>
+
+<script>
+import { getMyAppointments, cancelAppointment } from '@/api/xljk'
+
+export default {
+    name: 'MyAppointments',
+    data() {
+        return {
+            // 筛选相关
+            filterTabs: [
+                { label: '全部', value: 'all', count: 0 },
+                { label: '待咨询', value: '0', count: 0 },
+                { label: '已完成', value: '1', count: 0 },
+                { label: '已取消', value: '2', count: 0 },
+                { label: '未到访', value: '3', count: 0 }
+            ],
+            activeFilterIndex: 0,
+            
+            // 列表相关
+            appointmentList: [],
+            allAppointments: [], // 存储所有预约数据用于筛选
+            loading: false,
+            
+            // 取消预约相关
+            selectedAppointment: null,
+            cancelLoading: false,
+            cancelingAppointmentId: null // 正在取消的预约ID
+        }
+    },
+    onLoad() {
+        // 初始化时重置取消相关状态
+        this.resetCancelState()
+        this.loadAppointments()
+    },
+    onShow() {
+        // 页面显示时刷新数据，因为可能从预约页面返回
+        // 同时重置取消相关状态，防止从其他页面返回时状态异常
+        this.resetCancelState()
+        this.loadAppointments()
+    },
+    methods: {
+        // 返回上一页
+        goBack() {
+            uni.navigateBack()
+        },
+        
+        // 加载预约数据
+        async loadAppointments() {
+            this.loading = true
+            
+            try {
+                // 正确获取用户信息 - 使用专门的获取方法
+                const { userStorage } = await import('@/common/storage')
+                const userInfo = userStorage.getUserInfo()
+                
+                console.log('🔍 [我的预约] 获取到的完整用户信息:', userInfo)
+                
+                // 从正确的路径获取用户ID
+                let studentId = null
+                if (userInfo && userInfo.user) {
+                    studentId = userInfo.user.userId
+                }
+                
+                console.log('🔍 [我的预约] 解析到的学生ID:', studentId)
+                
+                if (!studentId) {
+                    uni.showToast({
+                        title: '请先登录',
+                        icon: 'error'
+                    })
+                    
+                    // 跳转到登录页面
+                    setTimeout(() => {
+                        uni.reLaunch({
+                            url: '/pages/login/index'
+                        })
+                    }, 1500)
+                    return
+                }
+                
+                // 调用API获取我的预约数据
+                const response = await getMyAppointments(studentId)
+                
+                console.log('🔍 [我的预约] API响应数据:', response)
+                
+                if (response.code === 200 && response.data) {
+                    console.log('🔍 [我的预约] 原始数据列表:', response.data)
+                    
+                    // 打印每条数据的status字段类型和值
+                    response.data.forEach((item, index) => {
+                        console.log(`🔍 [我的预约] 数据${index}: ID=${item.appointmentId}, status=${item.status} (${typeof item.status})`)
+                    })
+                    // 转换API数据格式
+                    const appointments = response.data.map(item => {
+                        return {
+                            id: item.id, // 修复：使用 id 而不是 appointmentId
+                            appointmentDate: item.appointmentDate,
+                            appointmentTime: item.appointmentDetailTime || item.appointmentTime,
+                            counselorName: item.counselorName,
+                            counselorAvatar: '',
+                            reason: item.reason,
+                            status: String(item.status), // 转换为字符串，便于筛选比较
+                            originalData: item
+                        }
+                    })
+                    
+                    this.allAppointments = appointments
+                    console.log('🔍 [我的预约] 转换后的数据:', appointments)
+                    this.updateFilterCounts()
+                    this.filterAppointments()
+                } else {
+                    this.allAppointments = []
+                    this.appointmentList = []
+                    this.updateFilterCounts()
+                }
+            } catch (error) {
+                console.error('加载预约数据失败:', error)
+                uni.showToast({
+                    title: '加载失败，请检查网络连接',
+                    icon: 'error'
+                })
+                this.allAppointments = []
+                this.appointmentList = []
+                this.updateFilterCounts()
+            } finally {
+                this.loading = false
+            }
+        },
+        
+        // 更新筛选标签数量
+        updateFilterCounts() {
+            console.log('🔍 [我的预约] 更新筛选标签数量，总数据:', this.allAppointments.length)
+            
+            // 统计各状态数量
+            const status0Count = this.allAppointments.filter(item => item.status === '0').length
+            const status1Count = this.allAppointments.filter(item => item.status === '1').length  
+            const status2Count = this.allAppointments.filter(item => item.status === '2').length
+            const status3Count = this.allAppointments.filter(item => item.status === '3').length
+            
+            console.log('🔍 [我的预约] 状态统计: 待咨询(0)=', status0Count, ', 已完成(1)=', status1Count, ', 已取消(2)=', status2Count, ', 未到访(3)=', status3Count)
+            
+            this.filterTabs[0].count = this.allAppointments.length // 全部
+            this.filterTabs[1].count = status0Count // 待咨询
+            this.filterTabs[2].count = status1Count // 已完成
+            this.filterTabs[3].count = status2Count // 已取消
+            this.filterTabs[4].count = status3Count // 未到访
+        },
+        
+        // 切换筛选器
+        switchFilter(index) {
+            this.activeFilterIndex = index
+            this.filterAppointments()
+        },
+        
+        // 筛选预约数据
+        filterAppointments() {
+            const currentFilter = this.filterTabs[this.activeFilterIndex]
+            
+            console.log('🔍 [我的预约] 开始筛选，当前筛选条件:', currentFilter)
+            
+            if (currentFilter.value === 'all') {
+                this.appointmentList = [...this.allAppointments]
+            } else {
+                this.appointmentList = this.allAppointments.filter(item => item.status === currentFilter.value)
+            }
+            
+            console.log('🔍 [我的预约] 筛选结果数量:', this.appointmentList.length)
+            console.log('🔍 [我的预约] 筛选结果详情:', this.appointmentList)
+        },
+        
+        // 获取状态文本
+        getStatusText(status) {
+            const statusMap = {
+                '0': '待咨询',
+                '1': '已完成',
+                '2': '已取消',
+                '3': '未到访',
+                // 兼容英文状态值
+                'pending': '待咨询',
+                'completed': '已完成',
+                'cancelled': '已取消',
+                'expired': '已过期'
+            }
+            return statusMap[status] || '未知状态'
+        },
+        
+        // 获取状态类型（用于标签颜色）
+        getStatusType(status) {
+            const typeMap = {
+                '0': 'warning',
+                '1': 'success', 
+                '2': 'primary', // 已取消状态使用蓝色
+                '3': 'info', // 未到访状态使用灰色
+                // 兼容英文状态值
+                'pending': 'warning',
+                'completed': 'success',
+                'cancelled': 'primary', // 已取消状态使用蓝色
+                'expired': 'info'
+            }
+            return typeMap[status] || 'info'
+        },
+        
+        // 获取空状态文本
+        getEmptyText() {
+            const currentFilter = this.filterTabs[this.activeFilterIndex]
+            const textMap = {
+                'all': '暂无预约记录',
+                '0': '暂无待咨询预约',
+                '1': '暂无已完成预约',
+                '2': '暂无已取消预约',
+                '3': '暂无未到访预约'
+            }
+            return textMap[currentFilter.value] || '暂无数据'
+        },
+        
+        // 查看预约详情
+        viewAppointmentDetail(appointment) {
+            // 这里可以跳转到预约详情页面，或者显示详情弹窗
+            console.log('查看预约详情:', appointment)
+            // uni.navigateTo({
+            //     url: `/pages/xljk/appointment-detail/index?id=${appointment.id}`
+            // })
+        },
+        
+        // 处理取消按钮点击
+        handleCancelClick(appointment) {
+            console.log('🔄 [取消预约] 按钮点击处理:', {
+                appointmentId: appointment.id,
+                appointmentStatus: appointment.status,
+                当前状态: {
+                    cancelLoading: this.cancelLoading,
+                    cancelingAppointmentId: this.cancelingAppointmentId,
+                    isDisabled: this.isCancelButtonDisabled(appointment.id)
+                }
+            })
+            
+            // 调用取消预约方法
+            this.cancelAppointment(appointment)
+        },
+        
+        // 取消预约
+        cancelAppointment(appointment) {
+            console.log('点击取消预约按钮，预约信息：', appointment)
+            
+            if (appointment.status !== '0') {
+                uni.showToast({
+                    title: '只能取消待咨询的预约',
+                    icon: 'none'
+                })
+                return
+            }
+            
+            // 检查是否已经在取消中
+            if (this.cancelingAppointmentId === appointment.id) {
+                return
+            }
+            
+            console.log('使用原生弹窗显示取消确认')
+            this.selectedAppointment = appointment
+            
+            // 使用原生确认弹窗
+            uni.showModal({
+                title: '确认取消',
+                content: '确定要取消这次预约吗？取消后将无法恢复。',
+                confirmText: '确认取消',
+                cancelText: '再想想',
+                confirmColor: '#ff4757',
+                success: (res) => {
+                    if (res.confirm) {
+                        console.log('用户确认取消')
+                        this.confirmCancel()
+                    } else if (res.cancel) {
+                        console.log('用户取消了取消操作')
+                        this.closeCancelModal()
+                    }
+                }
+            })
+        },
+        
+        // 确认取消预约
+        async confirmCancel() {
+            if (!this.selectedAppointment || this.cancelLoading) return
+            
+            const appointmentId = this.selectedAppointment.id
+            this.cancelLoading = true
+            this.cancelingAppointmentId = appointmentId // 标记正在取消的预约
+            
+            console.log('🔄 [取消预约] 开始处理:', {
+                appointmentId,
+                当前状态: {
+                    cancelLoading: this.cancelLoading,
+                    cancelingAppointmentId: this.cancelingAppointmentId
+                }
+            })
+            
+            // 强制超时重置机制，防止状态一直不重置
+            const forceResetTimeout = setTimeout(() => {
+                console.log('⚠️ [取消预约] 强制超时重置状态')
+                this.cancelLoading = false
+                this.cancelingAppointmentId = null
+                uni.showToast({
+                    title: '操作超时，已重置',
+                    icon: 'none'
+                })
+            }, 45000) // 45秒强制重置
+            
+            try {
+                if (!appointmentId) {
+                    throw new Error('预约ID为空')
+                }
+                
+                console.log('📡 [取消预约] 发送API请求...')
+                
+                // 添加超时控制，手机端网络可能较慢
+                const timeoutPromise = new Promise((_, reject) => {
+                    setTimeout(() => {
+                        reject(new Error('请求超时，请重试'))
+                    }, 30000) // 30秒超时
+                })
+                
+                const apiPromise = cancelAppointment(appointmentId)
+                const response = await Promise.race([apiPromise, timeoutPromise])
+                
+                console.log('📡 [取消预约] API响应:', response)
+                
+                if (response && response.code === 200) {
+                    console.log('✅ [取消预约] 取消成功')
+                    uni.showToast({
+                        title: '取消成功',
+                        icon: 'success'
+                    })
+                    
+                    // 立即更新本地数据，避免重新请求
+                    const appointmentIndex = this.allAppointments.findIndex(item => item.id === appointmentId)
+                    if (appointmentIndex !== -1) {
+                        // 更新状态为已取消
+                        this.allAppointments[appointmentIndex].status = '2'
+                        console.log('📊 [取消预约] 本地数据已更新:', this.allAppointments[appointmentIndex])
+                        
+                        // 立即刷新筛选和计数
+                        this.updateFilterCounts()
+                        this.filterAppointments()
+                    }
+                    
+                    this.closeCancelModal()
+                    // 注释掉重新加载，使用本地更新提升用户体验
+                    // this.loadAppointments()
+                } else {
+                    const errorMsg = response?.msg || '取消失败'
+                    console.log('❌ [取消预约] 业务错误:', errorMsg)
+                    uni.showToast({
+                        title: errorMsg,
+                        icon: 'error'
+                    })
+                }
+            } catch (error) {
+                console.error('❌ [取消预约] 请求失败:', error)
+                
+                let errorMessage = '取消失败，请检查网络连接'
+                if (error.message === '请求超时，请重试') {
+                    errorMessage = '请求超时，请重试'
+                } else if (error.errMsg && error.errMsg.includes('timeout')) {
+                    errorMessage = '网络超时，请检查网络连接'
+                } else if (error.errMsg && error.errMsg.includes('fail')) {
+                    errorMessage = '网络连接失败，请检查网络'
+                }
+                
+                uni.showToast({
+                    title: errorMessage,
+                    icon: 'error'
+                })
+            } finally {
+                console.log('🔄 [取消预约] 清理状态')
+                clearTimeout(forceResetTimeout) // 清除强制重置定时器
+                this.cancelLoading = false
+                this.cancelingAppointmentId = null // 重置正在取消的预约ID
+            }
+        },
+        
+        // 重置取消预约状态
+        closeCancelModal() {
+            console.log('🔄 [取消预约] 重置所有状态:', {
+                之前状态: {
+                    selectedAppointment: this.selectedAppointment?.id,
+                    cancelLoading: this.cancelLoading,
+                    cancelingAppointmentId: this.cancelingAppointmentId
+                }
+            })
+            
+            this.selectedAppointment = null
+            this.cancelLoading = false // 重置加载状态
+            this.cancelingAppointmentId = null // 重置正在取消的预约ID
+            
+            console.log('🔄 [取消预约] 状态重置完成:', {
+                当前状态: {
+                    selectedAppointment: this.selectedAppointment,
+                    cancelLoading: this.cancelLoading,
+                    cancelingAppointmentId: this.cancelingAppointmentId
+                }
+            })
+        },
+        
+
+        
+        // 跳转到预约页面
+        goToReservation() {
+            uni.navigateBack()
+        },
+        
+        // 检查特定预约是否正在取消
+        isAppointmentCanceling(appointmentId) {
+            return this.cancelingAppointmentId === appointmentId
+        },
+        
+        // 获取取消按钮文本
+        getCancelButtonText(appointmentId) {
+            return this.cancelingAppointmentId === appointmentId ? '取消中...' : '取消预约'
+        },
+        
+        // 检查取消按钮是否禁用
+        isCancelButtonDisabled(appointmentId) {
+            return this.cancelingAppointmentId === appointmentId
+        },
+        
+        // 重置取消相关状态
+        resetCancelState() {
+            console.log('🔄 [取消预约] 重置取消相关状态')
+            this.selectedAppointment = null
+            this.cancelLoading = false
+            this.cancelingAppointmentId = null
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+    min-height: 100vh;
+    background-color: #f5f5f5;
+}
+
+.main-content {
+    height: calc(100vh - 88rpx); // 减去导航栏高度
+    padding-top: 20rpx;
+}
+
+.filter-section {
+    background: #ffffff;
+    margin-bottom: 20rpx;
+    
+    .filter-tabs {
+        display: flex;
+        padding: 20rpx;
+        
+        .filter-tab {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            padding: 20rpx 10rpx;
+            border-radius: 12rpx;
+            transition: all 0.3s ease;
+            
+            &.active {
+                background: rgba(24, 144, 255, 0.1);
+                
+                .tab-text {
+                    color: #1890ff;
+                    font-weight: 600;
+                }
+            }
+            
+            .tab-text {
+                font-size: 28rpx;
+                color: #666;
+                margin-right: 8rpx;
+            }
+            
+            .tab-badge-circle {
+                width: 16rpx;
+                height: 16rpx;
+                background: #ff4d4f;
+                border-radius: 50%;
+                margin-left: 8rpx;
+            }
+        }
+    }
+}
+
+.loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 100rpx 20rpx;
+    
+    .loading-text {
+        font-size: 28rpx;
+        color: #999;
+        margin-top: 20rpx;
+    }
+}
+
+.appointment-list {
+    padding: 0 20rpx;
+    
+    .appointment-card {
+        background: #ffffff;
+        border-radius: 20rpx;
+        padding: 30rpx;
+        margin-bottom: 20rpx;
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+        transition: all 0.3s ease;
+        
+        &:last-child {
+            margin-bottom: 0;
+        }
+        
+        &:active {
+            transform: scale(0.98);
+            background: rgba(24, 144, 255, 0.02);
+        }
+        
+        .appointment-header {
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            margin-bottom: 24rpx;
+            
+            .appointment-date {
+                .date-text {
+                    font-size: 32rpx;
+                    font-weight: 600;
+                    color: #333;
+                    display: block;
+                    margin-bottom: 8rpx;
+                }
+                
+                .time-text {
+                    font-size: 26rpx;
+                    color: #666;
+                    display: block;
+                }
+            }
+        }
+        
+        .counselor-section {
+            display: flex;
+            align-items: center;
+            margin-bottom: 24rpx;
+            
+            .counselor-avatar {
+                margin-right: 20rpx;
+            }
+            
+            .counselor-info {
+                flex: 1;
+                
+                .counselor-name {
+                    font-size: 30rpx;
+                    font-weight: 600;
+                    color: #333;
+                    display: block;
+                    margin-bottom: 8rpx;
+                }
+                
+                .appointment-reason {
+                    font-size: 26rpx;
+                    color: #666;
+                    display: block;
+                }
+            }
+            
+            .inline-action {
+                .cancel-button-inline {
+                    background-color: #ff4757;
+                    color: white;
+                    border: none;
+                    border-radius: 12rpx;
+                    padding: 12rpx 20rpx;
+                    font-size: 24rpx;
+                    font-weight: 500;
+                    cursor: pointer;
+                    outline: none;
+                    min-width: 120rpx;
+                    
+                    &:disabled {
+                        background-color: #cccccc;
+                        color: #999999;
+                        cursor: not-allowed;
+                    }
+                    
+                    &:active:not(:disabled) {
+                        background-color: #ff3742;
+                        transform: scale(0.98);
+                    }
+                }
+            }
+        }
+        
+
+    }
+}
+
+.empty-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 100rpx 20rpx;
+}
+
+.cancel-modal-content {
+    padding: 20rpx 0;
+    
+    .cancel-text {
+        font-size: 28rpx;
+        color: #666;
+        line-height: 1.5;
+        text-align: center;
+    }
+}
+</style> 
\ No newline at end of file
diff --git a/mobile/src/pages/xljk/reservation/appointment-form.vue b/mobile/src/pages/xljk/reservation/appointment-form.vue
new file mode 100644
index 00000000..2667b2af
--- /dev/null
+++ b/mobile/src/pages/xljk/reservation/appointment-form.vue
@@ -0,0 +1,708 @@
+<template>
+    <view class="page-container">
+        <!-- 自定义导航栏 -->
+        <view class="custom-navbar">
+            <view class="navbar-left" @click="goBack">
+                <u-icon name="arrow-left" size="20" color="#ffffff"></u-icon>
+            </view>
+            <text class="navbar-title">预约咨询</text>
+            <view class="navbar-right"></view>
+        </view>
+
+        <!-- 主要内容区域 -->
+        <scroll-view class="main-content" scroll-y enhanced :show-scrollbar="false">
+            <!-- 预约信息确认 -->
+            <view class="confirm-section">
+                <view class="section-title">
+                    <u-icon name="calendar" size="16" color="#3c9cff"></u-icon>
+                    <text class="title-text">预约信息确认</text>
+                </view>
+                
+                <view class="confirm-card">
+                    <view class="confirm-item">
+                        <text class="confirm-label">预约日期：</text>
+                        <text class="confirm-value">{{ formattedDate }}</text>
+                    </view>
+                    <view class="confirm-item">
+                        <text class="confirm-label">预约时段：</text>
+                        <text class="confirm-value">{{ appointmentData.timeRange }}</text>
+                    </view>
+                    <view class="confirm-item">
+                        <text class="confirm-label">咨询师：</text>
+                        <text class="confirm-value">{{ appointmentData.counselorName }}</text>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 个人信息 -->
+            <view class="form-section">
+                <view class="section-title">
+                    <u-icon name="account" size="16" color="#3c9cff"></u-icon>
+                    <text class="title-text">个人信息</text>
+                </view>
+                
+                <view class="form-card">
+                    <view class="form-item">
+                        <text class="form-label">姓名：</text>
+                        <text class="form-value">{{ userInfo.nickName || userInfo.userName || '未设置' }}</text>
+                    </view>
+                    <view class="form-item">
+                        <text class="form-label">学号：</text>
+                        <text class="form-value">{{ userInfo.userName || '未设置' }}</text>
+                    </view>
+                    <!-- 院系、专业、班级信息 -->
+                    <view class="form-item">
+                        <text class="form-label">院系：</text>
+                        <u-picker
+                            :columns="[collegeOptions]"
+                            keyName="label"
+                            v-model="collegeIndex"
+                            :show="showCollegePicker"
+                            @confirm="onCollegeConfirm"
+                            @close="showCollegePicker = false"
+                        ></u-picker>
+                        <view class="picker-input" @click="showCollegePicker = true">
+                            <text class="picker-text" :class="{ placeholder: !form.collegeName }">
+                                {{ form.collegeName || '请选择院系' }}
+                            </text>
+                            <u-icon name="arrow-right" size="14" color="#c8c9cc"></u-icon>
+                        </view>
+                    </view>
+                    
+                    <view class="form-item">
+                        <text class="form-label">专业：</text>
+                        <u-picker
+                            :columns="[majorOptions]"
+                            keyName="label"
+                            v-model="majorIndex"
+                            :show="showMajorPicker"
+                            @confirm="onMajorConfirm"
+                            @close="showMajorPicker = false"
+                        ></u-picker>
+                        <view class="picker-input" @click="handleMajorPickerClick">
+                            <text class="picker-text" :class="{ placeholder: !form.majorName }">
+                                {{ form.majorName || '请选择专业' }}
+                            </text>
+                            <u-icon name="arrow-right" size="14" color="#c8c9cc"></u-icon>
+                        </view>
+                    </view>
+                    
+                    <view class="form-item">
+                        <text class="form-label">班级：</text>
+                        <u-picker
+                            :columns="[classOptions]"
+                            keyName="label"
+                            v-model="classIndex"
+                            :show="showClassPicker"
+                            @confirm="onClassConfirm"
+                            @close="showClassPicker = false"
+                        ></u-picker>
+                        <view class="picker-input" @click="handleClassPickerClick">
+                            <text class="picker-text" :class="{ placeholder: !form.className }">
+                                {{ form.className || '请选择班级' }}
+                            </text>
+                            <u-icon name="arrow-right" size="14" color="#c8c9cc"></u-icon>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 咨询原因 -->
+            <view class="form-section">
+                <view class="section-title">
+                    <u-icon name="chat" size="16" color="#3c9cff"></u-icon>
+                    <text class="title-text">咨询原因</text>
+                    <text class="required-mark">*</text>
+                </view>
+                
+                <view class="form-card">
+                    <u-input
+                        v-model="form.reason"
+                        type="textarea"
+                        placeholder="请详细描述您希望咨询的问题或困扰，以便咨询师更好地了解您的需求"
+                        :maxlength="500"
+                        :show-word-limit="true"
+                        :auto-height="true"
+                        :custom-style="{
+                            minHeight: '120px',
+                            backgroundColor: 'transparent',
+                            border: 'none'
+                        }"
+                    ></u-input>
+                </view>
+            </view>
+
+            <!-- 温馨提示 -->
+            <view class="tips-section">
+                <view class="section-title">
+                    <u-icon name="info-circle" size="16" color="#ff9900"></u-icon>
+                    <text class="title-text">温馨提示</text>
+                </view>
+                
+                <view class="tips-card">
+                    <view class="tip-item">
+                        <text class="tip-number">1.</text>
+                        <text class="tip-text">请提前5-10分钟到达咨询室，迟到可能影响咨询效果</text>
+                    </view>
+                    <view class="tip-item">
+                        <text class="tip-number">2.</text>
+                        <text class="tip-text">咨询内容严格保密，请放心倾述您的困扰</text>
+                    </view>
+                    <view class="tip-item">
+                        <text class="tip-number">3.</text>
+                        <text class="tip-text">如需取消预约，请提前24小时操作</text>
+                    </view>
+                    <view class="tip-item">
+                        <text class="tip-number">4.</text>
+                        <text class="tip-text">连续3次未到访将被限制预约功能</text>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 底部间距 -->
+            <view class="bottom-spacer"></view>
+        </scroll-view>
+
+        <!-- 底部提交按钮 -->
+        <view class="submit-container">
+            <u-button 
+                text="提交预约" 
+                type="primary" 
+                :loading="submitting"
+                :disabled="!canSubmit"
+                @click="submitAppointment"
+                :custom-style="{
+                    width: '100%',
+                    height: '50px',
+                    fontSize: '18px',
+                    fontWeight: 'bold'
+                }"
+            ></u-button>
+        </view>
+    </view>
+</template>
+
+<script>
+import { 
+    submitAppointment, 
+    getCollegeOptions, 
+    getMajorOptions, 
+    getClassOptions,
+    checkAppointmentLimitation
+} from '@/api/xljk';
+import { userStorage } from '@/common/storage';
+
+export default {
+    name: 'AppointmentForm',
+    data() {
+        return {
+            // 用户信息
+            userInfo: {},
+            
+            // 预约数据
+            appointmentData: {
+                date: '',
+                scheduleId: '',
+                counselorId: '',
+                timeRange: '',
+                counselorName: ''
+            },
+            
+            // 表单数据
+            form: {
+                collegeName: '',
+                majorName: '',
+                className: '',
+                reason: ''
+            },
+            
+            // 选项数据
+            collegeOptions: [],
+            majorOptions: [],
+            classOptions: [],
+            
+            // 选择器状态
+            showCollegePicker: false,
+            showMajorPicker: false,
+            showClassPicker: false,
+            
+            // 选择器索引
+            collegeIndex: [0],
+            majorIndex: [0],
+            classIndex: [0],
+            
+            // 提交状态
+            submitting: false
+        };
+    },
+    
+    computed: {
+        formattedDate() {
+            if (!this.appointmentData.date) return '';
+            const date = new Date(this.appointmentData.date);
+            const month = date.getMonth() + 1;
+            const day = date.getDate();
+            const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()];
+            return `${month}月${day}日 ${weekDay}`;
+        },
+        
+        canSubmit() {
+            return this.form.reason.trim().length > 0 && 
+                   this.form.collegeName && 
+                   this.form.majorName && 
+                   this.form.className;
+        }
+    },
+    
+    onLoad(options) {
+        console.log('预约表单页面加载，参数:', options);
+        this.checkLoginStatus();
+        this.parseParams(options);
+        this.loadOptions();
+    },
+    
+    methods: {
+        // 检查登录状态
+        checkLoginStatus() {
+            if (!userStorage.isLoggedIn()) {
+                uni.reLaunch({
+                    url: '/pages/login/index',
+                });
+                return false;
+            }
+            
+            const userStorage_data = userStorage.getUserInfo();
+            if (userStorage_data && userStorage_data.user) {
+                this.userInfo = userStorage_data.user;
+            }
+            
+            console.log('用户信息:', this.userInfo);
+            return true;
+        },
+        
+        // 解析页面参数
+        parseParams(options) {
+            this.appointmentData = {
+                date: options.date || '',
+                scheduleId: options.scheduleId || '',
+                counselorId: options.counselorId || '',
+                timeRange: options.timeRange || '',
+                counselorName: decodeURIComponent(options.counselorName || '')
+            };
+            
+            console.log('预约数据:', this.appointmentData);
+        },
+        
+        // 加载选项数据
+        async loadOptions() {
+            try {
+                // 加载院系选项
+                const collegeRes = await getCollegeOptions();
+                if (collegeRes.code === 200 && collegeRes.data) {
+                    this.collegeOptions = collegeRes.data.map(item => ({
+                        label: item.label || item.name,
+                        value: item.value || item.name
+                    }));
+                }
+                
+                // 加载所有专业选项
+                const majorRes = await getMajorOptions();
+                if (majorRes.code === 200 && majorRes.data) {
+                    this.majorOptions = majorRes.data.map(item => ({
+                        label: item.label || item.name,
+                        value: item.value || item.name
+                    }));
+                }
+                
+                // 加载所有班级选项
+                const classRes = await getClassOptions();
+                if (classRes.code === 200 && classRes.data) {
+                    this.classOptions = classRes.data.map(item => ({
+                        label: item.label || item.name,
+                        value: item.value || item.name
+                    }));
+                }
+                
+                console.log('选项数据加载完成:', {
+                    colleges: this.collegeOptions.length,
+                    majors: this.majorOptions.length,
+                    classes: this.classOptions.length
+                });
+            } catch (error) {
+                console.error('加载选项数据失败:', error);
+            }
+        },
+        
+        // 院系选择确认
+        async onCollegeConfirm(e) {
+            console.log('院系选择:', e);
+            const index = e.value[0];
+            const selectedCollege = this.collegeOptions[index];
+            
+            if (selectedCollege) {
+                this.form.collegeName = selectedCollege.value;
+                this.collegeIndex = [index];
+                
+                // 清空专业和班级
+                this.form.majorName = '';
+                this.form.className = '';
+                this.majorIndex = [0];
+                this.classIndex = [0];
+                
+                // 重新加载专业选项
+                try {
+                    const majorRes = await getMajorOptions(selectedCollege.value);
+                    if (majorRes.code === 200 && majorRes.data) {
+                        this.majorOptions = majorRes.data.map(item => ({
+                            label: item.label || item.name,
+                            value: item.value || item.name
+                        }));
+                    }
+                } catch (error) {
+                    console.error('加载专业选项失败:', error);
+                }
+            }
+            
+            this.showCollegePicker = false;
+        },
+        
+        // 专业选择确认
+        async onMajorConfirm(e) {
+            console.log('专业选择:', e);
+            const index = e.value[0];
+            const selectedMajor = this.majorOptions[index];
+            
+            if (selectedMajor) {
+                this.form.majorName = selectedMajor.value;
+                this.majorIndex = [index];
+                
+                // 清空班级
+                this.form.className = '';
+                this.classIndex = [0];
+                
+                // 重新加载班级选项
+                try {
+                    const classRes = await getClassOptions(this.form.collegeName, selectedMajor.value);
+                    if (classRes.code === 200 && classRes.data) {
+                        this.classOptions = classRes.data.map(item => ({
+                            label: item.label || item.name,
+                            value: item.value || item.name
+                        }));
+                    }
+                } catch (error) {
+                    console.error('加载班级选项失败:', error);
+                }
+            }
+            
+            this.showMajorPicker = false;
+        },
+        
+        // 班级选择确认
+        onClassConfirm(e) {
+            console.log('班级选择:', e);
+            const index = e.value[0];
+            const selectedClass = this.classOptions[index];
+            
+            if (selectedClass) {
+                this.form.className = selectedClass.value;
+                this.classIndex = [index];
+            }
+            
+            this.showClassPicker = false;
+        },
+        
+        // 处理专业选择器点击
+        handleMajorPickerClick() {
+            if (!this.form.collegeName) {
+                uni.showToast({
+                    title: '请先选择院系',
+                    icon: 'none'
+                });
+                return;
+            }
+            this.showMajorPicker = true;
+        },
+        
+        // 处理班级选择器点击
+        handleClassPickerClick() {
+            if (!this.form.collegeName) {
+                uni.showToast({
+                    title: '请先选择院系',
+                    icon: 'none'
+                });
+                return;
+            }
+            if (!this.form.majorName) {
+                uni.showToast({
+                    title: '请先选择专业',
+                    icon: 'none'
+                });
+                return;
+            }
+            this.showClassPicker = true;
+        },
+        
+        // 提交预约
+        async submitAppointment() {
+            if (!this.canSubmit) {
+                uni.showToast({
+                    title: '请完善预约信息',
+                    icon: 'none'
+                });
+                return;
+            }
+            
+            this.submitting = true;
+            
+            try {
+                // 检查预约限制
+                if (this.userInfo.userId) {
+                    const limitationCheck = await checkAppointmentLimitation(this.userInfo.userId);
+                    if (limitationCheck.code === 200 && limitationCheck.data && limitationCheck.data.limited) {
+                        uni.showToast({
+                            title: `您暂时无法预约，限制将于 ${limitationCheck.data.expireDateStr} 解除`,
+                            icon: 'none',
+                            duration: 3000
+                        });
+                        return;
+                    }
+                }
+                
+                // 构建提交数据
+                const submitData = {
+                    studentId: this.userInfo.userId,
+                    studentName: this.userInfo.nickName || this.userInfo.userName,
+                    studentNo: this.userInfo.userName,
+                    collegeName: this.form.collegeName,
+                    majorName: this.form.majorName,
+                    className: this.form.className,
+                    scheduleId: this.appointmentData.scheduleId,
+                    counselorId: this.appointmentData.counselorId,
+                    counselorName: this.appointmentData.counselorName,
+                    appointmentDate: this.appointmentData.date,
+                    appointmentTime: this.appointmentData.timeRange,
+                    appointmentDetailTime: this.appointmentData.timeRange,
+                    reason: this.form.reason.trim()
+                };
+                
+                console.log('提交预约数据:', submitData);
+                
+                const response = await submitAppointment(submitData);
+                
+                if (response.code === 200) {
+                    uni.showToast({
+                        title: '预约成功',
+                        icon: 'success'
+                    });
+                    
+                    // 延迟跳转，让用户看到成功提示
+                    setTimeout(() => {
+                        uni.navigateBack({
+                            delta: 2 // 返回到主页面
+                        });
+                    }, 1500);
+                } else {
+                    uni.showToast({
+                        title: response.msg || '预约失败',
+                        icon: 'none',
+                        duration: 3000
+                    });
+                }
+            } catch (error) {
+                console.error('提交预约失败:', error);
+                uni.showToast({
+                    title: '网络错误，请重试',
+                    icon: 'none'
+                });
+            } finally {
+                this.submitting = false;
+            }
+        },
+        
+        // 返回上一页
+        goBack() {
+            uni.navigateBack();
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+    min-height: 100vh;
+    background-color: #f5f5f5;
+    display: flex;
+    flex-direction: column;
+}
+
+.custom-navbar {
+    background: #1890ff;
+    padding: calc(var(--status-bar-height) + 12px) 16px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.navbar-left, .navbar-right {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.navbar-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #ffffff;
+}
+
+.main-content {
+    flex: 1;
+    padding-bottom: 80px;
+}
+
+/* 通用样式 */
+.confirm-section, .form-section, .tips-section {
+    margin: 16px;
+}
+
+.section-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.title-text {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+    margin-left: 8px;
+}
+
+.required-mark {
+    color: #f56c6c;
+    margin-left: 4px;
+}
+
+.confirm-card, .form-card, .tips-card {
+    background-color: #ffffff;
+    border-radius: 16px;
+    padding: 16px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 确认信息 */
+.confirm-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+}
+
+.confirm-item:last-child {
+    margin-bottom: 0;
+}
+
+.confirm-label {
+    font-size: 14px;
+    color: #606266;
+    margin-right: 8px;
+    min-width: 80px;
+}
+
+.confirm-value {
+    font-size: 14px;
+    color: #303133;
+    font-weight: 500;
+}
+
+/* 表单样式 */
+.form-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    min-height: 40px;
+}
+
+.form-item:last-child {
+    margin-bottom: 0;
+}
+
+.form-label {
+    font-size: 14px;
+    color: #606266;
+    margin-right: 12px;
+    min-width: 60px;
+    flex-shrink: 0;
+}
+
+.form-value {
+    font-size: 14px;
+    color: #303133;
+    flex: 1;
+}
+
+.picker-input {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex: 1;
+    padding: 8px 12px;
+    background-color: #f8f9fa;
+    border-radius: 12px;
+    min-height: 24px;
+    border: 1px solid #eee;
+}
+
+.picker-text {
+    font-size: 14px;
+    color: #303133;
+    flex: 1;
+}
+
+.picker-text.placeholder {
+    color: #c8c9cc;
+}
+
+/* 温馨提示 */
+.tip-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 12px;
+}
+
+.tip-item:last-child {
+    margin-bottom: 0;
+}
+
+.tip-number {
+    font-size: 14px;
+    color: #ff9900;
+    margin-right: 8px;
+    font-weight: 500;
+    flex-shrink: 0;
+}
+
+.tip-text {
+    font-size: 14px;
+    color: #606266;
+    line-height: 1.5;
+}
+
+/* 底部提交按钮 */
+.submit-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #ffffff;
+    padding: 16px;
+    border-top: 1px solid #eee;
+    padding-bottom: calc(16px + env(safe-area-inset-bottom));
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.bottom-spacer {
+    height: 20px;
+}
+</style> 
\ No newline at end of file
diff --git a/mobile/src/pages/xljk/reservation/index.vue b/mobile/src/pages/xljk/reservation/index.vue
new file mode 100644
index 00000000..5310ec70
--- /dev/null
+++ b/mobile/src/pages/xljk/reservation/index.vue
@@ -0,0 +1,1006 @@
+<template>
+    <view class="page-container">
+        <!-- 主要内容区域 -->
+        <scroll-view class="main-content" scroll-y enhanced>
+            <!-- 顶部星期卡片区域 -->
+            <view class="week-cards-container">
+                <!-- 我的预约按钮卡片（固定） -->
+                <view class="my-appointments-card" @click="goToMyAppointments">
+                    <view class="card-text-container">
+                        <text class="card-text-line">我的</text>
+                        <text class="card-text-line">预约</text>
+                    </view>
+                </view>
+
+                <!-- 星期卡片横向滑动区域 -->
+                <scroll-view 
+                    class="week-scroll-container" 
+                    scroll-x
+                >
+                    <view class="week-cards-wrapper">
+                        <view 
+                            v-for="(day, index) in weekDates" 
+                            :key="day.date"
+                            class="week-card"
+                            :class="{ active: selectedDate === day.date, today: day.isToday }"
+                            @click="selectDate(day.date, index)"
+                        >
+                            <text class="day-name">{{ day.dayName }}</text>
+                            <text v-if="!day.isToday" class="day-number">{{ day.dayNumber }}</text>
+                            <text v-if="day.isToday" class="today-label">今天</text>
+                        </view>
+                    </view>
+                </scroll-view>
+            </view>
+
+            <!-- 时间段选择区域 -->
+            <view class="time-slots-section">
+                <!-- 加载状态 -->
+                <view v-if="loadingTimeSlots" class="loading-container">
+                    <u-loading-icon mode="circle"></u-loading-icon>
+                    <text class="loading-text">加载详细时段中...</text>
+                </view>
+
+                <!-- 分组时间段列表 -->
+                <view v-else-if="timeSlots.length > 0" class="grouped-time-slots">
+                    <!-- 上午时段组 -->
+                    <view v-if="groupedTimeSlots.morning.length > 0" class="time-group">
+                        <view class="group-header">
+                            <text class="group-title">上午时段</text>
+                        </view>
+                        <view class="slots-grid">
+                            <view 
+                                v-for="slot in groupedTimeSlots.morning" 
+                                :key="slot.id"
+                                class="detail-slot-card"
+                                :class="{ disabled: !slot.available }"
+                                @click="handleTimeSlotClick(slot)"
+                            >
+                                <view class="slot-time">{{ slot.timeRange }}</view>
+                                <view class="slot-counselor">{{ slot.counselorName }}</view>
+                                <view class="slot-status-tag">
+                                    <u-tag 
+                                        :text="getSlotStatusText(slot)"
+                                        :type="getSlotStatusType(slot)"
+                                        size="mini"
+                                    ></u-tag>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+
+                    <!-- 下午时段组 -->
+                    <view v-if="groupedTimeSlots.afternoon.length > 0" class="time-group">
+                        <view class="group-header">
+                            <text class="group-title">下午时段</text>
+                        </view>
+                        <view class="slots-grid">
+                            <view 
+                                v-for="slot in groupedTimeSlots.afternoon" 
+                                :key="slot.id"
+                                class="detail-slot-card"
+                                :class="{ disabled: !slot.available }"
+                                @click="handleTimeSlotClick(slot)"
+                            >
+                                <view class="slot-time">{{ slot.timeRange }}</view>
+                                <view class="slot-counselor">{{ slot.counselorName }}</view>
+                                <view class="slot-status-tag">
+                                    <u-tag 
+                                        :text="getSlotStatusText(slot)"
+                                        :type="getSlotStatusType(slot)"
+                                        size="mini"
+                                    ></u-tag>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+
+                <!-- 无数据状态 -->
+                <view v-else class="empty-container">
+                    <u-empty 
+                        mode="data" 
+                        text="当天暂无可预约时段"
+                        textColor="#909399"
+                        iconColor="#c8c9cc"
+                    ></u-empty>
+                </view>
+            </view>
+        </scroll-view>
+
+        <!-- 预约确认弹窗 -->
+        <u-modal 
+            :show="showBookingModal" 
+            title="确认预约"
+            confirm-text="确认预约"
+            cancel-text="取消"
+            show-cancel-button
+            closeable
+            @confirm="confirmBooking"
+            @cancel="cancelBooking"
+            @close="cancelBooking"
+        >
+            <view class="booking-modal-content">
+                <view class="booking-detail-item">
+                    <text class="detail-label">预约日期:</text>
+                    <text class="detail-value">{{ selectedBookingSlot && selectedBookingSlot.dateText }}</text>
+                </view>
+                <view class="booking-detail-item">
+                    <text class="detail-label">预约时间:</text>
+                    <text class="detail-value">{{ selectedBookingSlot && selectedBookingSlot.timeRange }}</text>
+                </view>
+                <view class="booking-detail-item">
+                    <text class="detail-label">咨询师:</text>
+                    <text class="detail-value">{{ selectedBookingSlot && selectedBookingSlot.counselorName }}</text>
+                </view>
+                
+                <!-- 咨询原因输入框 -->
+                <view class="booking-detail-item reason-item">
+                    <text class="detail-label required">咨询原因:</text>
+                </view>
+                <view class="reason-input-container">
+                    <u-textarea 
+                        v-model="consultationReason"
+                        placeholder="请简单描述您的咨询需求或困扰..."
+                        :maxlength="200"
+                        count
+                        height="120"
+                        :custom-style="{ fontSize: '28rpx', border: '1px solid #d0d7de', borderRadius: '6px' }"
+                    ></u-textarea>
+                </view>
+                
+                <view class="booking-note">
+                    <text class="note-text">请填写具体的咨询原因，提交后等待审核</text>
+                </view>
+            </view>
+        </u-modal>
+    </view>
+</template>
+
+<script>
+import { getAvailableTimeSlots, getAvailableDetailSlots, submitAppointment } from '@/api/xljk'
+
+export default {
+    name: 'XljkReservation',
+    data() {
+        return {
+            // 日期相关
+            weekDates: [],
+            selectedDate: '',
+            selectedDateText: '',
+            scrollLeft: 0,
+            
+            // 时间段相关
+            timeSlots: [],
+            groupedTimeSlots: {
+                morning: [],
+                afternoon: []
+            },
+            loadingTimeSlots: false,
+            
+            // 预约相关
+            showBookingModal: false,
+            selectedBookingSlot: null,
+            bookingLoading: false,
+            consultationReason: ''
+        }
+    },
+    onLoad() {
+        try {
+            console.log('🔍 [预约页面] 开始初始化')
+            this.initWeekDates()
+            this.selectTodayAsDefault()
+            console.log('🔍 [预约页面] 初始化完成')
+        } catch (error) {
+            console.error('🔍 [预约页面] 初始化失败:', error)
+            uni.showToast({
+                title: '页面初始化失败',
+                icon: 'error'
+            })
+        }
+    },
+    methods: {
+        // 获取时段状态文本
+        getSlotStatusText(slot) {
+            if (slot.available) {
+                return '可预约'
+            } else if (slot.isBooked) {
+                return '已约满'
+            } else if (slot.isExpired) {
+                return '已过期'
+            }
+            return '不可约'
+        },
+        
+        // 获取时段状态类型
+        getSlotStatusType(slot) {
+            if (slot.available) {
+                return 'success'
+            } else if (slot.isBooked) {
+                return 'error'
+            } else if (slot.isExpired) {
+                return 'warning'
+            }
+            return 'info'
+        },
+        
+        // 初始化一周日期数据
+        initWeekDates() {
+            const today = new Date()
+            const weekDates = []
+            
+            // 获取本周的7天
+            for (let i = 0; i < 7; i++) {
+                const date = new Date(today)
+                date.setDate(today.getDate() + i)
+                
+                const dateStr = this.formatDate(date)
+                const dayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+                
+                weekDates.push({
+                    date: dateStr,
+                    dayName: dayNames[date.getDay()],
+                    dayNumber: date.getDate(),
+                    isToday: dateStr === this.formatDate(today),
+                    fullDate: date
+                })
+            }
+            
+            this.weekDates = weekDates
+        },
+        
+        // 选择今天作为默认日期
+        selectTodayAsDefault() {
+            const today = this.formatDate(new Date())
+            this.selectDate(today, 0)
+        },
+        
+        // 选择日期
+        selectDate(date, index) {
+            this.selectedDate = date
+            this.selectedDateText = this.getDateText(date)
+            this.loadTimeSlots(date)
+        },
+        
+        // 获取日期显示文本
+        getDateText(dateStr) {
+            const date = new Date(dateStr)
+            const today = new Date()
+            
+            if (dateStr === this.formatDate(today)) {
+                return '今天'
+            }
+            
+            const tomorrow = new Date(today)
+            tomorrow.setDate(today.getDate() + 1)
+            if (dateStr === this.formatDate(tomorrow)) {
+                return '明天'
+            }
+            
+            const dayAfterTomorrow = new Date(today)
+            dayAfterTomorrow.setDate(today.getDate() + 2)
+            if (dateStr === this.formatDate(dayAfterTomorrow)) {
+                return '后天'
+            }
+            
+            return `${date.getMonth() + 1}月${date.getDate()}日`
+        },
+        
+        // 加载时间段数据 - 优化为加载详细时段
+        async loadTimeSlots(date) {
+            this.loadingTimeSlots = true
+            this.timeSlots = []
+            this.groupedTimeSlots = { morning: [], afternoon: [] }
+            
+            try {
+                // 1. 先获取大时段列表 - 增加参数验证
+                if (!date) {
+                    throw new Error('日期参数无效')
+                }
+                
+                console.log('🔍 开始获取大时段数据，日期:', date)
+                const bigSlotsResponse = await getAvailableTimeSlots(date, date)
+                console.log('🔍 大时段API返回:', bigSlotsResponse)
+                
+                // 验证API响应结构
+                if (!bigSlotsResponse || typeof bigSlotsResponse !== 'object') {
+                    throw new Error('API响应格式异常')
+                }
+                
+                if (bigSlotsResponse.code === 200 && bigSlotsResponse.data && bigSlotsResponse.data.length > 0) {
+                    // 2. 并行获取所有详细时段 - 增加数据安全性检查
+                    const detailPromises = bigSlotsResponse.data
+                        .filter(bigSlot => bigSlot && bigSlot.timeSlot) // 过滤无效数据
+                        .map(bigSlot => 
+                            getAvailableDetailSlots(date, bigSlot.timeSlot)
+                                .then(response => ({
+                                    bigSlot,
+                                    detailSlots: response && response.data ? response.data : []
+                                }))
+                                .catch(error => {
+                                    console.error(`获取时段 ${bigSlot.timeSlot} 的详细数据失败:`, error)
+                                    return { bigSlot, detailSlots: [] }
+                                })
+                        )
+                    
+                    const allDetailResults = await Promise.all(detailPromises)
+                    console.log('🔍 详细时段API返回:', allDetailResults)
+                    
+                    // 3. 扁平化并增强数据 - 增加数据安全性检查
+                    const allDetailSlots = []
+                    allDetailResults.forEach(({ bigSlot, detailSlots }) => {
+                        // 确保 bigSlot 和 detailSlots 都是有效的
+                        if (!bigSlot || !Array.isArray(detailSlots)) {
+                            console.warn('无效的时段数据:', { bigSlot, detailSlots })
+                            return
+                        }
+                        
+                        detailSlots.forEach(detail => {
+                            // 确保必要的字段存在
+                            if (!detail || !detail.timeSlot) {
+                                console.warn('无效的详细时段数据:', detail)
+                                return
+                            }
+                            
+                            try {
+                                allDetailSlots.push({
+                                    id: `${bigSlot.scheduleId || 'unknown'}_${detail.timeSlot}`,
+                                    timeRange: detail.timeSlot,
+                                    available: !detail.isBooked && !detail.isExpired,
+                                    isBooked: Boolean(detail.isBooked),
+                                    isExpired: Boolean(detail.isExpired),
+                                    counselorName: bigSlot.counselorName || '未知咨询师',
+                                    counselorId: bigSlot.counselorId || null,
+                                    counselorAvatar: '',
+                                    dateText: this.selectedDateText || '',
+                                    originalData: {
+                                        ...detail,
+                                        parentScheduleId: bigSlot.scheduleId || null,
+                                        counselorId: bigSlot.counselorId || null,
+                                        timeSlot: bigSlot.timeSlot || null
+                                    }
+                                })
+                            } catch (err) {
+                                console.error('处理时段数据时出错:', err, { bigSlot, detail })
+                            }
+                        })
+                    })
+                    
+                    // 4. 按时间排序 - 增加安全性检查
+                    allDetailSlots.sort((a, b) => {
+                        try {
+                            // 安全地获取时间用于排序
+                            const timeA = (a.timeRange && typeof a.timeRange === 'string') ? a.timeRange.split('-')[0] : '00:00'
+                            const timeB = (b.timeRange && typeof b.timeRange === 'string') ? b.timeRange.split('-')[0] : '00:00'
+                            return timeA.localeCompare(timeB)
+                        } catch (err) {
+                            console.error('时间排序出错:', err, { a, b })
+                            return 0 // 如果排序出错，保持原顺序
+                        }
+                    })
+                    
+                    // 5. 按上午下午分组
+                    this.groupAndSetTimeSlots(allDetailSlots)
+                    
+                    console.log('🔍 最终处理的详细时段数据:', {
+                        total: allDetailSlots.length,
+                        morning: this.groupedTimeSlots.morning.length,
+                        afternoon: this.groupedTimeSlots.afternoon.length
+                    })
+                    
+                } else {
+                    // 如果没有大时段数据
+                    this.timeSlots = []
+                    this.groupedTimeSlots = { morning: [], afternoon: [] }
+                    // 移除Toast提示，避免在没有排班时显示不必要的消息
+                }
+            } catch (error) {
+                console.error('加载详细时段失败:', error)
+                
+                // 网络错误时显示友好提示
+                uni.showToast({
+                    title: '网络请求失败，请检查网络连接',
+                    icon: 'error',
+                    duration: 3000
+                })
+                
+                // 保持空数组状态
+                this.timeSlots = []
+                this.groupedTimeSlots = { morning: [], afternoon: [] }
+            } finally {
+                this.loadingTimeSlots = false
+            }
+        },
+        
+        // 按上午下午分组时段 - 增加安全性检查
+        groupAndSetTimeSlots(detailSlots) {
+            try {
+                // 确保输入是有效数组
+                if (!Array.isArray(detailSlots)) {
+                    console.warn('groupAndSetTimeSlots 接收到无效数据:', detailSlots)
+                    this.groupedTimeSlots = { morning: [], afternoon: [] }
+                    this.timeSlots = []
+                    return
+                }
+                
+                // 按上午下午分组 - 增加安全性检查
+                const morningSlots = detailSlots.filter(slot => {
+                    try {
+                        if (!slot || !slot.timeRange || typeof slot.timeRange !== 'string') {
+                            return false
+                        }
+                        const timeParts = slot.timeRange.split(':')
+                        if (timeParts.length === 0) {
+                            return false
+                        }
+                        const hour = parseInt(timeParts[0])
+                        return !isNaN(hour) && hour < 12
+                    } catch (err) {
+                        console.warn('处理上午时段时出错:', err, slot)
+                        return false
+                    }
+                })
+                
+                const afternoonSlots = detailSlots.filter(slot => {
+                    try {
+                        if (!slot || !slot.timeRange || typeof slot.timeRange !== 'string') {
+                            return false
+                        }
+                        const timeParts = slot.timeRange.split(':')
+                        if (timeParts.length === 0) {
+                            return false
+                        }
+                        const hour = parseInt(timeParts[0])
+                        return !isNaN(hour) && hour >= 12
+                    } catch (err) {
+                        console.warn('处理下午时段时出错:', err, slot)
+                        return false
+                    }
+                })
+                
+                this.groupedTimeSlots = {
+                    morning: morningSlots,
+                    afternoon: afternoonSlots
+                }
+                
+                // 保持原有的timeSlots格式兼容现有代码
+                this.timeSlots = [...morningSlots, ...afternoonSlots]
+                
+            } catch (error) {
+                console.error('分组时段时出错:', error)
+                // 发生错误时设置为空数组
+                this.groupedTimeSlots = { morning: [], afternoon: [] }
+                this.timeSlots = []
+            }
+        },
+        
+        // 刷新时间段
+        refreshTimeSlots() {
+            this.loadTimeSlots(this.selectedDate)
+        },
+        
+        // 处理时间段点击
+        handleTimeSlotClick(slot) {
+            console.log('🔍 点击时间段:', slot)
+            console.log('🔍 slot.available:', slot.available)
+            
+            if (!slot.available) {
+                let title = '该时段不可预约'
+                if (slot.isBooked) {
+                    title = '该时段已约满'
+                } else if (slot.isExpired) {
+                    title = '该时段已过期'
+                }
+                
+                uni.showToast({
+                    title: title,
+                    icon: 'none'
+                })
+                return
+            }
+            
+            this.selectedBookingSlot = slot
+            this.showBookingModal = true
+            console.log('🔍 设置弹窗显示状态:', this.showBookingModal)
+            console.log('🔍 选中的预约时段数据:', this.selectedBookingSlot)
+        },
+        
+        // 确认预约
+        async confirmBooking() {
+            if (this.bookingLoading) return
+            
+            // 验证咨询原因
+            if (!this.consultationReason || this.consultationReason.trim() === '') {
+                uni.showToast({
+                    title: '请填写咨询原因',
+                    icon: 'none'
+                })
+                return
+            }
+            
+            if (this.consultationReason.trim().length < 5) {
+                uni.showToast({
+                    title: '咨询原因至少需要5个字符',
+                    icon: 'none'
+                })
+                return
+            }
+            
+            this.bookingLoading = true
+            
+            try {
+                // 正确获取用户信息 - 使用专门的获取方法，增加错误处理
+                let userInfo = null
+                let studentId = null
+                
+                try {
+                    const { userStorage } = await import('@/common/storage')
+                    userInfo = userStorage.getUserInfo()
+                    console.log('🔍 获取到的完整用户信息:', userInfo)
+                    
+                    // 从正确的路径获取用户ID - 增加多层级安全检查
+                    if (userInfo && typeof userInfo === 'object' && userInfo.user && typeof userInfo.user === 'object') {
+                        studentId = userInfo.user.userId
+                    }
+                    
+                    console.log('🔍 解析到的学生ID:', studentId)
+                } catch (storageError) {
+                    console.error('获取用户信息失败:', storageError)
+                    throw new Error('获取用户信息失败，请重新登录')
+                }
+                
+                if (!studentId) {
+                    uni.showToast({
+                        title: '请先登录',
+                        icon: 'error'
+                    })
+                    
+                    // 跳转到登录页面
+                    setTimeout(() => {
+                        uni.reLaunch({
+                            url: '/pages/login/index'
+                        })
+                    }, 1500)
+                    return
+                }
+                
+                // 构造预约数据
+                const appointmentData = {
+                    studentId: studentId,
+                    scheduleId: this.selectedBookingSlot.originalData.parentScheduleId,
+                    counselorId: this.selectedBookingSlot.originalData.counselorId,
+                    appointmentDate: this.selectedDate,
+                    appointmentTime: this.selectedBookingSlot.originalData.timeSlot,
+                    appointmentDetailTime: this.selectedBookingSlot.timeRange,
+                    reason: this.consultationReason.trim()  // 使用用户输入的咨询原因
+                }
+                
+                // 调用真实API提交预约
+                const response = await submitAppointment(appointmentData)
+                
+                if (response.code === 200) {
+                    uni.showToast({
+                        title: '预约成功',
+                        icon: 'success'
+                    })
+                    
+                    this.showBookingModal = false
+                    this.selectedBookingSlot = null
+                    this.consultationReason = ''  // 重置咨询原因
+                    
+                    // 刷新时间段数据
+                    this.refreshTimeSlots()
+                } else {
+                    // API返回错误
+                    uni.showToast({
+                        title: response.msg || '预约失败',
+                        icon: 'error',
+                        duration: 3000
+                    })
+                }
+                
+            } catch (error) {
+                console.error('预约失败:', error)
+                
+                // 处理不同类型的错误
+                let errorMessage = '预约失败'
+                if (error.message && error.message.includes('网络')) {
+                    errorMessage = '网络请求失败，请检查网络连接'
+                } else if (error.response && error.response.data && error.response.data.msg) {
+                    errorMessage = error.response.data.msg
+                }
+                
+                uni.showToast({
+                    title: errorMessage,
+                    icon: 'error',
+                    duration: 3000
+                })
+            } finally {
+                this.bookingLoading = false
+            }
+        },
+        
+        // 取消预约弹窗
+        cancelBooking() {
+            this.showBookingModal = false
+            this.selectedBookingSlot = null
+            this.consultationReason = ''  // 重置咨询原因
+        },
+        
+
+
+
+        // 跳转到我的预约页面
+        goToMyAppointments() {
+            uni.navigateTo({
+                url: '/pages/xljk/my-appointments/index'
+            })
+        },
+        
+        // 格式化日期
+        formatDate(date) {
+            try {
+                if (!date || !(date instanceof Date)) {
+                    console.error('formatDate 接收到无效日期:', date)
+                    return new Date().toISOString().split('T')[0] // 返回今天的日期作为备用
+                }
+                
+                const year = date.getFullYear()
+                const month = String(date.getMonth() + 1).padStart(2, '0')
+                const day = String(date.getDate()).padStart(2, '0')
+                return `${year}-${month}-${day}`
+            } catch (error) {
+                console.error('格式化日期时出错:', error, date)
+                return new Date().toISOString().split('T')[0] // 返回今天的日期作为备用
+            }
+        },
+        
+        // 通用错误处理方法
+        handleError(error, context = '') {
+            console.error(`[预约页面${context}] 错误:`, error)
+            
+            // 根据错误类型显示不同的提示
+            let message = '操作失败，请稍后重试'
+            
+            if (error && error.message) {
+                if (error.message.includes('网络')) {
+                    message = '网络连接异常，请检查网络'
+                } else if (error.message.includes('登录') || error.message.includes('用户')) {
+                    message = '请重新登录'
+                } else if (error.message.includes('参数')) {
+                    message = '参数错误，请刷新页面重试'
+                } else {
+                    message = error.message
+                }
+            }
+            
+            uni.showToast({
+                title: message,
+                icon: 'none',
+                duration: 3000
+            })
+        },
+        
+
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-container {
+    min-height: 100vh;
+    background-color: #f5f5f5;
+}
+
+.main-content {
+    height: 100vh;
+    padding: 30rpx 0 0;
+    width: 100%;
+    overflow-x: hidden;
+}
+
+.week-cards-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 40rpx;
+    height: 140rpx;
+    overflow: visible; /* 确保选中状态的放大效果不被裁剪 */
+    padding: 0 20rpx; /* 左右统一边距 */
+}
+
+.my-appointments-card {
+    width: 90rpx;
+    height: 120rpx;
+    background: #ffffff;
+    border-radius: 20rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12rpx;
+    position: relative;
+    transition: all 0.3s ease;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+    flex-shrink: 0; /* 防止在flex布局中被压缩 */
+
+    .card-text-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .card-text-line {
+        font-size: 22rpx;
+        color: #1890ff;
+        font-weight: 500;
+        line-height: 1.2;
+    }
+}
+
+.week-scroll-container {
+    flex: 1;
+    height: 120rpx;
+    overflow-x: auto;
+    overflow-y: visible;
+}
+
+.week-cards-wrapper {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    white-space: nowrap;
+    padding: 0 10rpx; /* 左右留出一些空间，防止选中状态被裁剪 */
+    width: 680rpx;
+}
+
+.week-card {
+    width: 90rpx;
+    height: 120rpx;
+    background: #ffffff;
+    border: 2rpx solid transparent;
+    border-radius: 20rpx !important;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12rpx;
+    position: relative;
+    transition: all 0.3s ease;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+    flex-shrink: 0; /* 防止在flex布局中被压缩 */
+
+    &:last-child {
+        margin-right: 0; /* 最后一个卡片不需要右边距 */
+    }
+
+    &.today:not(.active) {
+        border-color: #1890ff !important;
+        border-radius: 20rpx !important;
+    }
+
+    &.active {
+        background: #1890ff !important;
+        border-color: #1890ff !important;
+        border-radius: 20rpx !important;
+        transform: scale(1.05);
+        box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
+        z-index: 10; /* 确保选中状态在最上层显示 */
+
+        .day-name,
+        .day-number,
+        .today-label {
+            color: white !important;
+        }
+    }
+
+    .day-name {
+        font-size: 22rpx;
+        color: #666;
+        margin-bottom: 6rpx;
+    }
+
+    .day-number {
+        font-size: 28rpx;
+        font-weight: 600;
+        color: #333;
+    }
+
+    .today-label {
+        font-size: 28rpx;
+        font-weight: 600;
+        color: #1890ff;
+    }
+}
+
+.time-slots-section {
+    margin-bottom: 30rpx;
+}
+
+.loading-container,
+.empty-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 80rpx 20rpx;
+
+    .loading-text {
+        font-size: 28rpx;
+        color: #999;
+        margin-top: 20rpx;
+    }
+}
+
+.grouped-time-slots {
+    padding: 0 20rpx;
+
+    .time-group {
+        margin-bottom: 40rpx;
+
+        &:last-child {
+            margin-bottom: 20rpx;
+        }
+
+        .group-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20rpx;
+            padding: 0 10rpx;
+
+            .group-title {
+                font-size: 32rpx;
+                font-weight: 600;
+                color: #333;
+                margin-right: 12rpx;
+            }
+
+            .group-count {
+                font-size: 24rpx;
+                color: #666;
+                background: rgba(24, 144, 255, 0.1);
+                padding: 4rpx 12rpx;
+                border-radius: 12rpx;
+            }
+        }
+
+        .slots-grid {
+            display: flex;
+            flex-direction: column;
+            gap: 16rpx;
+        }
+    }
+
+    .detail-slot-card {
+        background: #ffffff;
+        border-radius: 16rpx;
+        padding: 30rpx;
+        transition: all 0.3s ease;
+        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+        border: 2rpx solid transparent;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        &:not(.disabled):active {
+            transform: scale(0.96);
+            background: rgba(24, 144, 255, 0.05);
+            border-color: #1890ff;
+        }
+
+        &.disabled {
+            opacity: 0.6;
+            background: #f5f5f5;
+
+            .slot-time {
+                color: #999;
+            }
+
+            .slot-counselor {
+                color: #999;
+            }
+        }
+
+        .slot-time {
+            font-size: 32rpx;
+            font-weight: 600;
+            color: #333;
+            flex: 1;
+        }
+
+        .slot-status-tag {
+            flex: 0 0 auto;
+            margin: 0 10rpx;
+            pointer-events: none; /* 允许点击事件穿透到父元素 */
+        }
+
+        .slot-counselor {
+            font-size: 28rpx;
+            color: #666;
+            flex: 1;
+            text-align: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        /* 可用状态的特殊样式 */
+        &:not(.disabled) {
+            &:hover {
+                transform: translateY(-2rpx);
+                box-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.15);
+            }
+        }
+
+        /* 已满状态的特殊样式 */
+        &.disabled::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.05);
+            border-radius: 16rpx;
+            pointer-events: none;
+        }
+    }
+}
+
+.booking-modal-content {
+    padding: 20rpx 0;
+
+    .booking-detail-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 24rpx;
+
+        .detail-label {
+            width: 160rpx;
+            font-size: 28rpx;
+            color: #666;
+            
+            &.required::after {
+                content: '*';
+                color: #ff4757;
+                margin-left: 4rpx;
+            }
+        }
+
+        .detail-value {
+            flex: 1;
+            font-size: 28rpx;
+            color: #333;
+            font-weight: 500;
+        }
+        
+        &.reason-item {
+            margin-bottom: 16rpx;
+        }
+    }
+    
+    .reason-input-container {
+        margin-bottom: 24rpx;
+        padding: 0 4rpx;
+        border: 2rpx solid #e0e0e0;
+        border-radius: 12rpx;
+        background-color: #fafafa;
+    }
+
+    .booking-note {
+        background: rgba(255, 193, 7, 0.1);
+        border: 1rpx solid rgba(255, 193, 7, 0.3);
+        border-radius: 12rpx;
+        padding: 20rpx;
+        margin-top: 30rpx;
+
+        .note-text {
+            font-size: 26rpx;
+            color: #f57c00;
+            line-height: 1.4;
+        }
+    }
+}
+</style>