全栈项目实战手记｜艺培场馆课时预约小程序 C 端学员端完整产品设计思路

承接上一篇 B 端机构管理后台产品设计，本篇聚焦学员侧小程序完整产品架构，C 端与后台课程、排课、课时套餐、核销数据实时双向互通，适配美术、舞蹈、乐器等线下兴趣机构家长与学员使用，整体轻量化设计，无复杂管理功能，核心围绕选课、预约上课、查看课时资产打造完整用户链路。

一、C 端产品定位与目标用户

1.1 产品定位

本端是线下艺培机构面向学员、家长的线上服务入口，核心解决线上自主约课、课时查询、上课记录查看需求，所有操作数据实时同步管理后台，教务可实时查看学员预约、核销记录，形成前后台完整业务闭环。

1.2 目标用户群体

1. 少儿学员家长（核心人群）：负责选课、购买课时套餐、预约课程、查看剩余课时与上课记录；
2. 青少年 / 成年学员：自主登录，独立约课、课后提交课程评价； 3 线下潜在新客户：浏览师资、课程，线下到店后开通线上课时包。

1.3 C 端核心设计原则

1. 操作极简：仅保留选课、我的预约、课时套餐三大核心入口，剔除冗余功能；
2. 数据实时双向同步：后台新增课程、排班、套餐，学员端即时刷新；核销、取消预约后两端状态同步更新；
3. 多层预约前置校验：课时不足、套餐过期、同一时段重复预约、课程满员均提前弹窗拦截，减少无效请求；
4. 视觉状态统一：未上课蓝色、已完成绿色、已取消 / 过期灰色，降低用户识别成本；
5. 业务规则完全对齐后台：团课、私教区分逻辑、最低开课人数、套餐适配标签与 B 端配置保持统一。

二、C 端整体分包与页面架构

学员端独立分包 pages/client，按需懒加载，首页为默认进入页面，底部导航固定四大入口：首页、课程列表、我的预约、个人中心。 完整页面清单：微信登录页、首页、课程列表、课程详情、预约下单页、预约详情、全部预约记录、课时套餐、课时消费流水、教师列表、教师详情、课程评价。

三、各页面完整产品设计与业务逻辑

3.1 微信授权登录页

1. 进入小程序自动唤起微信授权，一键获取昵称、头像、openId；
2. 新用户自动生成学员档案存入数据库，老用户直接读取账号信息；
3. 登录行为自动写入登录日志，授权失败弹窗引导重新操作；
4. 未登录状态拦截所有业务页面，强制跳转授权页。

3.2 首页（流量总入口）

1. 顶部机构公告栏：仅展示后台标记为有效、未过期公告；
2. 快捷功能区：直达全部课程、我的课时包、我的预约；
3. 热门课程推荐卡片；
4. 授课教师推荐板块，点击跳转教师详情页。

3.3 课程列表页面

1. 顶部筛选组件：一级分类、二级分类、团 / 私教标签多维度切换；
2. 课程卡片展示封面、名称、授课类型、简短介绍；
3. 后台下架课程自动过滤，不在前端展示；
4. 支持下拉刷新、上拉分页加载；点击卡片跳转课程详情。

3.4 课程详情页（选课核心页面）

1. 顶部大图展示课程封面，下方展示课程介绍、单课时长、上课场馆、授课老师；
2. 标签区分团课 / 私教，展示单班最大容纳人数；
3. 下方展示全部可预约排班，标注日期、时段、剩余空位；
4. 点击「立即预约」触发多层校验：
   • 学员是否持有适配该课程的有效课时套餐；
   • 套餐剩余课时是否充足；
   • 当前时段是否存在已预约课程（防冲突）；
5. 校验通过才可预约，不满足条件弹窗清晰提示限制原因。

3.5 预约下单页面

1. 回显所选课程、教师、上课场馆、上课时段；
2. 展示本次预约消耗课时数量；
3. 提交前二次确认弹窗，防止误操作；
4. 提交后后端自动生成预约记录，对应排班名额 + 1，锁定对应课时。

3.6 我的预约页面

