xiaoli/peixue-dev

Fork 0

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

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

6.8 KiB

Raw Blame History

✅ 待派单数量自动刷新功能实现完成

时间: 2026-01-25
状态: ✅ 已完成
优先级: P1

📋 问题描述

用户反馈：

"待派单点击立即派单应该派单给陪伴员，待派单的数量应该减少一个，现在点击立即派单后数量没有减少"

问题现象：

管理师在首页看到待派单数量（例如：3个）
点击"立即派单"按钮，跳转到派单页面
选择陪伴员，完成派单
返回首页后，待派单数量仍然显示3个（没有减少）

根本原因：

派单成功后，系统显示成功提示并返回首页
但首页组件没有监听派单成功事件
首页数据没有自动刷新，仍然显示旧数据

🔧 解决方案

方案设计

使用 uni.$emit / uni.$on 事件总线机制：

派单页面 (assign.vue)
    ↓ 派单成功
    ↓ uni.$emit('refreshManagerHome')
    ↓
首页 (ManagerHome.vue)
    ↓ uni.$on('refreshManagerHome', handleRefresh)
    ↓ 调用 loadPendingWorkOrders()
    ↓ 调用 loadTodayStats()
    ↓ 刷新完成，数量更新

实施步骤

1️⃣ 派单页面发送刷新事件

文件: peidu/uniapp/src/manager-package/pages/manager/assign.vue

位置: submit() 方法中，派单成功后

async submit() {
  // ... 派单逻辑 ...
  
  uni.hideLoading()
  uni.showToast({ 
    title: '派单成功', 
    icon: 'success',
    duration: 2000
  })
  
  // 🔥 新增：触发首页刷新事件
  uni.$emit('refreshManagerHome')
  
  setTimeout(() => {
    uni.navigateBack()
  }, 2000)
}

状态: ✅ 已存在（之前已添加）

2️⃣ 首页监听刷新事件

文件: peidu/uniapp/src/pages/index/components/ManagerHome.vue

添加事件监听（mounted 生命周期）

mounted() {
  console.log('[管理师首页] ========== 组件已挂载 ==========')
  this.initDateTime()
  this.initManagerId()
  this.loadData()
  
  // 🔥 监听派单成功事件，刷新首页数据
  uni.$on('refreshManagerHome', this.handleRefresh)
},

添加事件清理（beforeDestroy 生命周期）

beforeDestroy() {
  // 🔥 清理事件监听
  uni.$off('refreshManagerHome', this.handleRefresh)
},

添加刷新处理方法

methods: {
  handleRefresh() {
    console.log('[管理师首页] ========== 收到刷新事件 ==========')
    console.log('[管理师首页] 开始刷新待派单列表和统计数据')
    
    // 重新加载待派单订单和今日统计
    this.loadPendingWorkOrders()
    this.loadTodayStats()
    
    console.log('[管理师首页] ✅ 刷新完成')
  },
  
  // ... 其他方法 ...
}

状态: ✅ 已完成

🧪 测试步骤

测试场景

打开管理师首页
- 查看待派单数量（例如：3个）
- 记录当前数量
点击"立即派单"按钮
- 跳转到派单页面
- 选择一个陪伴员
- 点击"确认派单"
验证刷新效果
- 等待派单成功提示
- 自动返回首页
- 验证点：待派单数量应该减少1个（变成2个）

验证控制台日志

[快速派单] 派单成功
[管理师首页] ========== 收到刷新事件 ==========
[管理师首页] 开始刷新待派单列表和统计数据
[管理师首页] ========== 开始加载待派单订单 ==========
[管理师首页] ✅ 最终待派单订单数量: 2
[管理师首页] ✅ 已更新 todayStats.pendingOrders: 2
[管理师首页] ✅ 刷新完成

预期结果

✅ 派单成功后，首页待派单数量立即减少
✅ 控制台显示刷新事件日志
✅ 数据与后端保持一致
✅ 用户体验流畅，无需手动刷新

📊 技术细节

事件总线机制

uni.$emit(eventName, ...args)

触发全局自定义事件
可以跨页面、跨组件通信
适合页面间的数据同步

uni.$on(eventName, callback)

监听全局自定义事件
在组件 mounted 时注册
必须在 beforeDestroy 时清理，避免内存泄漏

uni.$off(eventName, callback)

移除全局自定义事件监听
防止组件销毁后仍然响应事件
避免重复注册导致多次执行

数据刷新逻辑

handleRefresh() {
  // 1. 重新加载待派单订单列表
  this.loadPendingWorkOrders()
  //    ↓ 调用 API: getWorkOrders()
  //    ↓ 过滤 status=1 && payStatus=1
  //    ↓ 更新 this.pendingWorkOrders
  //    ↓ 更新 this.todayStats.pendingOrders
  
  // 2. 重新加载今日统计数据
  this.loadTodayStats()
  //    ↓ 调用 API: getStatistics()
  //    ↓ 更新 processingOrders, completedOrders, activeTeachers
  //    ↓ 不覆盖 pendingOrders（保留步骤1的值）
}

为什么不覆盖 pendingOrders？

在 loadTodayStats() 方法中：

// 🔥 关键修复：不覆盖 pendingOrders，保留从订单列表获取的值
this.todayStats.processingOrders = res.data.processingOrders || 0
this.todayStats.completedOrders = res.data.completedOrders || 0
this.todayStats.activeTeachers = res.data.activeTeachers || 0
// ⚠️ 注意：没有设置 this.todayStats.pendingOrders

原因：

pendingOrders 的值来自 loadPendingWorkOrders() 方法
该方法会过滤订单列表（status=1 && payStatus=1）
这是最准确的待派单数量
getStatistics() API 返回的数量可能不准确或有延迟

🎯 关键代码位置

1. 派单页面（事件发送）

文件: peidu/uniapp/src/manager-package/pages/manager/assign.vue
方法: submit()
行号: 约 280 行

2. 首页组件（事件监听）

文件: peidu/uniapp/src/pages/index/components/ManagerHome.vue
生命周期: mounted(), beforeDestroy()
方法: handleRefresh()
行号: 约 300-320 行

✅ 完成检查清单

派单页面发送刷新事件
首页监听刷新事件
添加事件清理逻辑
实现刷新处理方法
测试派单后数量减少
验证控制台日志
编写技术文档

📝 相关文档

[一次性]家长预约支付流程修复-方案A-2026-01-25.md
[一次性]管理师端前端过滤逻辑错误修复-2026-01-25.md
[一次性]待派单列表数据一致性修复-2026-01-25.md

🎉 总结

通过实现事件总线机制，成功解决了派单后首页数量不刷新的问题。

核心改进：

✅ 派单成功后自动刷新首页数据
✅ 待派单数量实时更新
✅ 用户体验流畅，无需手动刷新
✅ 代码结构清晰，易于维护

技术亮点：

使用 uni.$emit / uni.$on 实现跨页面通信
正确处理事件监听的注册和清理
避免数据覆盖，保证数据准确性

修复完成时间: 2026-01-25
测试状态: ✅ 待用户测试验证

6.8 KiB Raw Blame History Unescape Escape