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

⏳ 前情回顾

在上一讲中，我们完成了“首页整体装修”，通过精美的卡片展示了体验课套餐。当家长被课程吸引并点击“立即预约”时，我们需要一套完整的流程来引导他们完成学员选择、时段确认、在线支付。

🎯 本节目标

1. 预约建模：创建Bookings表，打通家长、学员、课包、排课与支付的关联。
2. 变量驱动UI：使用页面变量控制学员选中、日期筛选及排课选中状态。
3. 复杂交互搭建：实现课包信息展示、横向滚动的学员选择器与日历联动的排课列表。

第一步：数据建模——预约表 (Bookings)

预约表是连接家长、孩子、课程和资金的核心纽带。我们需要记录“谁（家长），给谁（孩子），买了什么课（课包+排课），付了多少钱”。

创建数据源：Bookings(预约表)

💡 设计思考：为什么既要关联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

滚动容器里添加普通容器，布局设置为横向排列

继续添加循环展示组件，数据绑定为我们的日期列表

里边添加文本组件绑定我们的日期，具体的样式绑定和事件设置和我们第四部分是一样的，就不再赘述

最终效果

打开首页，点击立即预约

在打开的页面选择孩子、预约日期

🚀 总结与预告

本节我们通过变量状态管理和数据联动，实现了孩子选择和日期选定。下一篇我们继续讲解预约页面，根据选择的日期来筛选排课，供用户进行预约。