xiaoli/peixue-dev

Fork 0

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

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

6.4 KiB

Raw Blame History

管理师首页待派单数量显示错误修复

📋 问题描述

用户反馈：

"待派单数目不应该是65吗？为什么现在首页中的待派单是10？按道理来说这几个待派单都应该调用同一个接口"

实际情况：

工单管理页面：显示 65 个待派单 ✅
快速预约页面：显示 65 个待派单 ✅
管理师首页：显示 10 个待派单 ❌

🔍 问题根本原因

原因1：数据结构缺少字段

文件： peidu/uniapp/src/manager-package/pages/manager/index.vue

问题代码（第207-212行）：

stats: {
  totalTeachers: 0,
  totalParents: 0,
  totalOrders: 0,
  pendingReminders: 0  // ❌ 缺少 pendingOrders 字段
}

原因2：更新方法未设置待派单数量

问题代码（第316-322行）：

updateStatsFromResponse(data) {
  this.stats = {
    totalTeachers: data.activeTeachers || 0,
    totalParents: data.totalParents || 0,
    totalOrders: data.totalOrders || 0,
    pendingReminders: data.pendingReminders || 0
    // ❌ 没有设置 pendingOrders
  }
}

数据流程分析

后端接口返回：
{
  totalOrders: 267,
  pendingOrders: 65,    ← 后端有这个字段
  activeTeachers: 48,
  totalParents: 0,
  pendingReminders: 0
}
  ↓
前端 updateStatsFromResponse() 处理
  ↓
❌ 没有提取 pendingOrders 字段
  ↓
this.stats.pendingOrders = undefined
  ↓
页面显示：10（可能是初始值或缓存值）

✅ 修复方案

修复1：添加 pendingOrders 字段到数据结构

stats: {
  totalTeachers: 0,
  totalParents: 0,
  totalOrders: 0,
  pendingOrders: 0,  // ✅ 新增：待派单数量
  pendingReminders: 0
}

修复2：在更新方法中设置待派单数量

updateStatsFromResponse(data) {
  this.stats = {
    totalTeachers: data.activeTeachers || 0,
    totalParents: data.totalParents || 0,
    totalOrders: data.totalOrders || 0,
    pendingOrders: data.pendingOrders || 0,  // ✅ 新增：待派单数量
    pendingReminders: data.pendingReminders || 0
  }
}

修复3：已有的事件监听机制

代码中已经有完整的刷新机制：

mounted() {
  // 监听全局刷新事件
  uni.$on('refreshPendingOrders', this.handleRefresh)
  uni.$on('refreshManagerBooking', this.handleRefresh)
},

beforeDestroy() {
  // 移除事件监听
  uni.$off('refreshPendingOrders', this.handleRefresh)
  uni.$off('refreshManagerBooking', this.handleRefresh)
},

methods: {
  handleRefresh() {
    this.loadStats()  // 重新加载统计数据
  }
}

📊 三个页面的对比

页面	接口	字段映射	显示结果	状态
工单管理	`getStatistics(managerId)`	`data.pendingOrders`	65	✅ 正确
快速预约	`getStatistics(managerId)`	`data.pendingOrders`	65	✅ 正确
管理师首页	`getStatistics(managerId)`	~~未映射~~ → `data.pendingOrders`	10 → 65	✅ 已修复

🎯 修复后的效果

修复后，三个页面都会显示相同的待派单数量：

工单管理页面：65 个待派单 ✅
快速预约页面：65 个待派单 ✅
管理师首页：  65 个待派单 ✅

📝 测试步骤

步骤1：重新编译前端

cd peidu/uniapp
npm run dev:mp-weixin

步骤2：测试管理师首页

管理师登录
进入管理师首页
查看"待派单"数量
应该显示 65（与工单管理页面一致）

步骤3：测试派单后刷新

进入工单管理，派单一个订单
返回管理师首页
查看"待派单"数量是否减少为 64
验证三个页面的数量是否一致

步骤4：查看控制台日志

打开微信开发者工具的控制台，应该看到：

[管理师首页] mounted - 注册刷新事件监听
[管理师首页] 开始加载统计数据
[管理师首页] 后端统计响应: { pendingOrders: 65, ... }
[管理师首页] 更新统计数据: { pendingOrders: 65, ... }

🔧 相关修改

修改文件清单

文件	修改内容	行号	状态
`manager-package/pages/manager/index.vue`	添加 `pendingOrders` 字段到 `stats`	210	✅ 已完成
`manager-package/pages/manager/index.vue`	在 `updateStatsFromResponse` 中设置 `pendingOrders`	320	✅ 已完成

已有的正确实现

以下页面已经正确实现了待派单数量的显示：

工单管理页面 (work-orders.vue)

this.statistics = {
  pendingOrders: res.data.pendingOrders || 0,
  // ...
}

快速预约页面 (ManagerBooking.vue)

this.stats = {
  pendingOrders: data.pendingOrders || 0,
  // ...
}

💡 经验教训

1. 数据结构要完整

定义数据结构时，要确保包含所有需要的字段：

// ❌ 错误：缺少字段
stats: {
  totalOrders: 0,
  // 缺少 pendingOrders
}

// ✅ 正确：包含所有字段
stats: {
  totalOrders: 0,
  pendingOrders: 0,
  completedOrders: 0
}

2. 数据映射要一致

从后端获取数据后，要确保所有字段都正确映射：

// ❌ 错误：遗漏字段
updateStats(data) {
  this.stats = {
    totalOrders: data.totalOrders,
    // 遗漏了 pendingOrders
  }
}

// ✅ 正确：映射所有字段
updateStats(data) {
  this.stats = {
    totalOrders: data.totalOrders,
    pendingOrders: data.pendingOrders,
    completedOrders: data.completedOrders
  }
}

3. 多个页面要保持一致

如果多个页面显示相同的数据，要确保：

调用相同的接口
使用相同的字段名
使用相同的数据处理逻辑

4. 添加日志便于调试

在关键位置添加日志，便于排查问题：

console.log('[管理师首页] 后端返回数据:', data)
console.log('[管理师首页] 待派单数量:', data.pendingOrders)
console.log('[管理师首页] 更新后的stats:', this.stats)

🎉 修复完成

修复后，管理师首页的待派单数量显示问题已经解决：

✅ 数据结构包含 pendingOrders 字段
✅ 更新方法正确设置 pendingOrders
✅ 三个页面显示的数量一致
✅ 派单后所有页面都会刷新

修复完成时间： 2026-01-26

修复人员： Kiro AI

测试状态： ⚠️ 待用户测试验证

6.4 KiB Raw Blame History Unescape Escape