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

版本 V1.1 更新 2026-07-28 涉及期数一期二期三期 全局规则引用:01-全局通用规则.md
一、服务详情主页 核心转化页

模块说明:课程(班次)详情页是用户从首页推荐/选课列表/班级列表/搜索/分享等入口进入后,完成"了解 → 加购"关键转化动作的核心页面。页面信息层级深、字段多、状态分支复杂。

入口:选课列表点击课程卡 / 首页推荐 / 分享卡片 / 购物车"班级失效→重选"  |  页面组成:服务详情主页 → 服务大纲子页 → 老师详情子页 → 5个弹窗

1.1 服务详情主页(已登录有数据)
课程详情主页

1.1 界面结构(从上到下)

  1. 沉浸式头部 Banner:橙色主题图延伸至顶部状态栏,支持 image + video 混合轮播(swiper),右下角角标"1/N"
  2. 顶部控制按钮(随滚动从透明→白色背景):左侧返回按钮、中间"服务详情"标题(滚动后显示)、右侧分享按钮 + 购物车角标
  3. 滑动 Tab(吸顶):服务 / 指导 / 大纲 / 详情 四个锚点,点击自动滚动、滚动自动高亮
  4. 折扣倒计时区:折扣价 + 原价划线 + "距离恢复原价还剩 HH:MM:SS"
  5. 班级主体信息:类型标签(在线/线下/双师/AI,不同颜色)+ 班级名 + 副标题(后台配置,展示在班级名下方)+ 简介 + 难度
  6. 基础信息:地点(校区或省市)+ 时间段次 + 课次数
  7. 价格区:当前价 ¥ + "分段缴费 ▼"按钮(若有分段)+ 报名热度标签(已满/剩N名额/热报)+ 右侧"查看同类班级 ›"
  8. 特色介绍:其他费用(学习资料 ¥)+ 优惠标签列表
  9. 诊断提示(按城市/学期/年级/学科/产品判断):① 不需要诊断→隐藏;② 录取班型与课程班型匹配→隐藏;③ 录取班型不匹配→黄色横条"根据诊断结果,励学XX有更好的学习效果 查看 ›"(跳选课页,默认选中录取班型);④ 诊断未通过→"暂无推荐班型,建议您查看个辅相关课程"(跳个辅咨询列表);⑤ 无分层结果→直接展示诊断入口
  10. 授课老师:老师头像列表(按角色排序:指导/辅导),最多展示 1 授课 + 1 辅导老师(按排课讲次数最多取,相同则取前面讲次),点击跳老师详情子页
  11. 服务大纲:适合对象 + 培养目标 + 课时列表(展示前3条 + "查看全部");已上完课的讲次大纲置灰
  12. 课程服务:根据班级对应"课程类型"展示课程服务内容 一期(2026-07-26 修订:本期隐藏,9月版本不实现)
  13. 学员评价:展示前1条评价(头像+姓名+星级+标签+内容),点击"全部评价"进入评价列表子页 一期(2026-07-26 修订:本期隐藏,9月版本不实现)
  14. 服务详情:富文本图片数组展示;空时显示默认占位图
  15. 底部 Footer(吸底):客服图标 + 主操作按钮(加购/关注/诊断等)+ 顾问入口
2026-07-26 修订 一期学员评价、课程服务两个区块本期隐藏(9月版本不实现,后续版本再放开);文中相关数据规则/异常兜底/评价列表子页描述保留作为后续版本依据。「查看同类班级」(同主体相似课程推荐)确认保留,规则不变。

1.1 数据规则

