承接前两篇 B 端后台、C 端学员端完整产品设计，本篇为配套可视化素材汇总，分为三大板块：后台管理端页面素材、学员端小程序页面素材、两套核心业务流程图，简洁概括各端核心页面功能，无细碎弹窗赘述，适合作品集、项目答辩、交付文档直接使用。
一、B 端管理后台页面实拍总览
后台分为 6 大核心功能模块，均有对应首页、列表、操作页面截图，覆盖机构全部运营管理操作：
1. 数据看板：后台首页，展示当日预约、核销、课时数据，区分超级管理员、教师两种账号视图，实现数据隔离展示。
2. 课程管理：课程一二分类、课程标签、场馆配置、课程列表与回收站页面，用于搭建门店课程体系，支持上下架、恢复删除课程。
3. 排班预约：支持单日、周双视图，可多维度筛选排班，提供代预约、手动修改课程状态、开课人数预警功能。
4. 学员管理 & 套餐：学员档案列表、课时套餐配置、课时消费流水页面，支持新增学员、冻结 / 延期课时包、套餐管理。
5. 教师 & 核销：教师档案、排班配置、课堂签到核销页面，可生成 30 分钟有效签到码，支持手动核销、标记爽约、撤销核销返还课时。
6.系统设置：后台账号权限分配、全局配置、登录与操作审计日志页面。
二、教师专属端页面实拍总览
教师端功能复用后台核销、排班核心逻辑，但做数据隔离与权限裁剪，仅保留授课相关操作，独立小程序分包，页面素材如下：
1. 教师首页：仅展示本人名下本周排班、当日待上课班级数据，过滤其他教师课程；
2. 班级核销页：进入本班查看预约学员，生成 30 分钟签到二维码、手动核销、标记爽约；
3. 个人授课记录：历史核销、本班学员评价查看与回复；
4. 个人中心：仅展示教师基础信息，无课程、学员、系统配置等管理权限。
核心特点：数据隔离，教师仅可见自身授课数据，无门店全局管理权限，大量逻辑复用管理员后台排班、核销模块，降低重复开发成本。
三、C 端学员小程序页面实拍总览
学员端分包全套页面截图，围绕家长、学员选课约课核心需求搭建，底部导航分为首页、课程、我的预约、个人中心四大入口：
1. 基础登录首页：微信授权登录页、机构首页，展示课程、教师快捷入口与公告。
2. 课程模块 & 教师：课程分类列表、课程详情页，教师列表，教师详情，教师评价。
3. 预约模块：预约下单、我的预约分类列表、预约详情，区分未上课 / 已完成 / 已过期状态，支持取消预约。
4. 个人资产：课时套餐、课时消费流水页面，清晰展示剩余课时与每一笔消耗记录。
四、四套核心业务流程图
流程图 1：公共通用流程
学员 / 教师 / 管理员登录鉴权 → MD5 加密校验身份、角色权限判断 → 角色数据隔离； 后台二次权限校验； 系统定时任务每 30 分钟执行：自动判定过期、满员、最低开课人数，更新业务状态。
流程图 2：学员端完整业务流程
学员登录授权 → 浏览首页课程、查看排班详情 → 提交预约，多层拦截校验（套餐、课时、时段冲突、班级满员）→ 我的预约管理（查看、自主取消未上课预约）→ 查询套餐与课时消费流水 → 课程核销完成后提交课程评价。
流程图 3：教师端完整业务流程
登录完成数据隔离，仅加载本人授课数据 → 查看本人排班课表 → 签到核销二种方式（扫码核销 / 手动核销），支持标记爽约 → 查看授课历史记录、学员课程评价。
流程图 4：管理员后台完整业务流程
基础数据配置（分类、标签、场馆）→ 课程管理（新增编辑、上下架回收站）→ 排班管理（单条 / 批量创建排班，冲突拦截）→ 预约管理（后台代预约、手动修改预约状态）→ 核销 & 溯源管理（全量核销记录、撤销核销）→ 用户管理（学员、教师、后台子账号权限分配）→ 系统统计看板、操作日志、登录日志记录。
补充闭环主线：管理员完成基础配置发布排班 → 学员端发起预约 / 后台代预约 → 教师端完成课堂核销 → 学员提交评价 → 管理员后台统计运营数据、留存操作日志。
四、本篇小结
本篇整合管理端、学员端两套页面素材与双套业务流程总图，完整呈现整套艺培课时预约系统界面形态与核心业务流转。
本文属于《全栈项目实战手记｜艺培场馆课时预约小程序》专栏，系列持续更新，可订阅专栏阅读完整连载。
连载目录回顾
第一篇：艺培场馆课时预约小程序 B 端管理后台完整产品设计思路
第二篇：艺培场馆课时预约小程序 C 端学员端完整产品设计思路
第三篇：艺培场馆课时预约小程序实拍图 & 业务流程逻辑图汇总
第四篇：艺培场馆课时预约小程序后台开发踩坑复盘（课程、学员、权限配置类 Bug）
第五篇：艺培场馆课时预约小程序用户端 & 后台联动踩坑上篇（预约、课时、同步问题）
第六篇：艺培场馆课时预约小程序用户端 & 后台联动下篇（排课核销、定时任务、页面交互异常）
第七篇：艺培场馆课时预约小程序 V2.0 底层安全、交互、分包全量迭代修复复盘
第八篇：艺培场馆课时预约小程序 PC 管理端 Demo 完整开发成果展示
第九篇：艺培场馆课时预约小程序全项目开发历程完整复盘总结
