diff --git a/server/MiAssessment/src/MiAssessment.Api/Controllers/PlannerController.cs b/server/MiAssessment/src/MiAssessment.Api/Controllers/PlannerController.cs
index 9444e67..457804d 100644
--- a/server/MiAssessment/src/MiAssessment.Api/Controllers/PlannerController.cs
+++ b/server/MiAssessment/src/MiAssessment.Api/Controllers/PlannerController.cs
@@ -57,4 +57,36 @@ public class PlannerController : ControllerBase
             return ApiResponse<List<PlannerDto>>.Fail("获取规划师列表失败");
         }
     }
+
+    /// <summary>
+    /// 获取规划师详情
+    /// </summary>
+    /// <remarks>
+    /// GET /api/planner/getDetail?plannerId=1
+    /// 
+    /// 返回指定规划师的详细信息，仅返回启用状态且未删除的规划师
+    /// 不需要用户登录认证
+    /// Requirements: 10.2
+    /// </remarks>
+    /// <param name="plannerId">规划师ID</param>
+    /// <returns>规划师详情</returns>
+    [HttpGet("getDetail")]
+    [ProducesResponseType(typeof(ApiResponse<PlannerDto>), StatusCodes.Status200OK)]
+    public async Task<ApiResponse<PlannerDto>> GetDetail([FromQuery] long plannerId)
+    {
+        try
+        {
+            var planner = await _plannerService.GetDetailAsync(plannerId);
+            if (planner == null)
+            {
+                return ApiResponse<PlannerDto>.Fail("规划师不存在", 3500);
+            }
+            return ApiResponse<PlannerDto>.Success(planner);
+        }
+        catch (Exception ex)
+        {
+            _logger.LogError(ex, "Failed to get planner detail, plannerId={PlannerId}", plannerId);
+            return ApiResponse<PlannerDto>.Fail("获取规划师详情失败");
+        }
+    }
 }
diff --git a/server/MiAssessment/src/MiAssessment.Core/Interfaces/IPlannerService.cs b/server/MiAssessment/src/MiAssessment.Core/Interfaces/IPlannerService.cs
index d899eae..a585d25 100644
--- a/server/MiAssessment/src/MiAssessment.Core/Interfaces/IPlannerService.cs
+++ b/server/MiAssessment/src/MiAssessment.Core/Interfaces/IPlannerService.cs
@@ -2,6 +2,9 @@ using MiAssessment.Model.Models.Planner;
 
 namespace MiAssessment.Core.Interfaces;
 
+/// <summary>
+/// 规划师服务接口
+/// </summary>
 /// <summary>
 /// 规划师服务接口
 /// </summary>
@@ -15,4 +18,12 @@ public interface IPlannerService
     /// </remarks>
     /// <returns>规划师列表</returns>
     Task<List<PlannerDto>> GetListAsync();
+
+    /// <summary>
+    /// 获取规划师详情
+    /// </summary>
+    /// <param name="plannerId">规划师ID</param>
+    /// <returns>规划师详情，不存在则返回null</returns>
+    Task<PlannerDto?> GetDetailAsync(long plannerId);
 }
+
diff --git a/server/MiAssessment/src/MiAssessment.Core/Services/PlannerService.cs b/server/MiAssessment/src/MiAssessment.Core/Services/PlannerService.cs
index d67078a..d84414b 100644
--- a/server/MiAssessment/src/MiAssessment.Core/Services/PlannerService.cs
+++ b/server/MiAssessment/src/MiAssessment.Core/Services/PlannerService.cs
@@ -51,4 +51,32 @@ public class PlannerService : IPlannerService
         _logger.LogDebug("获取到 {Count} 条规划师记录", planners.Count);
         return planners;
     }
+
+    /// <inheritdoc />
+    public async Task<PlannerDto?> GetDetailAsync(long plannerId)
+    {
+        _logger.LogDebug("获取规划师详情, plannerId={PlannerId}", plannerId);
+
+        var planner = await _dbContext.Planners
+            .AsNoTracking()
+            .Where(p => p.Id == plannerId && p.Status == 1 && !p.IsDeleted)
+            .Select(p => new PlannerDto
+            {
+                Id = p.Id,
+                Name = p.Name,
+                Avatar = p.Avatar,
+                Title = p.Title,
+                Introduction = p.Introduction,
+                Tags = p.Tags,
+                Price = p.Price
+            })
+            .FirstOrDefaultAsync();
+
+        if (planner == null)
+        {
+            _logger.LogWarning("规划师不存在或已禁用, plannerId={PlannerId}", plannerId);
+        }
+
+        return planner;
+    }
 }