维度说明
来源班级详情主接口 getClassDetail(classId) + 实时数据 getClassData(classId)
头部媒体getCourseIntroMedia 接口返回 image + video 混合列表,支持轮播
价格逻辑折扣期走 discountPrice;否则 actualPrice(已开课/未开课不同)+ classMaterialFee
分段缴费getClassPaySegment 接口返回段次数组(段名/起止日/价格),学习资料费注入第1段
老师列表getTeacher 接口返回,按 teacherRoleId 升序排列
大纲数据getLecture 接口(EES 系统),返回适合对象/培养目标/课时列表
副标题后台配置的课程副标题,展示在班级名下方
优惠标签getDiscountTagInfo 接口返回当前班级可用优惠标签列表
课程服务按 classType 返回对应课程服务内容
评价数据getCommentList 接口,按星级降序→同星级按更新时间降序;匿名→默认头像+"卓越学员";非匿名→学员头像+姓名
购物车角标getCartQuantity 接口实时获取商品数量,>0 显示红点
刷新时机每次进入页面(onShow)重新请求班级详情 + 实时数据

1.1 状态说明

状态表现
已登录有数据完整展示所有区块,底部主按钮根据状态机显示对应文案
未登录详情正常浏览(不需登录),点加购时拦截跳登录页
折扣期显示折扣倒计时区(折扣价+原价+倒计时);小于48小时→"x时x分x秒";大于48小时→"x天x时x分x秒";开课后不再享有网报价;倒计时结束自动刷新恢复原价。开课后不显示优惠信息(展示层规则,2026-07-28 测试评审确认;折扣仅为展示用途,实际支付以用户真实可享优惠策略为准,开课后是否允许享受优惠由 TMS 后台配置)
预售未开始底部显示预售倒计时,主按钮文案"预约购课"。展示格式:>2天→"01.25 09:30开抢";<2天→"即将开始,01.25 09:30开抢";当天未到时→"即将开始,今日 09:30开抢";提前2小时→倒计时"距开抢剩 HH:MM:SS"。已到开售时间则不展示
已下架整个 footer 替换为"服务已经下架啦~要不要瞧瞧别的~"提示文案
名额已满主按钮变为"关注名额",已关注后变"已关注"(灰色禁用)
报名热度价格区旁展示热度标签:剩余名额 > 5 → "热报中"(红色);剩余名额 1~5 → "剩N名额"(橙色);名额=0 → "已满班"(灰色)(2026-07-26 确认,与选课页班次卡片口径一致 二期;2026-07-28 测试评审确认:=0 档文案统一为"已满班")

1.1 交互规则

