xiaoli/peixue-dev

Fork 0

xiaojiang dedaf98ea2 初始化项目：上传完整代码

2026-02-28 17:26:03 +08:00

6.5 KiB

Raw Blame History

✅ 订单详情添加打卡记录入口 - 完成

实施日期: 2026-01-26
功能: 在订单详情页面添加"查看所有打卡记录"按钮

🎯 需求

用户反馈：

家长端服务日历页面，显示全部订单，点击订单查看详情按钮，里面内容应该添加查看陪伴员打卡记录的页面

✅ 实施内容

1. 添加"查看所有打卡记录"按钮

位置: 订单详情页面 → 服务记录部分 → 底部

文件: peidu/uniapp/src/order-package/pages/order/detail.vue

功能:

📋 显示"查看所有打卡记录"按钮
🔗 点击跳转到打卡记录列表页面
👁️ 仅家长端显示（陪伴员端不显示）

按钮样式:

渐变绿色背景
图标 + 文字 + 箭头
点击效果（缩放+透明度）
阴影效果

📱 用户流程

家长端使用流程

服务日历页面
  ↓
点击"全部订单"
  ↓
查看订单列表
  ↓
点击某个订单
  ↓
进入订单详情
  ↓
滚动到"服务记录"部分
  ↓
查看当前订单的签到/签退记录
  ↓
点击"查看所有打卡记录"按钮
  ↓
进入打卡记录列表页面
  ↓
查看所有历史打卡记录

🎨 UI设计

按钮设计

┌─────────────────────────────────┐
│  📋  查看所有打卡记录  ›        │
└─────────────────────────────────┘

特点:

渐变绿色背景（#2d9687 → #3da896）
白色文字，加粗
左侧图标：📋
右侧箭头：›
圆角：12rpx
阴影效果
点击反馈

💻 代码实现

1. 模板部分

<!-- 查看更多打卡记录按钮 -->
<view 
  class="view-more-btn" 
  @click="goToCheckInRecords" 
  v-if="userType === 'parent' || userType === 'user'"
>
  <text class="btn-icon">📋</text>
  <text class="btn-text">查看所有打卡记录</text>
  <text class="btn-arrow">›</text>
</view>

2. 方法部分

// 跳转到打卡记录列表页面
goToCheckInRecords() {
  console.log('[订单详情] 跳转到打卡记录列表')
  uni.navigateTo({
    url: '/user-package/pages/checkin/records'
  })
}

3. 样式部分

.view-more-btn {
  margin-top: 20rpx;
  background: linear-gradient(135deg, #2d9687 0%, #3da896 100%);
  border-radius: 12rpx;
  padding: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(45, 150, 135, 0.2);
  
  &:active {
    opacity: 0.8;
    transform: scale(0.98);
  }
  
  .btn-icon {
    font-size: 32rpx;
  }
  
  .btn-text {
    font-size: 28rpx;
    color: #fff;
    font-weight: bold;
  }
  
  .btn-arrow {
    font-size: 40rpx;
    color: #fff;
    font-weight: bold;
  }
}

🔗 页面关系

服务日历页面
  ├─ 月视图
  │   └─ 点击日期 → 显示当天服务
  │       └─ 点击服务 → 订单详情
  │
  └─ 全部订单
      └─ 点击订单 → 订单详情
          └─ 服务记录部分
              ├─ 签到记录（当前订单）
              ├─ 签退记录（当前订单）
              ├─ 服务时长
              └─ [查看所有打卡记录] 按钮
                  └─ 打卡记录列表页面
                      └─ 所有历史打卡记录

✅ 功能特点

1. 智能显示

✅ 仅在有打卡记录时显示按钮
✅ 仅家长端显示（陪伴员端不显示）
✅ 按钮位置合理（服务记录部分底部）

2. 用户体验

✅ 按钮醒目，容易发现
✅ 点击反馈明显
✅ 跳转流畅
✅ 功能清晰

3. 设计一致性

✅ 与订单详情页面风格一致
✅ 与打卡记录列表页面风格一致
✅ 使用统一的主色调

🧪 测试建议

功能测试

✅ 从服务日历进入订单详情
✅ 查看服务记录部分
✅ 确认按钮显示正确
✅ 点击按钮跳转到打卡记录列表
✅ 确认打卡记录列表正常显示

UI测试

✅ 按钮样式正确
✅ 点击效果正常
✅ 在不同屏幕尺寸下显示正常
✅ 与其他元素间距合理

权限测试

✅ 家长端显示按钮
✅ 陪伴员端不显示按钮
✅ 管理师端不显示按钮

📝 相关文件

修改的文件

peidu/uniapp/src/order-package/pages/order/detail.vue
- 添加"查看所有打卡记录"按钮
- 添加跳转方法
- 添加按钮样式

关联的文件

peidu/uniapp/src/user-package/pages/calendar/index.vue - 服务日历页面
peidu/uniapp/src/user-package/pages/checkin/records.vue - 打卡记录列表页面

🎉 完成状态

✅ 添加"查看所有打卡记录"按钮
✅ 实现跳转功能
✅ 添加按钮样式
✅ 权限控制（仅家长端显示）
✅ 创建说明文档

状态: ✅ 已完成，可以测试使用

💡 使用说明

家长端操作步骤

进入服务日历
- 打开家长端
- 点击底部导航"日历"
查看订单
- 点击"全部订单"标签
- 查看所有订单列表
查看订单详情
- 点击任意订单
- 进入订单详情页面
查看打卡记录
- 滚动到"服务记录"部分
- 查看当前订单的签到/签退记录
查看所有打卡记录
- 点击"查看所有打卡记录"按钮
- 进入打卡记录列表页面
- 查看所有历史打卡记录

🔄 与其他功能的关系

服务日历功能

服务日历显示所有订单
点击订单进入详情
详情中可查看打卡记录

打卡记录功能

订单详情显示当前订单的打卡记录
打卡记录列表显示所有历史记录
两者相互补充，完整展示打卡信息

订单详情功能

显示订单基本信息
显示服务记录（打卡信息）
提供查看更多打卡记录的入口

📊 功能完整性

功能	状态	说明
服务日历	✅	显示所有订单
订单详情	✅	显示订单信息
打卡记录显示	✅	显示当前订单打卡
打卡记录入口	✅	新增按钮
打卡记录列表	✅	显示所有历史记录

🎯 总结

成功在订单详情页面添加了"查看所有打卡记录"按钮，家长现在可以：

✅ 在服务日历查看所有订单
✅ 点击订单查看详情
✅ 在详情中查看当前订单的打卡记录
✅ 点击按钮查看所有历史打卡记录

功能完整，用户体验流畅！

6.5 KiB Raw Blame History Unescape Escape