顶部 Tab 分类：全部、未上课、已完成、已取消

1. 未上课：展示上课倒计时，支持取消预约，取消后自动返还课时、释放名额；
2. 已完成：展示核销记录，提供课程评价入口；
3. 已取消 / 已过期：置灰静态展示，无操作按钮；
4. 页面每次进入自动拉取后台最新排班、核销状态，同步定时任务更新数据。

3.7 预约详情页

1. 完整展示课程、教师、场馆、上课时段、预约状态；
2. 未上课页面展示取消按钮；
3. 已完成展示核销时间、消耗课时、评价入口；
4. 上课当日提示扫码签到核销。

3.8 课时套餐页面

Tab 区分有效套餐、过期套餐

1. 有效套餐：展示名称、总课时、剩余课时、适配课程标签、有效期；
2. 过期套餐置灰，无法用于预约；
3. 套餐卡片可跳转对应课时消费流水。

3.9 课时消费流水

逐条记录课时核销、取消返还、撤销返还记录，每条绑定课程、排班、操作人，按时间倒序排列，支持下拉刷新。

3.10 教师列表 & 教师详情

1. 教师列表展示头像、姓名、授课品类；
2. 详情页展示教师简介、负责课程、学员全部评价；
3. 可从教师页面跳转对应课程预约。

3.11 课程评价页面

1. 仅核销完成的预约可提交评分 + 文字评价；
2. 同一课程单次预约仅可评价一次，重复提交拦截；
3. 评价数据实时同步后台，教师、管理员可查看回复。

四、C 端统一交互规范

1. 首页、课程、预约、套餐全部支持下拉刷新同步后台最新数据；
2. 全局状态统一配色：未上课蓝、已完成绿、已取消 / 过期灰；
3. 无课程 / 预约 / 套餐时展示空状态友好提示；
4. 所有提交按钮增加防抖，防止重复创建预约记录；
5. 页面 onShow 强制重载业务数据，避免后台操作后前端缓存滞后。

五、前后台数据联动规则

1. 课程、分类、标签、场馆后台新增 / 上下架后，前端刷新即时生效；下架课程前端隐藏；
2. 管理员新增 / 修改排班，学员端可预约列表同步更新；
3. 学员提交 / 取消预约，后台排班名额、套餐课时实时变更；
4. 教师扫码 / 后台手动核销，学员剩余课时同步刷新；
5. 系统每 30 分钟自动校正过期排班，前端重新加载后状态自动更新；
6. 学员评价实时同步后台评价管理模块。

六、本篇小结

本篇完整拆解艺培场馆课时预约小程序 C 端学员端全套产品设计，页面、校验规则、业务流程全部与第一篇 B 端后台一一对应，形成完整线上约课、课时管控业务闭环。产品面向家长、普通学员做轻量化设计，降低使用门槛，多层前置校验减少无效接口请求，美术、舞蹈、琴行等兴趣机构同款小程序可直接复用整套页面设计方案。

本文属于《全栈项目实战手记｜艺培场馆课时预约小程序》专栏，系列持续更新，可订阅专栏阅读完整连载。

连载目录回顾

第一篇：艺培场馆课时预约小程序 B 端管理后台完整产品设计思路

第二篇：艺培场馆课时预约小程序 C 端学员端完整产品设计思路

第三篇：艺培场馆课时预约小程序后台实拍图 & 业务流程逻辑图汇总

第四篇：艺培场馆课时预约小程序后台开发踩坑复盘（课程、学员、权限配置类 Bug）

第五篇：艺培场馆课时预约小程序用户端 & 后台联动踩坑上篇（预约、课时、同步问题）

第六篇：艺培场馆课时预约小程序用户端 & 后台联动下篇（排课核销、定时任务、页面交互异常）

第七篇：艺培场馆课时预约小程序 V2.0 底层安全、交互、分包全量迭代修复复盘

第八篇：艺培场馆课时预约小程序 PC 管理端 Demo 完整开发成果展示

第九篇：艺培场馆课时预约小程序全项目开发历程完整复盘总结