网报小程序 — 选课 — 产品需求说明书

1.1 界面结构

• 顶部头区：头像 + 学员姓名（未登录显示"点击登录"）+ 年级|城市 胶囊
• 学科Tab栏：横向滑动学科分类（文学美育、多元思维、双语文化、躬行实践…），当前选中项底部橙色下划线
• 筛选栏：学期、班型、时间、地点、筛选（更多）— 横向排列
• 课程列表区：垂直滑动卡片列表
• 底部："向未来生长" 品牌标语（列表底部占位）
• 底部Tab栏：首页 / 选课（选中态）/ 我的
• 浮层：专属顾问悬浮按钮（右下角，含关闭 ×）

1.1 数据规则

维度	说明
来源	后台接口，按「城市 + 年级 + 学科」维度返回课程列表
配置维度	城市 + 年级 + 学科（一级Tab决定学科）
数量	选课列表采用分页加载，每页 20 条，下拉触底加载更多，与全局规则§3.4对齐
排序 一期	课程列表无排序（按服务端返回顺序展示）；老师头像列：脱敏配置下主讲老师星级高的靠前，仅取前三位展示
刷新时机	切换学科Tab / 切换学员 / 切换年级 / 切换城市 / 确认筛选条件 / 下拉刷新
缓存策略	不做本地缓存，每次刷新实时请求

1.1 状态说明

状态组合	表现
已登录 + 有数据	正常展示头像+姓名、课程列表
已登录 + 无数据	显示空状态（见 1.4）
未登录 + 有数据	头部显示"点击登录"，年级默认高一/城市默认广州，正常展示课程列表
未登录 + 无数据	头部显示"点击登录"，显示空状态

1.1 交互规则

操作	响应
点击头像/学员姓名	已登录→弹出多孩切换弹窗；未登录→跳转登录页
点击「年级|城市」胶囊	弹出年级/城市选择弹窗（复用首页逻辑）
切换学科Tab	切换到对应学科，重新请求该学科的课程列表
点击筛选项（学期/班型/时间/地点）	展开对应筛选面板（半屏下拉），背景置灰蒙层
点击「筛选」（更多）	跳转到更多筛选页（全屏页面）
点击课程卡片	跳转班次列表页（传入课程ID）
下拉刷新	刷新当前学科+筛选条件下的课程列表
点击专属顾问	跳转企微添加顾问（不拦截登录）
点击顾问 × 关闭	当前session内隐藏悬浮按钮

1.1 异常与兜底

场景	处理
接口超时/报错	展示全局网络异常页（含重试按钮）
无网络	遵循全局通则：显示全局无网络异常页（见 01-全局§6.1），恢复网络后自动刷新列表数据
图片加载失败	显示默认占位色块
课程名称超长	最多2行，超出截断+省略号
下拉刷新失败	Toast“刷新失败，请重试”，保留当前数据

1.1 配置项清单

配置项	维度	说明
学科Tab列表	城市 + 年级	Tab名称、顺序由后台配置，前端按配置顺序渲染
筛选项选项值	城市 + 年级 + 学科	学期/班型/地点/时间的可选值均由后台下发
专属顾问	城市	企微链接由后台配置（复用首页顾问规则）

1.2 界面结构

• 横向滑动 Tab 栏，超出屏幕宽度时可左右滑动
• 选中态：文字加粗 + 底部橙色下划线指示器
• 默认选中第一个Tab

1.2 数据规则

维度	说明
来源	后台接口，按城市+年级配置
字段	Tab名称(string)、Tab标识ID(string)
数量	后台配几个展示几个，无前端上限
排序	按后台配置顺序从左到右

1.2 交互规则

操作	响应
点击Tab	切换选中态，下划线滑动至选中Tab，重新请求该学科课程列表
左右滑动Tab栏	Tab栏跟随手势滑动，课程列表不联动

1.2 异常与兜底

学科Tab接口失败 → 展示全局异常页（无法正常使用选课功能）。

1.2 配置项清单

见 1.1 配置项。

1.3 界面结构（单张卡片）

