模块说明:课程(班次)详情页是用户从首页推荐/选课列表/班级列表/搜索/分享等入口进入后,完成"了解 → 加购"关键转化动作的核心页面。页面信息层级深、字段多、状态分支复杂。
入口:选课列表点击课程卡 / 首页推荐 / 分享卡片 / 购物车"班级失效→重选" | 页面组成:服务详情主页 → 服务大纲子页 → 老师详情子页 → 5个弹窗
| 维度 | 说明 |
|---|---|
| 来源 | 班级详情主接口 getClassDetail(classId) + 实时数据 getClassData(classId) |
| 头部媒体 | getCourseIntroMedia 接口返回 image + video 混合列表,支持轮播 |
| 价格逻辑 | 折扣期走 discountPrice;否则 actualPrice(已开课/未开课不同)+ classMaterialFee |
| 分段缴费 | getClassPaySegment 接口返回段次数组(段名/起止日/价格),学习资料费注入第1段 |
| 老师列表 | getTeacher 接口返回,按 teacherRoleId 升序排列 |
| 大纲数据 | getLecture 接口(EES 系统),返回适合对象/培养目标/课时列表 |
| 副标题 | 后台配置的课程副标题,展示在班级名下方 |
| 优惠标签 | getDiscountTagInfo 接口返回当前班级可用优惠标签列表 |
| 课程服务 | 按 classType 返回对应课程服务内容 |
| 评价数据 | getCommentList 接口,按星级降序→同星级按更新时间降序;匿名→默认头像+"卓越学员";非匿名→学员头像+姓名 |
| 购物车角标 | getCartQuantity 接口实时获取商品数量,>0 显示红点 |
| 刷新时机 | 每次进入页面(onShow)重新请求班级详情 + 实时数据 |
| 状态 | 表现 |
|---|---|
| 已登录有数据 | 完整展示所有区块,底部主按钮根据状态机显示对应文案 |
| 未登录 | 详情正常浏览(不需登录),点加购时拦截跳登录页 |
| 折扣期 | 显示折扣倒计时区(折扣价+原价+倒计时);小于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 档文案统一为"已满班") |
| 操作 | 响应 |
|---|---|
| 滑动/点击 Tab | 点击Tab自动滚动到对应区域;滚动到对应区域Tab自动高亮 |
| 点击"分段缴费 ▼" | 弹出分段缴费弹窗(模块1.3) |
| 点击优惠标签 | 弹出优惠详情弹窗(模块1.4) |
| 点击老师头像/名字 | 跳转老师详情子页(模块1.6) |
| 点击"查看全部"大纲 | 跳转服务大纲子页(模块1.5) |
| 点击分享按钮 | 触发 onShareAppMessage 分享小程序卡片(title=班级名,path 携带 classId);分享无需登录(2026-07-26 确认 三期) |
| 点击"查看同类班级" | 跳转选课列表(当前班级置顶),排序规则:①按最近校区由近到远;②非满班 > 满班;③非满班按学位数低→高→更新时间;④满班按满班时间倒序排到列表底部 |
| 点击主按钮(加购) | 按状态机决策(详见模块1.2),成功后飞入动画 + toast"选择服务成功" |
| 点击客服图标 | 跳转企微/在线客服 IM 页面 |
| 点击顾问入口 | 跳转顾问详情页(复用首页顾问规则) |
| 点击购物车角标 | 跳转购物车页面 |
| 场景 | 处理 |
|---|---|
| 班级详情接口失败 | 显示骨架图,提供重试按钮 |
| 头部媒体缺省 | 有视频+图片:列表页展示视频,详情页视频+图片;仅有视频或图片:列表页+详情页都展示;都没有:详情页展示缺省图,列表页不展示 |
| 老师列表为空 | 隐藏"授课老师"区块 |
| 大纲数据为空 | 隐藏"服务大纲"区块 |
| 富文本详情为空 | 显示默认占位图 |
| 购物车角标接口失败 | 不显示角标数(静默降级) |
| 服务降级 | 评价/优惠/详情 3 个区块可通过 moduleCode 独立隐藏 |
| 老师头像兜底 | 未维护头像→按性别显示默认头像;无性别/待排/兼职→品牌头像;待排/兼职老师名显示"卓越老师"且不可点击 |
| 评价数据为空 | 隐藏"学员评价"区块 |
| 抢报倒计时服务降级 | 使用客户端本地时间兜底计算 |
| 配置项 | 维度 | 说明 |
|---|---|---|
| 头部媒体 | 课程 | 后台配置图片/视频列表,支持混合轮播 |
| 班级类型标签 | 班级 | 在线/线下/双师/AI,后台字段 classType 决定 |
| 分段缴费 | 班级 | 后台配置段次(产品分段/手动分段-网报/手动分段-TMS) |
| 优惠标签 | 课程 | 后台配置折扣规则,接口返回可用标签 |
| 服务降级开关 | 全局 | class_comment / class_discount / class_course_detail 三个 moduleCode |
| 预售/抢报时间 | 班级 | 后台配置开售时间,前端根据服务端时间计算倒计时 |
| 副标题 | 课程 | 后台配置课程副标题,展示在班级名下方 |
| 课程服务 | 班级 | 按 classType 返回对应课程服务内容 |
| 顾问入口 | 城市 | 企微链接由后台配置(复用首页顾问规则) |
底部 Footer 固定吸底,从左到右依次为:客服图标 → 主操作按钮(占满剩余宽度)→ 顾问图标。主按钮根据以下状态机展示不同文案和交互行为。
| 优先级 | 判断条件 | 按钮文案 | 可点击 | 动作 |
|---|---|---|---|---|
| 1a | 班级已下架(classDisabled / classOffShelf) | —(整个footer替换为"服务已经下架啦~要不要瞧瞧别的~") | 否 | 无 |
| 1b | 班级已作废(classInvalid) | —(整个footer替换为"服务已经作废啦~要不要瞧瞧别的~") | 否 | 无 |
| 2 | 名额=0 且已登录 | "关注名额" / 已关注则"已关注" | 是/灰禁 | 调用 setAttention 接口 |
| 3 | 需咨询登记(classCanNetReg=2)且可登记 | "咨询登记" | 是 | 调用 addRecordConsult 接口 |
| 4 | 已登记 | "已登记" | 否(灰禁) | 无 |
| 5 | 未登录 且需咨询登记 | "咨询登记" | 是 | 先跳登录,登录后返回继续 |
| 6 | 需诊断(未登录或无学员或 examStatus=2) | "诊断后选择服务" | 是 | 跳转 TES 诊断系统 |
| 7 | 预售未到开售时间 | "加入购物车"(实际为预约) | 是 | 执行加购流程 |
| 8 | 其他默认(正常可购买) | "加入购物车" | 是 | 执行加购流程(onJoinCart) |
| 错误码 | 含义 | 处理方式 |
|---|---|---|
| 200 | 加购成功 | 飞入动画 + toast"选择服务成功" + 刷新购物车角标 |
| 5001 | 同班型/时段冲突(可替换) | 弹课程冲突替换弹窗,确认后删除原班级再加购新班级 |
| 5002 | 课程冲突(不可替换) | 弹冲突展示弹窗,仅告知不可操作 |
| 5003 | 时间冲突 | toast 提示冲突信息 |
| 5004 | 学位不足 | toast 提示学位信息 |
| 5005 | 年级不匹配 | toast 提示年级要求 |
| 其他 | 通用错误 | toast 接口返回的错误消息 |
| 操作 | 响应 |
|---|---|
| 未登录点加购 | 拦截跳转登录页,登录后自动返回当前详情页 |
| 已登录无学员点加购 | 跳转添加学员页(02-登录与学员绑定) |
| 面授已开课插班加购 | 不弹窗,直接加购剩余讲次,价格展示剩余讲次学费(不需要删除线展示原价) |
| 在线课已开课插班加购(classOpenedNeedFullFee=false) | 弹选段/续报弹窗("全报"→全部讲次+学费原价 / "续报"→剩余讲次+剩余价),选后执行加购 |
| 已结课班级点加购 | toast"抱歉,该班级结课了,请看看其他班级" |
| 加购成功 | 飞入购物车动画 + 刷新角标 + 神策埋点 AddToOrderList |
| 场景 | 处理 |
|---|---|
| 加购接口超时 | 解除 Loading 锁,toast"网络异常,请重试" |
| 冲突替换确认后失败 | toast 错误信息,保持原购物车状态不变 |
| 关注名额接口失败 | toast"操作失败,请重试" |
| 咨询登记接口失败 | toast"登记失败,请重试" |
| 配置项 | 说明 |
|---|---|
| classCanNetReg | 后台配置,=2 时走咨询登记分支而非直接加购 |
| classIsNoTestForNew | 后台配置,=true 时新生免诊断直接加购 |
| classOpenedNeedFullFee | TMS"开课后是否收全额"配置:=true 时已开课也需全费(不弹续报选择,加购全部讲次+学费原价);=false 时弹选段/续报弹窗(全报/续报) |
| 预售开售时间 | 后台配置 negRegDate,前端根据服务端时间差计算倒计时 |
| 维度 | 说明 |
|---|---|
| 来源 | getClassPaySegment 接口返回 classPaySegments 数组 |
| 字段 | 每段包含:segmentName(段名)、startDate(起始日)、endDate(截止日)、payPrice(缴费价格) |
| 资料费注入 | 第1段的 payPrice 自动加上 classMaterialFee |
| 段次来源 | 3种:产品分段(课程后台配置)/ 手动分段-网报 / 手动分段-TMS |
| 展示条件 | classPaySegments 数组非空时才显示"分段缴费 ▼"入口按钮 |
| 状态 | 表现 |
|---|---|
| 有分段数据 | 主页价格区显示"分段缴费 ▼"按钮,点击弹此弹窗 |
| 无分段数据 | "分段缴费 ▼"按钮不展示,价格区仅显示总价 |
| 操作 | 响应 |
|---|---|
| 点击"分段缴费 ▼" | 从底部弹出半屏弹窗展示明细 |
| 点击 ✕ / 蒙层 | 关闭弹窗 |
| 配置项 | 说明 |
|---|---|
| 分段缴费段次 | 后台配置(支持产品分段 + 顾问手动分段两种来源) |
| 学习资料费 | 后台配置 classMaterialFee,自动合入第1段显示 |
本模块无独立设计稿
交互逻辑见右侧说明
| 弹窗 | 数据来源 | 关键字段 |
|---|---|---|
| 优惠详情 | getDiscountTagInfo 接口 | 优惠类型/折扣金额/适用条件/有效期 |
| 选段/续报 | classNum / classPrice / classLeftNum / classLeftPrice | 全报总课次&总价 vs 续报剩余课次&剩余价 |
| 课程冲突 | 加购接口 response.data | 新班级信息 + 冲突原班级信息(老师/地点/时间) |
| 操作 | 响应 |
|---|---|
| 优惠弹窗 - 点"多科联报" | 跳转多科联报页面(展示同时段多科优惠组合) |
| 选段弹窗 - 选"全报" | 执行加购(isFull=true) |
| 选段弹窗 - 选"续报" | 执行加购(isFull=false,只购买剩余段次) |
| 冲突弹窗 - 确认替换(5001) | 先调 deleteItem 删除原班级,再调 addItem 加购新班级 |
| 冲突弹窗 - 关闭(5002) | 关闭弹窗,不做任何操作 |
| 所有弹窗 - 点蒙层/✕ | 关闭弹窗 |
| 场景 | 处理 |
|---|---|
| 冲突替换 - 删除原班级失败 | toast 错误信息,不执行后续加购,弹窗保持 |
| 冲突替换 - 删除成功但加购新班级失败 | toast 错误信息,告知用户"原班级已移除,请重新加购" |
| 优惠标签接口失败 | 隐藏优惠标签区域,不影响页面主体功能 |
| 配置项 | 说明 |
|---|---|
| 优惠规则 | 后台配置,接口返回 courseDiscountTags |
| 多科联报 | 后台配置科目组合优惠,前端通过优惠弹窗入口跳转 |
| classOpenedNeedFullFee | =true 时不弹选段弹窗,直接全费加购 |
沿用主页大纲区块样式
完整展示(不限3条)
| 维度 | 说明 |
|---|---|
| 来源 | getLecture(classId) 接口(EES 系统) |
| 字段 | syllabusObj:适合对象(suitableFor) / 培养目标(target) / 课时列表(lectures[]) |
| 与主页区别 | 主页仅展示前3条 + "查看全部";此子页展示全量课时列表 |
| 数据共享 | 与主页使用同一接口同一数据源,子页进入时不重复请求(从缓存取) |
| 操作 | 响应 |
|---|---|
| 点击课时标题 | 展开/收起该课时的知识点详情(FoldPage 折叠动画) |
| 点击返回 | 返回课程详情主页 |
| 场景 | 处理 |
|---|---|
| 大纲数据为空 | 不应进入此页面(主页无"查看全部"入口时不可达) |
| 接口失败 | 展示"加载失败,请重试"占位 |
— 数据来源为 EES 系统,前端无独立配置项。
参考快照分享设计稿
(03-首页 指导员详情)
| 维度 | 说明 |
|---|---|
| 来源 | getTeacherDetail(teacherId) + getCommentSummary + getClasses |
| 入参 | teacherId + madId(路由 query 传入) |
| 评价列表 | teacherDetails.getList(teacherId) 分页获取 |
| 名下班级 | teacherDetails.getClasses(teacherId, ...) 获取教师负责班级 |
| 操作 | 响应 |
|---|---|
| 点击名下班级 | 跳转该班级的课程详情页 |
| 点击分享 | 触发 onShareAppMessage 分享给微信好友;分享无需登录(2026-07-26 确认 三期) |
| 点击返回 | 返回课程详情主页 |
| 场景 | 处理 |
|---|---|
| 教师详情接口失败 | 展示"加载失败"占位 + 重试按钮 |
| 教师无评价数据 | 隐藏评价概况区块 |
| 教师无名下班级 | 隐藏名下班级列表区块 |
| 头像加载失败/未维护 | 按性别显示默认头像;无性别/待排老师/兼职老师→品牌头像 |
| 待排/兼职老师 | 姓名统一显示"卓越老师",不可点击进入详情页(在 m1 老师区块处理) |
| 配置项 | 说明 |
|---|---|
| 教师信息 | 后台维护,接口返回全量字段 |
| 分享图片 | 使用教师头像作为分享卡片封面 |
| 场景 | 表现 |
|---|---|
| 首次进入详情页 | 展示完整骨架图,班级详情接口返回后替换为实际内容 |
| 网络极慢(>3s) | 骨架图持续展示,不做超时中断 |
— 前端固定实现,无后台配置。骨架图为纯 CSS 动画占位。
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错误消息]
| 修订项 | 修订内容 | 期数 | 依据来源 | 日期 |
|---|---|---|---|---|
| 学员评价隐藏 | 课程详情页学员评价区块及评价列表子页本期隐藏(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 |