3.6 KiB
3.6 KiB
签到历史记录功能完善 - 2026-01-31
功能概述
完善了服务商端的签到核销历史记录查看功能,用户可以查看所有历史签到记录,支持日期筛选和分页加载。
修改内容
1. 修改签到核销页面 (checkin.vue)
文件路径: peidu/uniapp/src/provider-package/pages/provider/checkin.vue
修改内容:
- 将
goHistory()方法从显示"功能开发中"改为跳转到历史记录页面
// 修改前
goHistory() {
console.log('查看历史记录')
uni.showToast({ title: '历史记录功能开发中', icon: 'none' })
}
// 修改后
goHistory() {
console.log('查看历史记录')
uni.navigateTo({
url: '/provider-package/pages/provider/checkin-history'
})
}
2. 创建历史记录页面 (checkin-history.vue)
文件路径: peidu/uniapp/src/provider-package/pages/provider/checkin-history.vue
功能特性:
页面布局
-
日期筛选区域
- 日期选择器(可选择特定日期查看记录)
- 重置按钮(清除筛选条件)
-
统计信息卡片
- 总签到次数
- 本月签到次数
- 本周签到次数
-
历史记录列表
- 显示每条签到记录的详细信息
- 包含:日期、时间、课程名称、学生姓名、地点
- 签到状态标识
核心功能
-
数据加载
- 初始加载历史记录
- 支持下拉刷新
- 支持上拉加载更多(分页)
-
日期筛选
- 点击日期选择器选择特定日期
- 根据选择的日期过滤记录
- 重置按钮清除筛选
-
统计数据
- 显示总签到次数
- 显示本月签到次数
- 显示本周签到次数
-
记录详情
- 点击记录卡片查看详细信息
- 弹窗显示完整签到信息
接口调用
-
统计数据接口
GET /api/provider/checkin/stats 返回:{ total, thisMonth, thisWeek } -
历史记录接口
GET /api/provider/checkin/records 参数: - page: 页码 - size: 每页数量 - date: 筛选日期(可选) 返回:{ records: [...] }
3. 注册页面路由 (pages.json)
文件路径: peidu/uniapp/src/pages.json
添加配置:
{
"path": "pages/provider/checkin-history",
"style": {
"navigationBarTitleText": "签到历史",
"enablePullDownRefresh": true
}
}
页面交互流程
签到核销页面
↓ 点击"查看历史记录"按钮
签到历史页面
├─ 查看统计数据(总数、本月、本周)
├─ 浏览历史记录列表
├─ 选择日期筛选
├─ 下拉刷新数据
├─ 上拉加载更多
└─ 点击记录查看详情
用户体验优化
-
加载状态
- 显示加载中提示
- 防止重复加载
-
空状态
- 无记录时显示友好提示
- 提供清晰的图标和文字说明
-
分页加载
- 自动检测是否还有更多数据
- 显示"加载更多"或"没有更多了"提示
-
下拉刷新
- 支持下拉刷新最新数据
- 刷新时重置分页状态
待完善功能
-
导出功能
- 导出签到记录为Excel
- 导出指定日期范围的记录
-
更多筛选
- 按学生筛选
- 按课程筛选
- 日期范围选择
-
详情页面
- 创建独立的签到详情页面
- 显示更多信息(照片、位置地图等)
技术要点
- 使用 uni-datetime-picker 组件实现日期选择
- 实现分页加载和上拉加载更多
- 支持下拉刷新功能
- 统一的错误处理和提示
完成时间:2026-01-31