• 左上角标签：课程类型 badge（线下/在线/双师）
• 标题：课程名称（最多2行截断）
• 简介：课程简要描述（可选，最多2行截断）
• 老师头像：水平排列，最多5个圆形头像，超出显示「...」
• 价格：右下角，橙色 ¥ + 金额 + "起"

筛选结果模式：当用户选择了地点/时间等筛选条件后，卡片底部额外展示匹配标签（区域、校区、时间、老师名），灰底胶囊样式。

1.3 数据规则

字段	来源	说明
课程类型	后台	枚举：线下/在线/双师，对应不同颜色badge
课程名称	后台	string，超出2行截断+省略号
课程简介	后台	string，可为空；超出2行截断
老师头像列表	后台	URL数组，前端最多展示5个
起步价格	后台	number（分），前端转元显示，保留整数
匹配标签	前端筛选后由后台返回	仅在有筛选条件时展示

1.3 状态说明

场景	表现
无简介	不显示简介行，卡片高度自适应
无老师头像	不显示头像行
无筛选条件	不显示底部匹配标签

1.3 交互规则

操作	响应
点击整张卡片	跳转班次列表页（传入课程ID + 当前筛选条件）

1.3 异常与兜底

场景	处理
老师头像加载失败	显示默认灰色头像占位
价格为0或为空	价格为 0 时照常显示"¥0"（不隐藏价格区域）；后端保证价格字段不为空（2026-07-28 测试评审确认）

1.3 配置项清单

— 卡片内容由课程数据驱动，无独立配置项。

1.4 界面结构

• 居中图片：书本插画（前端固定资源）
• 文案："未找到相关服务"

1.4 触发条件

• 当前学科 + 筛选条件下无匹配课程
• 该城市+年级下该学科无课程配置

1.4 交互规则

用户可切换学科Tab、调整筛选条件或下拉刷新重新加载。

1.4 配置项清单

— 空状态图文为前端固定资源，无后台配置。

1.5 界面结构

• 顶部：学科Tab占位条（灰色矩形）
• 筛选栏：筛选项占位条
• 课程卡片区：4张卡片占位区（灰色色块模拟标题/头像/价格布局）
• 右下角：专属顾问占位圆形

1.5 触发场景

场景	表现
首次进入选课页	展示骨架图，数据返回后替换为实际内容
切换学科Tab	课程列表区展示骨架图（Tab栏保持可操作）
切换学员/年级/城市	全页骨架图

1.5 配置项清单

— 前端固定实现，无后台配置。

2.1 界面结构

• 面板标题：筛选栏「学期」高亮（橙色 + 上箭头）
• 选项区：横向胶囊标签（如：寒假、春季、暑假）
• 底部按钮：「重置」+ 「确定」（橙色）

2.1 数据规则

维度	说明
来源	后台接口，随课程列表一并返回可选学期
数量	后台配几个展示几个
排序	按后台配置顺序

2.1 交互规则

操作	响应
点击学期标签	多选，选中态橙色填充，其余灰底（2026-07-28 测试评审确认：学期支持多选）
点击「确定」	收起面板，按选中学期重新请求课程列表；筛选栏「学期」显示已选值
点击「重置」	取消选中，恢复默认（全部学期）
点击蒙层	关闭面板，不应用筛选（保持上次确认结果）

2.1 配置项清单

学期选项值由后台配置（枚举值与展示名称）。

2.2 界面结构

• 面板标题：筛选栏「班型」高亮（橙色 + 上箭头 + 已选数badge）
• 选项区：纵向列表，每行一个班型名称 + 左侧圆形勾选框
• 底部按钮：「重置」+ 「确定」

2.2 数据规则

维度	说明
来源	后台接口，按学科返回可选班型
示例值	乐学、励学、博学
数量	后台配几个展示几个

2.2 交互规则

操作	响应
点击班型行	多选，选中显示橙色勾选 + 橙色字体
点击「确定」	收起面板，按已选班型重新请求；筛选栏「班型」显示已选数量badge（如 "班型²"）
点击「重置」	取消全部选中
点击蒙层	关闭面板，不应用

2.2 配置项清单