diff --git a/uniapp/pages.json b/uniapp/pages.json
index ceb1d91..6381445 100644
--- a/uniapp/pages.json
+++ b/uniapp/pages.json
@@ -96,7 +96,7 @@
     {
       "path": "pages/planner/book/index",
       "style": {
-        "navigationBarTitleText": "预约规划"
+        "navigationBarTitleText": "学业规划"
       }
     },
     {
diff --git a/uniapp/pages/planner/book/index.vue b/uniapp/pages/planner/book/index.vue
index fb01aa8..ffb3029 100644
--- a/uniapp/pages/planner/book/index.vue
+++ b/uniapp/pages/planner/book/index.vue
@@ -1,21 +1,22 @@
 <script setup>
 /**
  * 规划预约页面
- * 
+ *
  * 功能：
- * - 规划师信息展示
- * - 日期时间选择
- * - 表单填写：姓名、手机号、年级、成绩（根据年级动态显示）
+ * - 规划时间选择（日期+时间两步选择）
+ * - 个人信息填写：姓名、联系方式、所在年级
+ * - 根据年级动态显示：各科最近成绩 或 专业名称
+ * - 家庭氛围、期望填写
  * - 支付预约
  * - 预约成功弹窗
  */
 
-import { ref, computed, watch, onMounted } from 'vue'
+import { ref, computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { useUserStore } from '@/store/user.js'
 import { useAuth } from '@/composables/useAuth.js'
 import { usePayment } from '@/composables/usePayment.js'
-import { getPlannerDetail, getAvailableTime } from '@/api/planner.js'
+import { getPlannerDetail } from '@/api/planner.js'
 import { isPhone } from '@/utils/validate.js'
 
 const userStore = useUserStore()
@@ -28,99 +29,103 @@ const plannerName = ref('')
 
 // 规划师信息
 const plannerInfo = ref({
-  id: 0,
-  name: '',
-  avatar: '',
-  introduction: '',
-  price: 0
+  id: 0, name: '', avatar: '', introduction: '', price: 0
 })
 
-// 日期选择
+// 规划时间（两步选择：先日期后时间）
 const selectedDate = ref('')
-const dateList = ref([])
-const currentDateIndex = ref(0)
-
-// 时间选择
 const selectedTime = ref('')
-const timeList = ref([])
-const timeLoading = ref(false)
+const dateTimeDisplay = ref('')
+const showTimePicker = ref(false)
+
+// 可选时间列表
+const timeOptions = [
+  '09:00', '10:00', '11:00', '12:00',
+  '13:00', '14:00', '15:00', '16:00',
+  '17:00', '18:00', '19:00', '20:00'
+]
 
 // 表单数据
 const formData = ref({
-  name: '',
-  phone: '',
-  grade: '',
-  score: ''
+  name: '', phone: '', grade: '',
+  majorName: '', familyAtmosphere: '', expectation: ''
+})
+
+// 各科成绩
+const scores = ref({
+  chinese: '', math: '', english: '',
+  physics: '', chemistry: '', biology: '',
+  geography: '', politics: ''
 })
 
 // 年级选项
-const gradeOptions = [
-  '小学一年级', '小学二年级', '小学三年级', '小学四年级', '小学五年级', '小学六年级',
-  '初一', '初二', '初三',
-  '高一', '高二', '高三',
-  '大一', '大二', '大三', '大四',
-  '研究生', '其他'
-]
+const gradeOptions = ['小学', '初中', '高中', '大专', '本科', '研究生及以上']
 const gradeIndex = ref(-1)
 
-// 需要显示成绩的年级
-const gradesWithScore = ['初一', '初二', '初三', '高一', '高二', '高三']
-
-// 是否显示成绩字段
-const showScoreField = computed(() => {
-  return gradesWithScore.includes(formData.value.grade)
+// 根据年级判断分类
+const gradeCategory = computed(() => {
+  const g = formData.value.grade
+  if (g === '小学') return 'primary'
+  if (g === '初中' || g === '高中') return 'secondary'
+  if (g === '大专' || g === '本科' || g === '研究生及以上') return 'college'
+  return ''
 })
 
-// 页面加载状态
+// 是否显示各科成绩
+const showScores = computed(() => {
+  return gradeCategory.value === 'primary' || gradeCategory.value === 'secondary'
+})
+
+// 是否显示专业名称
+const showMajor = computed(() => {
+  return gradeCategory.value === 'college'
+})
+
+// 当前年级需要显示的科目列表
+const subjectList = computed(() => {
+  if (gradeCategory.value === 'primary') {
+    return [
+      { key: 'chinese', label: '语文', required: true },
+      { key: 'math', label: '数学', required: true },
+      { key: 'english', label: '英语', required: true }
+    ]
+  }
+  if (gradeCategory.value === 'secondary') {
+    return [
+      { key: 'chinese', label: '语文', required: true },
+      { key: 'math', label: '数学', required: true },
+      { key: 'english', label: '英语', required: true },
+      { key: 'physics', label: '物理', required: false },
+      { key: 'chemistry', label: '化学', required: false },
+      { key: 'biology', label: '生物', required: false },
+      { key: 'geography', label: '地理', required: false },
+      { key: 'politics', label: '政治', required: false }
+    ]
+  }
+  return []
+})
+
+// 页面状态
 const pageLoading = ref(true)
 const submitting = ref(false)
-
-// 预约成功弹窗
 const showSuccessPopup = ref(false)
-const bookingInfo = ref({
-  date: '',
-  time: '',
-  plannerName: ''
-})
 
 /**
- * 生成日期列表（未来7天）
+ * 表单是否填写完整
  */
-function generateDateList() {
-  const list = []
-  const today = new Date()
-  const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
-  
-  for (let i = 0; i < 7; i++) {
-    const date = new Date(today)
-    date.setDate(today.getDate() + i)
-    
-    const year = date.getFullYear()
-    const month = String(date.getMonth() + 1).padStart(2, '0')
-    const day = String(date.getDate()).padStart(2, '0')
-    const dateStr = `${year}-${month}-${day}`
-    
-    let label = ''
-    if (i === 0) {
-      label = '今天'
-    } else if (i === 1) {
-      label = '明天'
-    } else {
-      label = weekDays[date.getDay()]
-    }
-    
-    list.push({
-      date: dateStr,
-      label: label,
-      day: `${month}/${day}`
-    })
+const isFormComplete = computed(() => {
+  if (!selectedDate.value || !selectedTime.value) return false
+  if (!formData.value.name.trim()) return false
+  if (!formData.value.phone.trim()) return false
+  if (!formData.value.grade) return false
+  if (showScores.value) {
+    if (!scores.value.chinese.trim() || !scores.value.math.trim() || !scores.value.english.trim()) return false
   }
-  
-  dateList.value = list
-  if (list.length > 0) {
-    selectedDate.value = list[0].date
-  }
-}
+  if (showMajor.value && !formData.value.majorName.trim()) return false
+  if (!formData.value.familyAtmosphere.trim()) return false
+  if (!formData.value.expectation.trim()) return false
+  return true
+})
 
 /**
  * 加载规划师详情
@@ -132,12 +137,11 @@ async function loadPlannerDetail() {
       plannerInfo.value = {
         id: res.data.id || plannerId.value,
         name: res.data.name || plannerName.value || '规划师',
-        avatar: res.data.avatar || res.data.photo || '',
+        avatar: res.data.avatar || '',
         introduction: res.data.introduction || '',
         price: res.data.price || 0
       }
     } else {
-      // 使用传入的参数
       plannerInfo.value.name = plannerName.value || '规划师'
     }
   } catch (error) {
@@ -147,82 +151,50 @@ async function loadPlannerDetail() {
 }
 
 /**
- * 加载可预约时间
+ * 获取日期选择器起始日期
  */
-async function loadAvailableTime() {
-  if (!selectedDate.value) return
-  
-  timeLoading.value = true
-  timeList.value = []
-  selectedTime.value = ''
-  
-  try {
-    const res = await getAvailableTime(plannerId.value, selectedDate.value)
-    if (res && res.code === 0 && res.data) {
-      // 支持多种数据格式
-      if (Array.isArray(res.data)) {
-        timeList.value = res.data.map(item => {
-          if (typeof item === 'string') {
-            return { time: item, available: true }
-          }
-          return {
-            time: item.time || item.timeSlot || '',
-            available: item.available !== false
-          }
-        })
-      } else if (res.data.list && Array.isArray(res.data.list)) {
-        timeList.value = res.data.list.map(item => ({
-          time: item.time || item.timeSlot || '',
-          available: item.available !== false
-        }))
-      }
-    }
-    
-    // 如果没有数据，生成默认时间段
-    if (timeList.value.length === 0) {
-      timeList.value = generateDefaultTimeSlots()
-    }
-  } catch (error) {
-    console.error('加载可预约时间失败:', error)
-    // 使用默认时间段
-    timeList.value = generateDefaultTimeSlots()
-  } finally {
-    timeLoading.value = false
-  }
+function getStartDate() {
+  const now = new Date()
+  const y = now.getFullYear()
+  const m = String(now.getMonth() + 1).padStart(2, '0')
+  const d = String(now.getDate()).padStart(2, '0')
+  return `${y}-${m}-${d}`
 }
 
 /**
- * 生成默认时间段
+ * 获取日期选择器结束日期
  */
-function generateDefaultTimeSlots() {
-  const slots = []
-  const times = [
-    '09:00', '10:00', '11:00',
-    '14:00', '15:00', '16:00', '17:00',
-    '19:00', '20:00'
-  ]
-  
-  times.forEach(time => {
-    slots.push({ time, available: true })
-  })
-  
-  return slots
+function getEndDate() {
+  const now = new Date()
+  return `${now.getFullYear() + 1}-12-31`
 }
 
 /**
- * 选择日期
+ * 选择日期后弹出时间选择
  */
-function selectDate(index) {
-  currentDateIndex.value = index
-  selectedDate.value = dateList.value[index].date
+function onDateChange(e) {
+  selectedDate.value = e.detail.value
+  showTimePicker.value = true
 }
 
 /**
  * 选择时间
  */
-function selectTime(item) {
-  if (!item.available) return
-  selectedTime.value = item.time
+function onTimePick(time) {
+  selectedTime.value = time
+  showTimePicker.value = false
+  const p = selectedDate.value.split('-')
+  dateTimeDisplay.value = `${p[0]}年${parseInt(p[1])}月${parseInt(p[2])}日 ${time}`
+}
+
+/**
+ * 关闭时间选择弹窗
+ */
+function closeTimePicker() {
+  showTimePicker.value = false
+  if (!selectedTime.value) {
+    selectedDate.value = ''
+  }
 }
 
 /**
@@ -231,66 +203,42 @@ function selectTime(item) {
 function onGradeChange(e) {
   gradeIndex.value = e.detail.value
   formData.value.grade = gradeOptions[e.detail.value]
-  // 切换年级时清空成绩
-  if (!showScoreField.value) {
-    formData.value.score = ''
+  scores.value = {
+    chinese: '', math: '', english: '',
+    physics: '', chemistry: '', biology: '',
+    geography: '', politics: ''
   }
+  formData.value.majorName = ''
 }
 
-/**
- * 表单是否填写完整
- */
-const isFormComplete = computed(() => {
-  const baseComplete = (
-    selectedDate.value !== '' &&
-    selectedTime.value !== '' &&
-    formData.value.name.trim() !== '' &&
-    formData.value.phone.trim() !== '' &&
-    formData.value.grade !== ''
-  )
-  
-  // 如果需要显示成绩字段，则成绩也必填
-  if (showScoreField.value) {
-    return baseComplete && formData.value.score.trim() !== ''
-  }
-  
-  return baseComplete
-})
-
 /**
  * 验证表单
  */
 function validateForm() {
-  if (!selectedDate.value) {
-    uni.showToast({ title: '请选择预约日期', icon: 'none' })
-    return false
+  if (!selectedDate.value || !selectedTime.value) {
+    uni.showToast({ title: '请选择规划时间', icon: 'none' }); return false
   }
-  
-  if (!selectedTime.value) {
-    uni.showToast({ title: '请选择预约时间', icon: 'none' })
-    return false
-  }
-  
   if (!formData.value.name.trim()) {
-    uni.showToast({ title: '请输入姓名', icon: 'none' })
-    return false
+    uni.showToast({ title: '请输入姓名', icon: 'none' }); return false
   }
-  
   if (!isPhone(formData.value.phone)) {
-    uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
-    return false
+    uni.showToast({ title: '请输入正确的联系方式', icon: 'none' }); return false
   }
-  
   if (!formData.value.grade) {
-    uni.showToast({ title: '请选择年级', icon: 'none' })
-    return false
+    uni.showToast({ title: '请选择所在年级', icon: 'none' }); return false
   }
-  
-  if (showScoreField.value && !formData.value.score.trim()) {
-    uni.showToast({ title: '请输入成绩', icon: 'none' })
-    return false
+  if (showScores.value && (!scores.value.chinese.trim() || !scores.value.math.trim() || !scores.value.english.trim())) {
+    uni.showToast({ title: '请填写必填科目成绩', icon: 'none' }); return false
+  }
+  if (showMajor.value && !formData.value.majorName.trim()) {
+    uni.showToast({ title: '请输入专业名称', icon: 'none' }); return false
+  }
+  if (!formData.value.familyAtmosphere.trim()) {
+    uni.showToast({ title: '请输入家庭氛围', icon: 'none' }); return false
+  }
+  if (!formData.value.expectation.trim()) {
+    uni.showToast({ title: '请输入期望', icon: 'none' }); return false
   }
-  
   return true
 }
 
@@ -299,57 +247,48 @@ function validateForm() {
  */
 async function handleSubmit() {
   if (!isFormComplete.value) return
-  
-  // 检查登录
   if (!checkLogin()) return
-  
-  // 验证表单
   if (!validateForm()) return
-  
+
   submitting.value = true
-  
   try {
     uni.showLoading({ title: '创建订单中...' })
-    
-    // 发起支付
+
+    // 构建成绩数据
+    const scoreData = {}
+    if (showScores.value) {
+      subjectList.value.forEach(s => {
+        if (scores.value[s.key]) scoreData[s.key] = scores.value[s.key]
+      })
+    }
+
     const result = await processPayment({
-      productType: 2, // 规划预约类型
+      productType: 2,
       productId: plannerId.value,
       userInfo: {
         name: formData.value.name,
         phone: formData.value.phone,
         grade: formData.value.grade,
-        score: formData.value.score || '',
-        bookDate: selectedDate.value,
-        bookTime: selectedTime.value,
+        majorName: formData.value.majorName || '',
+        scores: scoreData,
+        familyAtmosphere: formData.value.familyAtmosphere,
+        expectation: formData.value.expectation,
+        bookDateTime: `${selectedDate.value} ${selectedTime.value}`,
         plannerId: plannerId.value,
         plannerName: plannerInfo.value.name
       }
     })
-    
+
     uni.hideLoading()
-    
     if (result.success) {
-      // 支付成功，显示预约成功弹窗
-      bookingInfo.value = {
-        date: selectedDate.value,
-        time: selectedTime.value,
-        plannerName: plannerInfo.value.name
-      }
       showSuccessPopup.value = true
     } else if (result.error) {
-      uni.showToast({
-        title: result.error,
-        icon: 'none'
-      })
+      uni.showToast({ title: result.error, icon: 'none' })
     }
   } catch (error) {
     uni.hideLoading()
     console.error('预约失败:', error)
-    uni.showToast({
-      title: '预约失败，请重试',
-      icon: 'none'
-    })
+    uni.showToast({ title: '预约失败，请重试', icon: 'none' })
   } finally {
     submitting.value = false
   }
@@ -360,268 +299,154 @@ async function handleSubmit() {
  */
 function closeSuccessPopup() {
   showSuccessPopup.value = false
-  // 返回上一页或跳转到订单列表
   uni.navigateBack()
 }
 
-/**
- * 查看订单
- */
-function goToOrderList() {
-  showSuccessPopup.value = false
-  uni.navigateTo({
-    url: '/pages/order/list/index'
-  })
-}
-
-/**
- * 格式化价格
- */
-function formatPrice(price) {
-  if (price === undefined || price === null) return '0'
-  const num = Number(price)
-  if (isNaN(num)) return '0'
-  if (Number.isInteger(num)) return num.toString()
-  return num.toFixed(2)
-}
-
-// 监听日期变化，加载对应时间段
-watch(selectedDate, () => {
-  loadAvailableTime()
-})
-
 /**
  * 页面加载
  */
 onLoad(async (options) => {
   plannerId.value = Number(options.plannerId) || 0
   plannerName.value = decodeURIComponent(options.plannerName || '')
-  
-  // 恢复用户登录状态
   userStore.restoreFromStorage()
-  
-  // 如果已登录，预填手机号
   if (userStore.isLoggedIn && userStore.phone) {
     formData.value.phone = userStore.phone
   }
-  
-  // 生成日期列表
-  generateDateList()
-  
-  // 加载规划师详情
   await loadPlannerDetail()
-  
   pageLoading.value = false
 })
 </script>
 
 <template>
-  <view class="planner-book-page">
-    <!-- 页面内容 -->
+  <view class="book-page">
     <view class="page-content">
-      <!-- 规划师信息卡片 -->
-      <view class="planner-card">
-        <image 
-          :src="plannerInfo.avatar || '/static/ic_empty.png'" 
-          mode="aspectFill"
-          class="planner-avatar"
-        />
-        <view class="planner-info">
-          <view class="planner-name">{{ plannerInfo.name }}</view>
-          <view class="planner-intro">{{ plannerInfo.introduction || '专业学业规划师' }}</view>
-        </view>
-        <view class="planner-price">
-          <text class="price-symbol">¥</text>
-          <text class="price-value">{{ formatPrice(plannerInfo.price) }}</text>
-          <text class="price-unit">/次</text>
-        </view>
-      </view>
-      
-      <!-- 日期选择 -->
-      <view class="section">
-        <view class="section-title">选择日期</view>
-        <scroll-view scroll-x class="date-scroll">
-          <view class="date-list">
-            <view 
-              v-for="(item, index) in dateList"
-              :key="item.date"
-              class="date-item"
-              :class="{ 'active': currentDateIndex === index }"
-              @click="selectDate(index)"
-            >
-              <view class="date-label">{{ item.label }}</view>
-              <view class="date-day">{{ item.day }}</view>
-            </view>
-          </view>
-        </scroll-view>
-      </view>
-      
-      <!-- 时间选择 -->
-      <view class="section">
-        <view class="section-title">选择时间</view>
-        <view v-if="timeLoading" class="time-loading">
-          <text>加载中...</text>
-        </view>
-        <view v-else-if="timeList.length === 0" class="time-empty">
-          <text>暂无可预约时间</text>
-        </view>
-        <view v-else class="time-grid">
-          <view 
-            v-for="item in timeList"
-            :key="item.time"
-            class="time-item"
-            :class="{ 
-              'active': selectedTime === item.time,
-              'disabled': !item.available 
-            }"
-            @click="selectTime(item)"
+      <!-- 主卡片 -->
+      <view class="main-card">
+        <!-- 规划时间 -->
+        <view class="section-block">
+          <view class="section-title">我的规划时间</view>
+          <picker
+            mode="date"
+            :start="getStartDate()"
+            :end="getEndDate()"
+            @change="onDateChange"
           >
-            {{ item.time }}
-          </view>
-        </view>
-      </view>
-      
-      <!-- 表单区域 -->
-      <view class="section form-section">
-        <view class="section-title">填写信息</view>
-        
-        <!-- 姓名 -->
-        <view class="form-item">
-          <view class="form-label">
-            <text class="required">*</text>
-            <text>姓名</text>
-          </view>
-          <input 
-            class="form-input" 
-            type="text" 
-            placeholder="请输入姓名"
-            v-model="formData.name"
-            maxlength="20"
-          />
-        </view>
-        
-        <!-- 手机号 -->
-        <view class="form-item">
-          <view class="form-label">
-            <text class="required">*</text>
-            <text>手机号</text>
-          </view>
-          <input 
-            class="form-input" 
-            type="number" 
-            placeholder="请输入手机号"
-            v-model="formData.phone"
-            maxlength="11"
-          />
-        </view>
-        
-        <!-- 年级 -->
-        <view class="form-item">
-          <view class="form-label">
-            <text class="required">*</text>
-            <text>年级</text>
-          </view>
-          <picker 
-            mode="selector" 
-            :range="gradeOptions"
-            @change="onGradeChange"
-          >
-            <view class="form-picker">
-              <text :class="{ 'placeholder': !formData.grade }">
-                {{ formData.grade || '请选择年级' }}
-              </text>
-              <view class="picker-arrow"></view>
+            <view class="datetime-picker">
+              <text class="picker-label">规划时间</text>
+              <text v-if="!dateTimeDisplay" class="picker-placeholder">请选择 〉</text>
+              <text v-else class="picker-value">{{ dateTimeDisplay }} 〉</text>
             </view>
           </picker>
         </view>
-        
-        <!-- 成绩（根据年级动态显示） -->
-        <view v-if="showScoreField" class="form-item">
-          <view class="form-label">
-            <text class="required">*</text>
-            <text>成绩</text>
+
+        <!-- 个人信息 -->
+        <view class="section-block">
+          <view class="section-title">您的个人信息</view>
+
+          <!-- 姓名 -->
+          <view class="field-group">
+            <view class="field-label"><text class="required">*</text><text>姓名</text></view>
+            <input class="field-input" type="text" placeholder="请输入" v-model="formData.name" maxlength="20" />
+          </view>
+
+          <!-- 联系方式 -->
+          <view class="field-group">
+            <view class="field-label"><text class="required">*</text><text>联系方式</text></view>
+            <input class="field-input" type="number" placeholder="请输入" v-model="formData.phone" maxlength="11" />
+          </view>
+
+          <!-- 所在年级 -->
+          <view class="field-group">
+            <view class="field-label"><text class="required">*</text><text>所在年级</text></view>
+            <picker mode="selector" :range="gradeOptions" @change="onGradeChange">
+              <view class="field-select">
+                <text :class="{ 'placeholder-text': !formData.grade }">{{ formData.grade || '请选择' }}</text>
+                <text class="select-arrow">∨</text>
+              </view>
+            </picker>
+          </view>
+
+          <!-- 各科最近成绩（小学/初中/高中） -->
+          <view v-if="showScores" class="scores-section">
+            <view class="section-subtitle">各科最近成绩</view>
+            <view v-for="subject in subjectList" :key="subject.key" class="score-item">
+              <view class="score-label">
+                <text v-if="subject.required" class="required">*</text>
+                <text>{{ subject.label }}</text>
+              </view>
+              <input class="score-input" type="text" placeholder="请输入" v-model="scores[subject.key]" maxlength="20" />
+            </view>
+          </view>
+
+          <!-- 专业名称（大专/本科/研究生及以上） -->
+          <view v-if="showMajor" class="field-group">
+            <view class="field-label"><text class="required">*</text><text>专业名称</text></view>
+            <input class="field-input" type="text" placeholder="请输入" v-model="formData.majorName" maxlength="50" />
+          </view>
+
+          <!-- 家庭氛围 -->
+          <view class="field-group">
+            <view class="field-label"><text class="required">*</text><text>家庭氛围</text></view>
+            <input class="field-input" type="text" placeholder="请输入" v-model="formData.familyAtmosphere" maxlength="200" />
+          </view>
+
+          <!-- 期望 -->
+          <view class="field-group">
+            <view class="field-label"><text class="required">*</text><text>期望</text></view>
+            <input class="field-input" type="text" placeholder="请输入" v-model="formData.expectation" maxlength="200" />
           </view>
-          <input 
-            class="form-input" 
-            type="text" 
-            placeholder="请输入近期考试成绩/排名"
-            v-model="formData.score"
-            maxlength="50"
-          />
         </view>
       </view>
-      
-      <!-- 底部占位 -->
+
       <view class="bottom-placeholder"></view>
     </view>
-    
+
     <!-- 底部按钮 -->
     <view class="bottom-bar">
-      <view class="price-info">
-        <text class="price-label">合计：</text>
-        <text class="price-symbol">¥</text>
-        <text class="price-amount">{{ formatPrice(plannerInfo.price) }}</text>
-      </view>
-      <view 
-        class="submit-btn"
-        :class="{ 'disabled': !isFormComplete || submitting }"
-        @click="handleSubmit"
-      >
-        {{ submitting ? '提交中...' : '立即预约' }}
+      <view class="submit-btn" :class="{ 'disabled': !isFormComplete || submitting }" @click="handleSubmit">
+        {{ submitting ? '提交中...' : '确定并支付预付费' }}
       </view>
     </view>
-    
+
+    <!-- 时间选择弹窗 -->
+    <view v-if="showTimePicker" class="popup-mask" @click="closeTimePicker">
+      <view class="time-popup" @click.stop>
+        <view class="time-popup-header">
+          <text class="time-popup-title">选择时间</text>
+          <text class="time-popup-close" @click="closeTimePicker">✕</text>
+        </view>
+        <view class="time-grid">
+          <view
+            v-for="time in timeOptions"
+            :key="time"
+            class="time-option"
+            :class="{ 'active': selectedTime === time }"
+            @click="onTimePick(time)"
+          >{{ time }}</view>
+        </view>
+      </view>
+    </view>
+
     <!-- 预约成功弹窗 -->
     <view v-if="showSuccessPopup" class="popup-mask" @click.stop>
       <view class="success-popup">
-        <!-- 成功图标 -->
         <view class="success-icon">
-          <view class="icon-circle">
-            <text class="icon-check">✓</text>
-          </view>
+          <view class="icon-circle"><text class="icon-check">✓</text></view>
         </view>
-        
-        <!-- 成功标题 -->
         <view class="success-title">预约成功</view>
-        
-        <!-- 预约信息 -->
-        <view class="booking-info">
-          <view class="info-item">
-            <text class="info-label">规划师：</text>
-            <text class="info-value">{{ bookingInfo.plannerName }}</text>
-          </view>
-          <view class="info-item">
-            <text class="info-label">预约日期：</text>
-            <text class="info-value">{{ bookingInfo.date }}</text>
-          </view>
-          <view class="info-item">
-            <text class="info-label">预约时间：</text>
-            <text class="info-value">{{ bookingInfo.time }}</text>
-          </view>
-        </view>
-        
-        <!-- 提示文字 -->
-        <view class="success-tip">
-          规划师将在预约时间与您联系，请保持手机畅通
-        </view>
-        
-        <!-- 按钮 -->
-        <view class="popup-buttons">
-          <view class="popup-btn secondary" @click="closeSuccessPopup">返回</view>
-          <view class="popup-btn primary" @click="goToOrderList">查看订单</view>
-        </view>
+        <view class="success-subtitle">请等待规划师联系您</view>
+        <view class="confirm-btn" @click="closeSuccessPopup">确定</view>
       </view>
     </view>
   </view>
 </template>
 
-
 <style lang="scss" scoped>
 @import '@/styles/variables.scss';
 
-.planner-book-page {
+.book-page {
   min-height: 100vh;
-  background-color: $bg-color;
+  background: linear-gradient(180deg, #FFF5E6 0%, $bg-color 30%);
 }
 
 .page-content {
@@ -629,238 +454,139 @@ onLoad(async (options) => {
   padding-bottom: 180rpx;
 }
 
-// 规划师信息卡片
-.planner-card {
-  display: flex;
-  align-items: center;
+// 主卡片
+.main-card {
   background-color: $bg-white;
   border-radius: $border-radius-lg;
-  padding: $spacing-lg;
-  margin-bottom: $spacing-lg;
-  box-shadow: $shadow-sm;
-  
-  .planner-avatar {
-    width: 120rpx;
-    height: 120rpx;
-    border-radius: $border-radius-md;
-    flex-shrink: 0;
-    margin-right: $spacing-md;
-  }
-  
-  .planner-info {
-    flex: 1;
-    min-width: 0;
-    
-    .planner-name {
-      font-size: $font-size-lg;
-      font-weight: $font-weight-medium;
-      color: $text-color;
-      margin-bottom: $spacing-xs;
-    }
-    
-    .planner-intro {
-      font-size: $font-size-sm;
-      color: $text-secondary;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-  
-  .planner-price {
-    display: flex;
-    align-items: baseline;
-    flex-shrink: 0;
-    
-    .price-symbol {
-      font-size: $font-size-sm;
-      color: $error-color;
-    }
-    
-    .price-value {
-      font-size: $font-size-xl;
-      font-weight: $font-weight-bold;
-      color: $error-color;
-    }
-    
-    .price-unit {
-      font-size: $font-size-xs;
-      color: $text-placeholder;
-      margin-left: 4rpx;
-    }
+  padding: $spacing-xl $spacing-lg;
+}
+
+// 区块
+.section-block {
+  margin-bottom: $spacing-xl;
+
+  &:last-child {
+    margin-bottom: 0;
   }
 }
 
-// 区块样式
-.section {
-  background-color: $bg-white;
-  border-radius: $border-radius-lg;
-  padding: $spacing-lg;
-  margin-bottom: $spacing-lg;
-  
-  .section-title {
-    font-size: $font-size-lg;
-    font-weight: $font-weight-medium;
-    color: $text-color;
-    margin-bottom: $spacing-md;
-  }
+.section-title {
+  font-size: $font-size-lg;
+  font-weight: $font-weight-bold;
+  color: $text-color;
+  margin-bottom: $spacing-md;
 }
 
-// 日期选择
-.date-scroll {
-  white-space: nowrap;
-  margin: 0 -#{$spacing-lg};
-  padding: 0 $spacing-lg;
+.section-subtitle {
+  font-size: $font-size-md;
+  font-weight: $font-weight-medium;
+  color: $text-color;
+  margin-top: $spacing-lg;
+  margin-bottom: $spacing-md;
 }
 
-.date-list {
-  display: inline-flex;
-  gap: $spacing-md;
-}
-
-.date-item {
+// 日期时间选择器
+.datetime-picker {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  width: 120rpx;
-  height: 120rpx;
+  justify-content: space-between;
+  height: 80rpx;
   background-color: $bg-gray;
-  border-radius: $border-radius-md;
-  transition: all $transition-fast;
-  
-  .date-label {
-    font-size: $font-size-sm;
-    color: $text-secondary;
-    margin-bottom: 4rpx;
-  }
-  
-  .date-day {
+  border-radius: $border-radius-sm;
+  padding: 0 $spacing-lg;
+
+  .picker-label {
     font-size: $font-size-md;
-    font-weight: $font-weight-medium;
     color: $text-color;
   }
-  
-  &.active {
-    background-color: $primary-color;
-    
-    .date-label,
-    .date-day {
-      color: $text-white;
-    }
-  }
-  
-  &:active {
-    opacity: 0.8;
-  }
-}
 
-// 时间选择
-.time-loading,
-.time-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 200rpx;
-  
-  text {
+  .picker-placeholder {
     font-size: $font-size-md;
     color: $text-placeholder;
   }
+
+  .picker-value {
+    font-size: $font-size-md;
+    color: $text-color;
+  }
 }
 
-.time-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: $spacing-md;
+// 表单字段
+.field-group {
+  margin-bottom: $spacing-lg;
 }
 
-.time-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 72rpx;
-  background-color: $bg-gray;
-  border-radius: $border-radius-sm;
+.field-label {
   font-size: $font-size-md;
   color: $text-color;
-  transition: all $transition-fast;
-  
-  &.active {
-    background-color: $primary-color;
-    color: $text-white;
-  }
-  
-  &.disabled {
-    background-color: $bg-gray;
-    color: $text-disabled;
-    pointer-events: none;
-  }
-  
-  &:active {
-    opacity: 0.8;
-  }
-}
+  margin-bottom: $spacing-sm;
 
-// 表单区域
-.form-section {
-  padding: 0 $spacing-lg;
-}
-
-.form-item {
-  display: flex;
-  align-items: center;
-  padding: $spacing-lg 0;
-  border-bottom: 1rpx solid $border-light;
-  
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.form-label {
-  width: 140rpx;
-  flex-shrink: 0;
-  font-size: $font-size-md;
-  color: $text-color;
-  
   .required {
     color: $error-color;
     margin-right: 4rpx;
   }
 }
 
-.form-input {
-  flex: 1;
-  height: 48rpx;
+.field-input {
+  height: 80rpx;
+  background-color: $bg-gray;
+  border-radius: $border-radius-sm;
+  padding: 0 $spacing-lg;
   font-size: $font-size-md;
   color: $text-color;
-  
-  &::placeholder {
-    color: $text-placeholder;
-  }
 }
 
-.form-picker {
-  flex: 1;
+.field-select {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 48rpx;
+  height: 80rpx;
+  background-color: $bg-gray;
+  border-radius: $border-radius-sm;
+  padding: 0 $spacing-lg;
   font-size: $font-size-md;
   color: $text-color;
-  
-  .placeholder {
+
+  .placeholder-text {
     color: $text-placeholder;
   }
-  
-  .picker-arrow {
-    width: 16rpx;
-    height: 16rpx;
-    border-right: 3rpx solid $text-placeholder;
-    border-bottom: 3rpx solid $text-placeholder;
-    transform: rotate(-45deg);
-    margin-left: $spacing-sm;
+
+  .select-arrow {
+    font-size: $font-size-lg;
+    color: $text-secondary;
+  }
+}
+
+// 成绩区域
+.scores-section {
+  margin-top: $spacing-sm;
+}
+
+.score-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: $spacing-md;
+
+  .score-label {
+    width: 120rpx;
+    flex-shrink: 0;
+    font-size: $font-size-md;
+    color: $text-color;
+
+    .required {
+      color: $error-color;
+      margin-right: 4rpx;
+    }
+  }
+
+  .score-input {
+    flex: 1;
+    height: 72rpx;
+    background-color: $bg-gray;
+    border-radius: $border-radius-sm;
+    padding: 0 $spacing-lg;
+    font-size: $font-size-md;
+    color: $text-color;
   }
 }
 
@@ -875,56 +601,29 @@ onLoad(async (options) => {
   left: 0;
   right: 0;
   bottom: 0;
+  padding: $spacing-lg;
+  padding-bottom: calc(#{$spacing-lg} + env(safe-area-inset-bottom));
+  background-color: transparent;
+}
+
+.submit-btn {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  background-color: $bg-white;
-  padding: $spacing-md $spacing-lg;
-  padding-bottom: calc(#{$spacing-md} + env(safe-area-inset-bottom));
-  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
-  
-  .price-info {
-    display: flex;
-    align-items: baseline;
-    
-    .price-label {
-      font-size: $font-size-md;
-      color: $text-secondary;
-    }
-    
-    .price-symbol {
-      font-size: $font-size-md;
-      color: $error-color;
-      font-weight: $font-weight-medium;
-    }
-    
-    .price-amount {
-      font-size: $font-size-xxl;
-      color: $error-color;
-      font-weight: $font-weight-bold;
-    }
+  justify-content: center;
+  height: 96rpx;
+  background: linear-gradient(135deg, #FFB347 0%, #FF8C00 100%);
+  border-radius: 48rpx;
+  font-size: $font-size-lg;
+  font-weight: $font-weight-medium;
+  color: $text-white;
+
+  &:active {
+    opacity: 0.8;
   }
-  
-  .submit-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 240rpx;
-    height: 88rpx;
-    background: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%);
-    border-radius: 44rpx;
-    font-size: $font-size-lg;
-    font-weight: $font-weight-medium;
-    color: $text-white;
-    
-    &:active {
-      opacity: 0.8;
-    }
-    
-    &.disabled {
-      background: #CCCCCC;
-      pointer-events: none;
-    }
+
+  &.disabled {
+    background: $text-disabled;
+    pointer-events: none;
   }
 }
 
@@ -935,16 +634,69 @@ onLoad(async (options) => {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: $bg-mask;
+  background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
 }
 
+// 时间选择弹窗
+.time-popup {
+  width: 600rpx;
+  background-color: $bg-white;
+  border-radius: $border-radius-xl;
+  padding: $spacing-xl;
+
+  .time-popup-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: $spacing-lg;
+
+    .time-popup-title {
+      font-size: $font-size-lg;
+      font-weight: $font-weight-bold;
+      color: $text-color;
+    }
+
+    .time-popup-close {
+      font-size: $font-size-xl;
+      color: $text-placeholder;
+      padding: $spacing-xs;
+    }
+  }
+
+  .time-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: $spacing-md;
+  }
+
+  .time-option {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 72rpx;
+    background-color: $bg-gray;
+    border-radius: $border-radius-sm;
+    font-size: $font-size-md;
+    color: $text-color;
+
+    &.active {
+      background: linear-gradient(135deg, #FFB347 0%, #FF8C00 100%);
+      color: $text-white;
+    }
+
+    &:active {
+      opacity: 0.8;
+    }
+  }
+}
+
 // 成功弹窗
 .success-popup {
-  width: 600rpx;
+  width: 560rpx;
   background-color: $bg-white;
   border-radius: $border-radius-xl;
   padding: $spacing-xl;
@@ -953,7 +705,7 @@ onLoad(async (options) => {
 
 .success-icon {
   margin-bottom: $spacing-lg;
-  
+
   .icon-circle {
     display: inline-flex;
     align-items: center;
@@ -962,7 +714,7 @@ onLoad(async (options) => {
     height: 120rpx;
     background: linear-gradient(135deg, #52C41A 0%, #73D13D 100%);
     border-radius: 50%;
-    
+
     .icon-check {
       font-size: 60rpx;
       color: $text-white;
@@ -975,69 +727,29 @@ onLoad(async (options) => {
   font-size: $font-size-xl;
   font-weight: $font-weight-bold;
   color: $text-color;
-  margin-bottom: $spacing-lg;
+  margin-bottom: $spacing-sm;
 }
 
-.booking-info {
-  background-color: $bg-gray;
-  border-radius: $border-radius-md;
-  padding: $spacing-md $spacing-lg;
-  margin-bottom: $spacing-lg;
-  text-align: left;
-  
-  .info-item {
-    display: flex;
-    padding: $spacing-xs 0;
-    
-    .info-label {
-      font-size: $font-size-md;
-      color: $text-secondary;
-      width: 160rpx;
-      flex-shrink: 0;
-    }
-    
-    .info-value {
-      font-size: $font-size-md;
-      color: $text-color;
-      flex: 1;
-    }
-  }
-}
-
-.success-tip {
-  font-size: $font-size-sm;
-  color: $text-placeholder;
+.success-subtitle {
+  font-size: $font-size-md;
+  color: $text-secondary;
   margin-bottom: $spacing-xl;
-  line-height: 1.5;
 }
 
-.popup-buttons {
+.confirm-btn {
   display: flex;
-  gap: $spacing-md;
-  
-  .popup-btn {
-    flex: 1;
-    height: 80rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 40rpx;
-    font-size: $font-size-md;
-    font-weight: $font-weight-medium;
-    
-    &.secondary {
-      background-color: $bg-gray;
-      color: $text-secondary;
-    }
-    
-    &.primary {
-      background: linear-gradient(135deg, #FF6B6B 0%, #FF5252 100%);
-      color: $text-white;
-    }
-    
-    &:active {
-      opacity: 0.8;
-    }
+  align-items: center;
+  justify-content: center;
+  height: 80rpx;
+  background-color: #999999;
+  border-radius: 40rpx;
+  font-size: $font-size-md;
+  font-weight: $font-weight-medium;
+  color: $text-white;
+  margin: 0 $spacing-xl;
+
+  &:active {
+    opacity: 0.8;
   }
 }
 </style>