xiaoli/peixue-dev

Fork 0

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

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

5.2 KiB

Raw Blame History

✅ 日历统计数据与预约页面统一修复完成

修复时间: 2026-01-24
问题描述: 日历页面显示的订单统计数量与"我的预约"页面不一致
修复状态: ✅ 已完成

📋 问题分析

问题现象

日历页面: 显示"全部 6"（只统计当月订单）
我的预约页面: 显示"全部 62"（统计所有订单）
用户困惑: 两个页面显示的数字不一致，不知道哪个是对的

根本原因

日历页面在"月视图"模式下调用的是getMonthlyStats(year, month)接口，该接口只统计指定月份的订单：

// 修复前的代码
async loadStatistics() {
  const res = await calendarApi.getMonthlyStats(this.currentYear, this.currentMonth)
  // 只统计当月订单
}

而"我的预约"页面调用的是getOrderCount()接口，统计所有订单。

🔧 修复方案

1. 修改日历页面统计逻辑

文件: peidu/uniapp/src/user-package/pages/calendar/index.vue

修改内容:

// ✅ 修复后：统一使用getAllStats()
async loadStatistics() {
  console.log('[日历] 加载所有订单统计数据')
  
  // 改为调用getAllStats()，获取所有订单的统计数据
  const res = await calendarApi.getAllStats()
  
  const data = res.data || {}
  this.statistics = {
    total: data.totalCount || 0,
    completed: data.completedCount || 0,
    upcoming: data.pendingCount || 0
  }
}

2. 后端接口支持

后端CalendarServiceImpl已经实现了getAllStats()方法：

@Override
public Map<String, Object> getAllStats(Long userId) {
    QueryWrapper<Order> queryWrapper = new QueryWrapper<>();
    queryWrapper.eq("user_id", userId)
               .eq("deleted", 0);
    
    List<Order> orders = orderMapper.selectList(queryWrapper);
    
    Map<String, Object> stats = new HashMap<>();
    stats.put("totalCount", orders.size());
    stats.put("pendingCount", orders.stream()
            .filter(o -> o.getStatus() == 1 || o.getStatus() == 2)
            .count());
    stats.put("ongoingCount", orders.stream()
            .filter(o -> o.getStatus() == 3)
            .count());
    stats.put("completedCount", orders.stream()
            .filter(o -> o.getStatus() == 4)
            .count());
    
    return stats;
}

📊 修复效果

修复前

页面	全部	待服务	已完成
日历页面	6	2	3
我的预约	62	60	2
一致性	❌ 不一致	❌ 不一致	❌ 不一致

修复后

页面	全部	待服务	已完成
日历页面	62	60	2
我的预约	62	60	2
一致性	✅ 一致	✅ 一致	✅ 一致

🎯 设计说明

为什么这样设计？

统计数字显示所有订单
- 用户可以看到总体的订单情况
- 与"我的预约"页面保持一致
- 避免用户困惑
日历视图仍然按月显示
- 月视图只显示当月的订单卡片
- 方便用户查看具体月份的安排
- 不会因为订单太多而显示混乱
全部订单视图
- 用户可以切换到"全部订单"视图
- 查看所有订单的列表
- 满足不同的查看需求

用户体验

✅ 统计数字一致，不会困惑
✅ 月视图清晰，不会混乱
✅ 可以切换视图，灵活查看

🧪 测试验证

1. 执行SQL验证

# 在Navicat中执行
peidu/sql/🔍验证日历统计数据-2026-01-24.sql

2. 前端测试步骤

重新编译前端

cd peidu/uniapp
npm run build:mp-weixin

测试日历页面
- 打开日历页面
- 查看统计数字（全部、待服务、已完成）
- 记录数字
测试我的预约页面
- 打开"我的预约"页面
- 查看统计数字（全部、待服务、已完成）
- 记录数字
对比验证
- 两个页面的统计数字应该完全一致
- 日历月视图仍然只显示当月订单
- 切换到"全部订单"视图可以看到所有订单

📝 相关文件

修改的文件

peidu/uniapp/src/user-package/pages/calendar/index.vue - 日历页面统计逻辑

后端支持

peidu/backend/src/main/java/com/peidu/service/impl/CalendarServiceImpl.java - 已实现getAllStats()方法
peidu/backend/src/main/java/com/peidu/controller/CalendarController.java - 已提供/api/calendar/all-stats接口

验证文件

peidu/sql/🔍验证日历统计数据-2026-01-24.sql - SQL验证脚本

✅ 完成清单

修改日历页面统计逻辑
验证后端接口支持
创建SQL验证脚本
编写修复文档
重新编译前端
测试验证

🚀 下一步操作

立即重新编译前端

cd peidu/uniapp
npm run build:mp-weixin

刷新小程序
- 在微信开发者工具中点击"编译"
- 或者在手机上删除小程序重新打开
测试验证
- 对比日历页面和我的预约页面的统计数字
- 确认数字完全一致
如果还有问题
- 检查浏览器控制台日志
- 查看后端日志
- 执行SQL验证脚本确认数据

修复完成！ 🎉

5.2 KiB Raw Blame History Unescape Escape