班型选项值由后台按学科配置。

2.3 界面结构

• 左栏：区域列表（天河区、海珠区、越秀区…），橙色高亮选中区域
• 右栏：该区域下的校区列表，每行：勾选框 + 校区名 + "去这里"链接
• 底部已选区："已选：" + 橙色胶囊标签（可点 × 删除）
• 底部按钮：「重置」+ 「确定」

2.3 数据规则

维度	说明
来源	后台接口，按城市返回区域和校区层级数据
层级	二级：区域 → 校区
排序	区域按后台顺序；校区按后台顺序

2.3 交互规则

操作	响应
点击左栏区域	高亮该区域，右栏切换显示该区域下校区
点击右栏校区	多选，选中橙色勾选 + 橙色字体；底部已选区新增标签
点击"去这里"	跳转校区详情页（地图/地址信息）
点击已选标签 ×	取消该校区选中
点击「确定」	收起面板，按已选校区筛选；筛选栏「地点」显示已选数量badge
点击「重置」	取消全部选中

2.3 配置项清单

区域和校区由后台按城市配置管理。

2.4 界面结构

• 左栏：时间分类列表（周四、周五、周六、周日、0段、1段、2段…），橙色高亮选中项
• 右栏：该分类下的具体时间段，每行：勾选框 + 时间（如 "18:30–20:30"）
• 底部已选区："已选：" + 橙色胶囊标签（格式："周二 18:30–20:30"），可横向滑动
• 底部按钮：「重置」+ 「确定」

2.4 数据规则

维度	说明
来源	后台接口，按学科+城市返回可选时间段
层级	二级：时间分类（星期/段次）→ 具体时间段
排序	左栏按星期→段次固定顺序；右栏按时间升序

2.4 交互规则

操作	响应
点击左栏分类	高亮该分类，右栏切换显示该分类下时间段
点击右栏时间段	多选，选中橙色勾选 + 橙色字体；底部已选区新增标签
点击已选标签 ×	取消该时间段选中
点击「确定」	收起面板，按已选时间筛选；筛选栏「时间」显示已选数量badge
点击「重置」	取消全部选中

2.4 配置项清单

时间段选项由后台按学科+城市配置。

3.1 界面结构

• 导航栏：左侧返回箭头 + 标题"更多筛选"
• 课程类型区：标题"课程类型" + 横向胶囊标签（面授、在线、双师）
• 指导区：标题"指导" + 「更多」按钮（点击跳转选择指导老师页）
• 底部按钮：「重置」+ 「确定」

3.1 数据规则

字段	来源	说明
课程类型	前端固定枚举	面授 / 在线 / 双师
指导老师列表	后台接口	根据当前学科+城市返回可选指导老师

3.1 交互规则

操作	响应
点击课程类型标签	单选，选中态橙色边框+文字
点击「更多」（指导区）	跳转选择指导老师页
点击「确定」	返回选课列表，应用筛选条件重新请求；筛选栏「筛选」图标高亮
点击「重置」	清空课程类型和指导老师选择
点击返回箭头	返回选课列表，不应用（保持上次确认结果）

3.1 配置项清单

配置项	说明
课程类型枚举	前端固定：面授/在线/双师
指导老师展示条件	当该学科有辅导老师数据时展示指导区，无则隐藏

4.1 界面结构

• 导航栏：左侧返回箭头 + 标题"选择指导老师"
• 老师列表：按拼音首字母分组（B/C/D/F…），每行：头像 + 姓名，选中态橙色勾选+橙色姓名
• 右侧索引：字母快速定位栏（B/C/D/F/G/J/L/M/O/W/Y/Z）
• 底部按钮：「确定(N)」（橙色，N为已选数量）

4.1 数据规则

维度	说明
来源	后台接口，按学科+城市返回指导老师列表
字段	老师ID、姓名(string)、头像(URL)、拼音首字母(用于分组)
数量限制	前端最多可选 10 位老师
排序	按姓名拼音首字母 A→Z 分组排列

4.1 交互规则