操作响应
滑动/点击 Tab点击Tab自动滚动到对应区域;滚动到对应区域Tab自动高亮
点击"分段缴费 ▼"弹出分段缴费弹窗(模块1.3)
点击优惠标签弹出优惠详情弹窗(模块1.4)
点击老师头像/名字跳转老师详情子页(模块1.6)
点击"查看全部"大纲跳转服务大纲子页(模块1.5)
点击分享按钮触发 onShareAppMessage 分享小程序卡片(title=班级名,path 携带 classId);分享无需登录(2026-07-26 确认 三期
点击"查看同类班级"跳转选课列表(当前班级置顶),排序规则:①按最近校区由近到远;②非满班 > 满班;③非满班按学位数低→高→更新时间;④满班按满班时间倒序排到列表底部
点击主按钮(加购)按状态机决策(详见模块1.2),成功后飞入动画 + toast"选择服务成功"
点击客服图标跳转企微/在线客服 IM 页面
点击顾问入口跳转顾问详情页(复用首页顾问规则)
点击购物车角标跳转购物车页面

1.1 异常与兜底

场景处理
班级详情接口失败显示骨架图,提供重试按钮
头部媒体缺省有视频+图片:列表页展示视频,详情页视频+图片;仅有视频或图片:列表页+详情页都展示;都没有:详情页展示缺省图,列表页不展示
老师列表为空隐藏"授课老师"区块
大纲数据为空隐藏"服务大纲"区块
富文本详情为空显示默认占位图
购物车角标接口失败不显示角标数(静默降级)
服务降级评价/优惠/详情 3 个区块可通过 moduleCode 独立隐藏
老师头像兜底未维护头像→按性别显示默认头像;无性别/待排/兼职→品牌头像;待排/兼职老师名显示"卓越老师"且不可点击
评价数据为空隐藏"学员评价"区块
抢报倒计时服务降级使用客户端本地时间兜底计算

1.1 配置项清单

配置项维度说明
头部媒体课程后台配置图片/视频列表,支持混合轮播
班级类型标签班级在线/线下/双师/AI,后台字段 classType 决定
分段缴费班级后台配置段次(产品分段/手动分段-网报/手动分段-TMS)
优惠标签课程后台配置折扣规则,接口返回可用标签
服务降级开关全局class_comment / class_discount / class_course_detail 三个 moduleCode
预售/抢报时间班级后台配置开售时间,前端根据服务端时间计算倒计时
副标题课程后台配置课程副标题,展示在班级名下方
课程服务班级按 classType 返回对应课程服务内容
顾问入口城市企微链接由后台配置(复用首页顾问规则)
二、底部按钮状态机 8+种状态
1.2 主按钮状态映射
底部按钮状态

1.2 界面结构

底部 Footer 固定吸底,从左到右依次为:客服图标 → 主操作按钮(占满剩余宽度)→ 顾问图标。主按钮根据以下状态机展示不同文案和交互行为。

1.2 数据规则(状态映射表)

优先级判断条件按钮文案可点击动作
1a班级已下架(classDisabled / classOffShelf)—(整个footer替换为"服务已经下架啦~要不要瞧瞧别的~")
1b班级已作废(classInvalid)—(整个footer替换为"服务已经作废啦~要不要瞧瞧别的~")
2名额=0 且已登录"关注名额" / 已关注则"已关注"是/灰禁调用 setAttention 接口
3需咨询登记(classCanNetReg=2)且可登记"咨询登记"调用 addRecordConsult 接口
4已登记"已登记"否(灰禁)
5未登录 且需咨询登记"咨询登记"先跳登录,登录后返回继续
6需诊断(未登录或无学员或 examStatus=2)"诊断后选择服务"跳转 TES 诊断系统
7预售未到开售时间"加入购物车"(实际为预约)执行加购流程
8其他默认(正常可购买)"加入购物车"执行加购流程(onJoinCart)
判断按优先级从高到低执行,命中即停止。防重复提交:加购/咨询登记/诊断三个按钮需 disabled + Loading 状态锁。

1.2 状态说明(加购错误码)

错误码含义处理方式
200加购成功飞入动画 + toast"选择服务成功" + 刷新购物车角标
5001同班型/时段冲突(可替换)弹课程冲突替换弹窗,确认后删除原班级再加购新班级
5002课程冲突(不可替换)弹冲突展示弹窗,仅告知不可操作
5003时间冲突toast 提示冲突信息
5004学位不足toast 提示学位信息
5005年级不匹配toast 提示年级要求
其他通用错误toast 接口返回的错误消息

1.2 交互规则

操作响应
未登录点加购拦截跳转登录页,登录后自动返回当前详情页
已登录无学员点加购跳转添加学员页(02-登录与学员绑定)
面授已开课插班加购不弹窗,直接加购剩余讲次,价格展示剩余讲次学费(不需要删除线展示原价)
在线课已开课插班加购(classOpenedNeedFullFee=false)弹选段/续报弹窗("全报"→全部讲次+学费原价 / "续报"→剩余讲次+剩余价),选后执行加购
已结课班级点加购toast"抱歉,该班级结课了,请看看其他班级"
加购成功飞入购物车动画 + 刷新角标 + 神策埋点 AddToOrderList

1.2 异常与兜底

场景处理
加购接口超时解除 Loading 锁,toast"网络异常,请重试"
冲突替换确认后失败toast 错误信息,保持原购物车状态不变
关注名额接口失败toast"操作失败,请重试"
咨询登记接口失败toast"登记失败,请重试"

1.2 配置项清单

配置项说明
classCanNetReg后台配置,=2 时走咨询登记分支而非直接加购
classIsNoTestForNew后台配置,=true 时新生免诊断直接加购
classOpenedNeedFullFeeTMS"开课后是否收全额"配置:=true 时已开课也需全费(不弹续报选择,加购全部讲次+学费原价);=false 时弹选段/续报弹窗(全报/续报)
预售开售时间后台配置 negRegDate,前端根据服务端时间差计算倒计时
三、分段缴费弹窗 底部半屏
1.3 分段缴费明细
分段缴费弹窗

1.3 界面结构

  • 弹窗标题:"缴费明细" + 右上角关闭 ✕
  • 段次列表:每段一行,显示段名(如"寒假段")/ 起止日期 / 缴费金额
  • 第1段特殊:包含学习资料费(classMaterialFee),单独标注
  • 合计区:底部显示总金额

1.3 数据规则

维度说明
来源getClassPaySegment 接口返回 classPaySegments 数组
字段每段包含:segmentName(段名)、startDate(起始日)、endDate(截止日)、payPrice(缴费价格)
资料费注入第1段的 payPrice 自动加上 classMaterialFee
段次来源3种:产品分段(课程后台配置)/ 手动分段-网报 / 手动分段-TMS
展示条件classPaySegments 数组非空时才显示"分段缴费 ▼"入口按钮

1.3 状态说明

状态表现
有分段数据主页价格区显示"分段缴费 ▼"按钮,点击弹此弹窗
无分段数据"分段缴费 ▼"按钮不展示,价格区仅显示总价

1.3 交互规则

操作响应
点击"分段缴费 ▼"从底部弹出半屏弹窗展示明细
点击 ✕ / 蒙层关闭弹窗
此弹窗仅供用户查看信息,不提供操作按钮(不可选择段次)。段次选择在购物车/确认订单环节完成。

1.3 配置项清单

配置项说明
分段缴费段次后台配置(支持产品分段 + 顾问手动分段两种来源)
学习资料费后台配置 classMaterialFee,自动合入第1段显示
四、弹窗组(优惠详情 + 课程冲突替换) 3个弹窗
1.4 优惠详情弹窗 + 选段/续报弹窗 + 课程冲突替换弹窗

本模块无独立设计稿
交互逻辑见右侧说明

1.4 界面结构

A. 优惠详情弹窗

  • 触发:点击主页"优惠标签"区域
  • 内容:列出当前班级可享受的所有优惠规则(courseDiscountTags 详情)
  • 底部:若有多科联报优惠,显示"多科联报 ›"跳转入口

B. 选段/续报弹窗

  • 触发:在线课程且已开课且非全费要求时,点加购按钮触发
  • 内容:展示"全报"vs"续报"选项对比(课次数/价格)
  • 操作:"全报"→ 加购全部段次;"续报"→ 加购剩余段次

C. 课程冲突替换弹窗

  • 触发:加购接口返回错误码 5001 或 5002
  • 内容:新班级 vs 原冲突班级的对比卡片(老师/地点/时间)
  • 5001(可替换):底部显示"确认替换"按钮,确认后删除原班级 + 加购新班级
  • 5002(不可替换):仅展示冲突信息,无操作按钮

1.4 数据规则

弹窗数据来源关键字段
优惠详情getDiscountTagInfo 接口优惠类型/折扣金额/适用条件/有效期
选段/续报classNum / classPrice / classLeftNum / classLeftPrice全报总课次&总价 vs 续报剩余课次&剩余价
课程冲突加购接口 response.data新班级信息 + 冲突原班级信息(老师/地点/时间)

1.4 交互规则

操作响应
优惠弹窗 - 点"多科联报"跳转多科联报页面(展示同时段多科优惠组合)
选段弹窗 - 选"全报"执行加购(isFull=true)
选段弹窗 - 选"续报"执行加购(isFull=false,只购买剩余段次)
冲突弹窗 - 确认替换(5001)先调 deleteItem 删除原班级,再调 addItem 加购新班级
冲突弹窗 - 关闭(5002)关闭弹窗,不做任何操作
所有弹窗 - 点蒙层/✕关闭弹窗

1.4 异常与兜底

场景处理
冲突替换 - 删除原班级失败toast 错误信息,不执行后续加购,弹窗保持
冲突替换 - 删除成功但加购新班级失败toast 错误信息,告知用户"原班级已移除,请重新加购"
优惠标签接口失败隐藏优惠标签区域,不影响页面主体功能

1.4 配置项清单

配置项说明
优惠规则后台配置,接口返回 courseDiscountTags
多科联报后台配置科目组合优惠,前端通过优惠弹窗入口跳转
classOpenedNeedFullFee=true 时不弹选段弹窗,直接全费加购
五、服务大纲子页 EES数据
1.5 服务大纲完整展示

沿用主页大纲区块样式
完整展示(不限3条)

1.5 界面结构

  • 顶部导航:返回 ← + 标题"服务大纲"
  • 适合对象:文本描述目标学员画像
  • 培养目标:文本描述课程培养方向
  • 大纲列表:完整课时列表(FoldPage 折叠组件),每条包含章节号 / 标题 / 知识点,支持展开/收起

1.5 数据规则

维度说明
来源getLecture(classId) 接口(EES 系统)
字段syllabusObj:适合对象(suitableFor) / 培养目标(target) / 课时列表(lectures[])
与主页区别主页仅展示前3条 + "查看全部";此子页展示全量课时列表
数据共享与主页使用同一接口同一数据源,子页进入时不重复请求(从缓存取)

1.5 交互规则

操作响应
点击课时标题展开/收起该课时的知识点详情(FoldPage 折叠动画)
点击返回返回课程详情主页

1.5 异常与兜底

场景处理
大纲数据为空不应进入此页面(主页无"查看全部"入口时不可达)
接口失败展示"加载失败,请重试"占位

1.5 配置项清单

— 数据来源为 EES 系统,前端无独立配置项。

六、老师详情子页 教师信息
1.6 老师详情展示

参考快照分享设计稿
(03-首页 指导员详情)

1.6 界面结构

  • 顶部 Banner:教师大图(背景图)
  • 教师信息卡:姓名 + 头衔(如"李文 / 小学数学授课老师")
  • 标签胶囊:学历 / 专业 / 教学风格标签(如:本科 / 光电信息科学 / 严肃活泼 / 认真负责)
  • 简介:富文本教师简介
  • 评价概况:评价分数 + 学员好评摘要 一期(2026-07-26 修订:本期隐藏,9月版本不实现)
  • 名下班级列表:该教师负责的班级列表(可点击跳转对应班级详情)
2026-07-26 修订 一期:老师详情子页本期仅展示老师介绍相关内容(Banner/信息卡/标签/简介/名下班级),评价概况与评价列表区块隐藏(9月版本不实现)。

1.6 数据规则

维度说明
来源getTeacherDetail(teacherId) + getCommentSummary + getClasses
入参teacherId + madId(路由 query 传入)
评价列表teacherDetails.getList(teacherId) 分页获取
名下班级teacherDetails.getClasses(teacherId, ...) 获取教师负责班级

1.6 交互规则

操作响应
点击名下班级跳转该班级的课程详情页
点击分享触发 onShareAppMessage 分享给微信好友;分享无需登录(2026-07-26 确认 三期
点击返回返回课程详情主页
分享参数:title="姓名 - 学科授课老师",path 携带 teacherId + shareUserId(用于归因统计)。

1.6 异常与兜底

场景处理
教师详情接口失败展示"加载失败"占位 + 重试按钮
教师无评价数据隐藏评价概况区块
教师无名下班级隐藏名下班级列表区块
头像加载失败/未维护按性别显示默认头像;无性别/待排老师/兼职老师→品牌头像
待排/兼职老师姓名统一显示"卓越老师",不可点击进入详情页(在 m1 老师区块处理)

1.6 配置项清单

配置项说明
教师信息后台维护,接口返回全量字段
分享图片使用教师头像作为分享卡片封面
七、骨架图(加载态) 首次加载
1.7 骨架图
课程详情骨架图

1.7 界面结构

  • 头部区:大面积矩形占位(模拟 Banner 区域)
  • Tab 区:4个圆角矩形占位条
  • 信息区:标签占位 + 标题占位条 + 多行短条占位
  • 价格区:短条占位(模拟价格数字)
  • 老师区:圆形占位 + 右侧短条
  • 底部:按钮占位条

1.7 触发场景

场景表现
首次进入详情页展示完整骨架图,班级详情接口返回后替换为实际内容
网络极慢(>3s)骨架图持续展示,不做超时中断

1.7 配置项清单

— 前端固定实现,无后台配置。骨架图为纯 CSS 动画占位。

八、数据流程图 Mermaid

1.8 加购主流程(详情页 → 校验 → 加入购物车)

flowchart TD
  Start[用户在详情页点主按钮] --> Btn{按钮状态机决策}
  Btn -- 已下架/已作废 --> Disabled[禁用态 footer替换为提示文案]
  Btn -- 关注名额 --> Att[调用关注接口]
  Btn -- 咨询登记 --> Reg[调用咨询登记接口]
  Btn -- 诊断后选择 --> Diag[跳转TES诊断系统]
  Btn -- 加入购物车 --> CheckLogin{已登录?}

  CheckLogin -- 否 --> Login[跳转登录页]
  Login --> CheckLogin
  CheckLogin -- 是 --> CheckChild{已绑学员?}
  CheckChild -- 否 --> AddStu[跳转添加学员页]
  AddStu --> CheckChild
  CheckChild -- 是 --> CheckEnded{已结课?}
  CheckEnded -- 是 --> ToastEnded[toast已结课请看其他]
  CheckEnded -- 否 --> CheckExam{诊断状态}

  CheckExam -- 未诊断 --> Diag
  CheckExam -- 无需/达标 --> CheckOnline{在线课且已开课?}
  CheckOnline -- 否 --> AddItem[调用加购接口]
  CheckOnline -- 是 --> CheckFull{需全费?}
  CheckFull -- 是 --> AddItem
  CheckFull -- 否 --> ChooseType[弹选段/续报弹窗]
  ChooseType --> AddItem

  AddItem --> Resp{响应码}
  Resp -- 200成功 --> Success[飞入动画+toast成功+刷新角标]
  Resp -- 5001可替换 --> Replace[弹课程冲突替换弹窗]
  Replace -- 确认替换 --> Delete[删除原班级]
  Delete --> AddItem
  Resp -- 5002不可替换 --> Conflict[弹冲突展示仅查看]
  Resp -- 其他错误 --> ToastErr[toast错误消息]
    
九、修订记录(V1.1 / 2026-07-28)
修订项修订内容期数依据来源日期
学员评价隐藏课程详情页学员评价区块及评价列表子页本期隐藏(9月版本不实现),相关规则保留作后续版本依据一期改动汇总 + 2026-07-26确认2026-07-26
课程服务隐藏课程服务区块本期隐藏(9月版本不实现)一期改动汇总 + 2026-07-26确认2026-07-26
老师详情子页本期仅展示老师介绍相关内容,评价概况与评价列表隐藏一期改动汇总 + 2026-07-26确认2026-07-26
分享免登录课程详情页与老师详情子页分享无需登录三期改动汇总 + 2026-07-26确认2026-07-26
学位展示规则剩余名额>5显示"热报中",≤5显示"剩N名额",=0显示"已满",与选课页口径一致二期2026-07-26确认2026-07-26
同主体相似课程推荐「查看同类班级」入口及排序规则确认保留,不变更一期2026-07-26 确认2026-07-26
开课后优惠展示补充展示层规则:开课后不显示优惠信息;折扣仅为展示用途,实际支付以真实可享优惠策略为准,开课后是否允许享受优惠由 TMS 后台配置(§1 状态说明)一期2026-07-28 测试评审会2026-07-28
期数徽标说明:一期 2026年9月版本实现;二期 后续版本;三期 规划中。仅本次修订涉及的内容打标,存量未变更内容不打标。