目录⏳ 前情回顾 本节目标第一步数据建模——预约表 (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又要关联CoursePackageCoursePackage决定了商品属性如价格、课时数而Schedule决定了服务履约的具体时间。第二步页面变量与数据准备为了实现我们预约页面的多步选择我们需要先创建变量保存用户的选择。点击创建页面的图标创建预约页面选中页面组件我们创建一个URL参数用来接收从首页传递过来的课程ID在代码区点击新建创建课包详情变量courseInfo类型选择内置数据表查询数据模型选择套餐表方法选择查询单条查询条件设置为数据标识等于我们的URL参数继续创建变量选中日期selectedDate类型选择数字存储用户选择的上课日期用于筛选排课列表。继续创建变量选中排课记录selectedScheduleId用于存储用户选中的排课记录 ID。继续创建变量上课学员IDselectedChildId用于存储当前选中的上课学员 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(leti0;i15;i){constdnewDate();d.setDate(d.getDate()i);d.setHours(0,0,0,0);constmonthd.getMonth()1;constdated.getDate();constdateStr${d.getFullYear()}-${String(month).padStart(2,0)}-${String(date).padStart(2,0)};days.push({id:i,date:dateStr,// 完整日期用于查询label:i0?今日:weekMap[d.getDay()],// 显示文本value:d.getTime(),// 毫秒值用于某些日期组件的绑定或计算displayDate:${month}-${date},// 显示日期select:i0// 默认选中第一天});}// 1. 更新日历数据$w.page.dataset.state.calendarListdays;// 2. 设置默认选中日期$w.page.dataset.state.selectedDatedays[0].date;}方法创建好之后在页面的onShow事件中调用即可5.2 搭建横向日历 UI横向滚动的效果要靠滚动容器来实现先添加滚动容器设置横向滚动设置宽为340px滚动容器里添加普通容器布局设置为横向排列继续添加循环展示组件数据绑定为我们的日期列表里边添加文本组件绑定我们的日期具体的样式绑定和事件设置和我们第四部分是一样的就不再赘述最终效果打开首页点击立即预约在打开的页面选择孩子、预约日期 总结与预告本节我们通过变量状态管理和数据联动实现了孩子选择和日期选定。下一篇我们继续讲解预约页面根据选择的日期来筛选排课供用户进行预约。