操作	响应
点击老师行	多选切换：未选→选中（橙色勾选）；已选→取消
已选满10个再选	Toast 提示"最多只能选择10个老师"，不可继续选择
点击右侧字母	列表滚动到对应字母分组
点击「确定(N)」	返回更多筛选页，携带已选老师数据
点击返回箭头	返回更多筛选页，不保存本次选择

4.1 异常与兜底

场景	处理
老师头像加载失败	显示默认灰色头像
老师列表为空	不应进入此页面（更多筛选页隐藏指导区）

4.1 配置项清单

— 老师数据由后台课程服务提供，无独立配置。

5.1 界面结构

• 导航栏：左侧返回箭头 + 课程类型badge + 课程名称（超长截断）
• 筛选栏：地点、时间、老师（三个筛选入口）
• Banner图：课程主视觉图（后台配置默认Banner）
• 班次卡片列表：垂直排列的班次信息卡片
• 底部："向未来生长" 品牌标语

5.1 班次卡片结构

元素	说明
老师信息	头像 + 姓名 + 角色标签（如"指导"）
校区	图标 + 校区名称
时间信息	图标 + 日期范围 + 段次 + 上课时间 + 课次数
名额/状态 二期	左下角学位展示：剩余名额 > 5 → 显示"热报中"；剩余名额 1~5 → 显示"剩N名额"（具体数字）；剩余名额 = 0 → 显示"已满班"（2026-07-28 测试评审确认）
价格	右下角：橙色 ¥ + 金额

5.1 数据规则

维度	说明
来源	后台接口，按课程ID + 城市 + 年级 返回班次列表
字段	老师(姓名/头像/角色)、校区名、日期范围、段次、时间、课次数、剩余名额、价格
数量	后台返回全量，不分页
排序 一期	班级列表优先剩余学位少的靠前，其次按 TMS 最后修改时间倒序
刷新	切换筛选条件时重新请求
缓存	不做本地缓存

5.1 状态说明

场景	表现
有班次	正常展示班次卡片列表
无班次（筛选后）	空状态："未找到相关服务"
名额已满	卡片仍展示，名额文案显示"已满班"（2026-07-28 测试评审确认，替代原"剩0名额/隐藏"后台配置口径）

5.1 交互规则

操作	响应
点击班次卡片	跳转课程详情页（传入班次ID）
点击筛选项	展开对应筛选面板（复用选课列表地点/时间面板逻辑）
点击老师筛选	展开老师筛选面板，复用选课页老师筛选，支持多选 二期
点击返回	返回选课列表页

5.1 异常与兜底

场景	处理
接口超时/报错	展示全局网络异常页
Banner图加载失败	显示默认占位色块
老师头像加载失败	显示默认灰色头像

5.1 配置项清单

配置项	维度	说明
课程Banner图	课程维度	后台按课程配置默认Banner，无配置则不展示Banner区
筛选项	课程维度	地点/时间/老师筛选选项由该课程下的班次数据聚合生成

6.1 界面结构

• 标题栏：左侧图标 + “课程推荐” + 右侧关闭 ×
• 推荐卡片：课程类型badge（线下/在线）+ 课程名（截断）+ “热报中”标签 + 「查看 ›」按钮
• 单张卡片展示，不支持滑动

6.1 数据规则

维度	说明
来源	TMS 后台顾问给学生同步的购物车课程
字段	课程类型badge、课程名称、热报状态
数量	展示 1 张卡片（购物车内最新一条有效课程）
触发条件	已登录 + 购物车内存在有效课程（由 TMS 后台顾问同步）；展示范围：所有Tab页面（首页/选课/我的）；未登录或购物车无有效课程时不展示
刷新策略	用户每次打开小程序时检查购物车状态，有效则展示卡片

6.1 交互规则

操作	响应
点击「查看 ›」	跳转购物车页面
点击关闭 ×	收起卡片，当前session内不再展示

6.1 异常与兜底

场景	处理
购物车接口失败	不展示卡片（静默降级）
未登录	不展示卡片
购物车课程已失效	不展示卡片

6.1 配置项清单

课程数据来源为 TMS 后台顾问同步至学生购物车，前端无配置项。