一、项目亮点(设计+业务+体验)
1.1 业务核心亮点
(1)免责闭环设计
-
手写签名留痕:采用Canvas实现真实笔迹采集,每次签名生成唯一图片ID,可作为法律凭证;
-
培训全流程追溯:学-签-考三步骤强制闭环,未签到不能考试,确保培训完整性;
-
缺考缺签实时预警:后台自动统计未完成人员,支持一键导出带签名的Excel报表;

(2)数据驱动管理
-
多维度看板:商户完成率TOP5、进行中培训进度、年度统计图表;
-
精准催办:可直接从缺考名单发起微信服务通知提醒;
-
培训档案:每位员工的学习记录、签到图片、考试成绩永久保存;
1.2 用户体验亮点
(1)手写签名体验优化
-
触摸优化:支持手指和电容笔书写,防误触,防止页面滚动;
-
实时预览:签名轨迹实时显示,提供重写功能;
-
签名示例:展示标准签名样式,引导用户规范书写;

(2)交互创新
-
考试答题卡:网格化展示所有题目状态(已答/未答/当前);
-
错题本联动:非满分试卷自动进入错题解析,引导用户直到满分;
-
进度环:使用conic-gradient实现学习进度可视化;

二、功能清单
| 序号 | 页面名称 | 核心功能 | 设计重点 |
|---|---|---|---|
| 01 | 登录页 | 微信授权登录 | 品牌展示、一键登录按钮 |
| 02 | 首页 | 通知弹窗+待办卡片 | 顶部弹窗、进度卡片 |
| 03 | 通知列表页 | 历史通知 | 已读未读状态、红点提示 |
| 04 | 课程库页 | 课程分类与列表 | Tab切换、进度条 |
| 05 | 课程详情页 | 视频/文档入口 | 外部链接跳转示意 |
| 06 | 培训任务页 | 单次培训闭环 | 三步流程(学-签-考) |
| 07 | 手写签到页 | 电子签名 | 画板组件、签名效果 |
| 08 | 考试页 | 答题+计时器 | 答题卡、计时器、题目切换 |
| 09 | 成绩结果页 | 分数+错题展示 | 非满分展示错题解析 |
| 10 | 个人中心页 | 个人信息+入口 | 成绩入口、错题本入口 |
| 11 | 历史成绩页 | 成绩列表 | 筛选、查看详情 |
| 12 | 管理后台页 | 数据看板 | 图表、导出按钮 |
三、功能描述
1. 身份认证与登录模块
**1.1 微信授权登录:**允许用户通过微信一键登录,获取头像、昵称。
**1.2 手机号绑定:**绑定手机号,用于身份唯一识别和后台数据关联。
1.3 角色识别: 根据后台导入的手机号/工号,自动区分用户身份(商户员工 / 公司员工),展示不同的课程和考试包。

2. 首页与通知模块
2.1 首页弹窗: 管理员发布的重要通知,首次进入小程序时弹窗展示(可设置"不再提醒"或"仅一次")。

2.2 通知列表: 展示所有历史通知,按时间倒序排列,未读通知有红点标记。
2.3 通知详情: 展示图文详情,支持跳转外部链接(如腾讯文档/预案文件)。
2.4 待办卡片: 首页顶部展示当前待完成的培训任务(如:1门必修课待学,1场考试待考)。

3. 培训学习模块
3.1 课程分类: 顶部Tab切换(全部 / 必修 / 选修 / 公司课程 / 商户课程)。
3.2 课程列表: 展示课程封面、标题、时长/页数、学习进度(已学/未学)。

3.3 课程详情页:
-
-
图文介绍
-
视频播放: 点击跳转优酷小程序播放 或 使用 web-view 内嵌播放。
-
文档阅读: 点击跳转腾讯文档小程序(推荐)或 展示PDF文件。
-
学习记录: 后台记录"首次学习时间"和"最后学习时间"。
-

4. 考试与题库模块
4.1 待考列表: 列出所有需要参加的考试,显示考试名称、截止时间、倒计时、试卷总分。
4.2 在线考试:
-
-
考试规则确认页(显示时长、题数、注意事项)。
-
答题界面(支持单选、多选、判断,显示答题卡,自动计时)。
-
限时交卷(时间到自动交卷)。
-

4.3 立即出分: 交卷后立即显示分数。
4.4 错题本:
-
-
若考试非满分,自动展示错题及答案解析(告知正确答案和原因)。
-
提供"重新考试"按钮。
-
4.5 满分荣耀: 若考试满分,展示恭喜页面,并记录成绩。

5. 签到与培训闭环模块
5.1 培训任务卡片: 针对特定的"单次培训",展示一体化流程进度。
5.2 手写签名组件:
-
-
点击"签到"按钮,弹出画板。
-
支持手写、重写、保存。
-
签名采集为图片格式。
-

5.3 签到记录: 已签到状态变为不可点击,并显示签到时间。
6. 个人中心与查询模块
6.1 个人资料: 头像、昵称、所属商户/部门。
6.2 我的成绩: 历史考试成绩列表(考试名称、分数、是否满分、考试时间)。
6.3 错题集: 汇总所有历史错题,供用户反复练习。
6.4 我的签到: 历史签到记录列表(含手写签名缩略图)。
