【教培管家】小程序实战（五）：体验课预约——从流量到转化的闭环

[⏳ 前情回顾](#⏳ 前情回顾)
[🎯 本节目标](#🎯 本节目标)
第一步：数据建模------预约表 (Bookings)
第二步：页面变量与数据准备
第三步：搭建"课包信息展示"区域
第四步：搭建"学员选择"区域
第五步：搭建"排课选择"区域 (横向日历+列表)
- [5.1 数据准备](#5.1 数据准备)
- [5.2 搭建横向日历 UI](#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。

第三步：搭建"课包信息展示"区域

这是页面的第一部分，让家长确认自己正在购买什么产品。

首先给页面添加一个普通容器，设置页面的背景色

bash 复制代码

:root {
  min-height: 100vh;
  background-color: #F7F8FA; 
  padding-bottom: 96px; 
}

然后在第一行的列里搭建我们的卡片布局，总体上是用普通容器结合图片和文本组件进行搭建

设置外层的普通容器的布局为横向排列

然后给图片绑定字段，从我们的courseInfo里绑定

最终效果

第四步：搭建"学员选择"区域

拖入一个 普通容器 ，里边添加普通容器，放置图标和文本组件，搭建标题

继续添加普通容器，里边添加循环展示组件

循环展示组件里我们搭建头像和姓名布局，然后给循环展示绑定孩子列表数据

接着我们给外层的普通容器绑定样式，当选中的时候给一个蓝色的边框

bash 复制代码

$w.item_repeater1._id==$w.page.dataset.state.selectedChildId?{border:'2px solid #2563EB'}:{}

给容器设置点击事件，选中的时候给我们的变量进行赋值

第五步：搭建"排课选择"区域 (横向日历+列表)

这里我们将抛弃传统的日期选择器，采用更直观的横向日历切换，支持展示未来 15 天的排课信息。

5.1 数据准备

我们需要构建一个包含日期、星期、选中状态的数组。

先创建一个calendarList的变量，类型选择数组

在代码区新建一个自定义方法 initCalendar，用于生成未来 15 天的数据。

javascript 复制代码

export default function ({ event, data }) {
  const days = [];
  const weekMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

  for (let i = 0; i < 15; i++) {
    const d = new Date();
    d.setDate(d.getDate() + i);
    d.setHours(0, 0, 0, 0);
    const month = d.getMonth() + 1;
    const date = d.getDate();
    const dateStr = `${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事件中调用即可