目录
- ⏳ 前情回顾
- 🎯 本节目标
- 第一步：数据建模——预约表 (Bookings)
- 第二步：页面变量与数据准备
- 第三步：搭建“课包信息展示”区域
- 第四步：搭建“学员选择”区域
- 第五步：搭建“排课选择”区域 (横向日历+列表)
- 5.1 数据准备
- 5.2 搭建横向日历 UI
- 最终效果
- 🚀 总结与预告
⏳ 前情回顾
在上一讲中，我们完成了“首页整体装修”，通过精美的卡片展示了体验课套餐。当家长被课程吸引并点击“立即预约”时，我们需要一套完整的流程来引导他们完成学员选择、时段确认、在线支付。
🎯 本节目标
- 预约建模：创建
Bookings表，打通家长、学员、课包、排课与支付的关联。 - 变量驱动UI：使用页面变量控制学员选中、日期筛选及排课选中状态。
- 复杂交互搭建：实现课包信息展示、横向滚动的学员选择器与日历联动的排课列表。
第一步：数据建模——预约表 (Bookings)
预约表是连接家长、孩子、课程和资金的核心纽带。我们需要记录“谁（家长），给谁（孩子），买了什么课（课包+排课），付了多少钱”。
创建数据源：Bookings(预约表)
| 字段名称 | 字段标识 | 类型 | 说明 |
|---|---|---|---|
| 关联课包 | course_package_id | 关联关系 | 关联CoursePackage表，记录购买的套餐 |
| 关联排课 | schedule_id | 关联关系 | 关联Schedule表，锁定具体上课时间 |
| 关联学员 | child_id | 关联关系 | 关联Children表，记录上课学员 |
| 关联家长 | parent_id | 关联关系 | 关联Parents表，记录支付人 |
| 预约编号 | bookingNo | 文本 | 唯一订单号，规则：ORD+时间戳+随机数 |
| 支付金额 | amount | 数字 | 实际支付金额（单位：元） |
| 支付状态 | payStatus | 枚举 | 1: 待支付,2: 已支付,3: 已取消 |
| 微信单号 | transaction_id | 文本 | 微信支付回调返回的流水号 |
💡 设计思考：为什么既要关联
Schedule又要关联CoursePackage？CoursePackage决定了商品属性（如价格、课时数），而Schedule决定了服务履约的具体时间。
第二步：页面变量与数据准备
为了实现我们预约页面的多步选择，我们需要先创建变量保存用户的选择。点击创建页面的图标，创建预约页面
选中页面组件，我们创建一个URL参数，用来接收从首页传递过来的课程ID
在代码区点击新建，创建课包详情变量（courseInfo），类型选择内置数据表查询
数据模型选择套餐表，方法选择查询单条
查询条件设置为数据标识等于我们的URL参数
继续创建变量选中日期（selectedDate），类型选择数字，存储用户选择的上课日期，用于筛选排课列表。
继续创建变量，选中排课记录（selectedScheduleId），用于存储用户选中的排课记录 ID。
继续创建变量上课学员ID（selectedChildId），用于存储当前选中的上课学员 ID。
第三步：搭建“课包信息展示”区域
这是页面的第一部分，让家长确认自己正在购买什么产品。
首先给页面添加一个普通容器，设置页面的背景色
:root{min-height: 100vh;background-color:#F7F8FA;padding-bottom: 96px;}然后在第一行的列里搭建我们的卡片布局，总体上是用普通容器结合图片和文本组件进行搭建
设置外层的普通容器的布局为横向排列
然后给图片绑定字段，从我们的courseInfo里绑定
最终效果
第四步：搭建“学员选择”区域
拖入一个普通容器，里边添加普通容器，放置图标和文本组件，搭建标题
继续添加普通容器，里边添加循环展示组件
循环展示组件里我们搭建头像和姓名布局，然后给循环展示绑定孩子列表数据
接着我们给外层的普通容器绑定样式，当选中的时候给一个蓝色的边框
$w.item_repeater1._id==$w.page.dataset.state.selectedChildId?{border:'2px solid #2563EB'}:{}给容器设置点击事件，选中的时候给我们的变量进行赋值
第五步：搭建“排课选择”区域 (横向日历+列表)
这里我们将抛弃传统的日期选择器，采用更直观的横向日历切换，支持展示未来 15 天的排课信息。
5.1 数据准备
我们需要构建一个包含日期、星期、选中状态的数组。
先创建一个calendarList的变量，类型选择数组
在代码区新建一个自定义方法initCalendar，用于生成未来 15 天的数据。
exportdefaultfunction({event,data}){constdays=[];constweekMap=['周日','周一','周二','周三','周四','周五','周六'];for(leti=0;i<15;i++){constd=newDate();d.setDate(d.getDate()+i);d.setHours(0,0,0,0);constmonth=d.getMonth()+1;constdate=d.getDate();constdateStr=`${d.getFullYear()}-${String(month).padStart(2,'0')}-${String(date).padStart(2,'0')}`;days.push({id:i,date:dateStr,// 完整日期，用于查询label:i===0?'今日':weekMap[d.getDay()],// 显示文本value:d.getTime(),// 毫秒值，用于某些日期组件的绑定或计算displayDate:`${month}-${date}`,// 显示日期select:i===0// 默认选中第一天});}// 1. 更新日历数据$w.page.dataset.state.calendarList=days;// 2. 设置默认选中日期$w.page.dataset.state.selectedDate=days[0].date;}方法创建好之后，在页面的onShow事件中调用即可
5.2 搭建横向日历 UI
横向滚动的效果要靠滚动容器来实现，先添加滚动容器，设置横向滚动
设置宽为340px
滚动容器里添加普通容器，布局设置为横向排列
继续添加循环展示组件，数据绑定为我们的日期列表
里边添加文本组件绑定我们的日期，具体的样式绑定和事件设置和我们第四部分是一样的，就不再赘述
最终效果
打开首页，点击立即预约
在打开的页面选择孩子、预约日期
🚀 总结与预告
本节我们通过变量状态管理和数据联动，实现了孩子选择和日期选定。下一篇我们继续讲解预约页面，根据选择的日期来筛选排课，供用户进行预约。
