peixue-dev/Archive/peidu-temp-files/docs/✅✅✅P0问题修复方案-订单状态同步-2026-01-24.md

✅✅✅ P0问题修复方案 - 订单状态变更未同步

修复日期: 2026-01-24
问题级别: P0 - 影响核心业务
修复状态: 🚀 方案设计完成

---

📋 问题描述

订单状态变更后,各端(陪伴员端、管理师端、分销员端、家长端)的数据不同步,需要手动刷新才能看到最新状态。

影响场景:

1. 陪伴员接单后,管理师端看不到实时更新
2. 订单完成后,家长端需要刷新才能看到
3. 分销员端的佣金状态不同步
4. 订单状态流转过程中,各端数据不一致

---

🎯 解决方案对比

方案A: WebSocket 实时推送 (推荐但工作量大)

优点:

• 真正的实时推送
• 服务器主动通知客户端
• 用户体验最好

缺点:

• 需要实现 WebSocket 服务器
• 需要维护连接状态
• 前端需要改造
• 工作量大(预计2-3天)

方案B: 轮询机制 (临时方案,快速实现)

优点:

• 实现简单快速(1小时内完成)
• 不需要改造后端架构
• 前端改动最小

缺点:

• 不是真正的实时
• 会增加服务器请求量
• 有延迟(5-10秒)

---

🚀 采用方案: 轮询机制 (方案B)

考虑到紧急程度和实现成本,先采用轮询方案快速解决问题,后续再优化为WebSocket。

实现策略

1. 管理师端 - 工单列表自动刷新

场景: 管理师查看待派单列表时,陪伴员接单后自动更新

实现:

// manager-package/pages/manager/work-orders.vue
data() {
  return {
    refreshTimer: null,
    refreshInterval: 10000 // 10秒刷新一次
  }
},
mounted() {
  this.startAutoRefresh()
},
beforeDestroy() {
  this.stopAutoRefresh()
},
methods: {
  startAutoRefresh() {
    this.refreshTimer = setInterval(() => {
      this.loadOrderList() // 静默刷新,不显示loading
    }, this.refreshInterval)
  },
  stopAutoRefresh() {
    if (this.refreshTimer) {
      clearInterval(this.refreshTimer)
      this.refreshTimer = null
    }
  }
}

2. 陪伴员端 - 订单状态轮询

场景: 陪伴员查看我的订单时,订单状态自动更新

实现:

// teacher-package/pages/teacher/my-orders.vue
data() {
  return {
    statusCheckTimer: null,
    checkInterval: 5000 // 5秒检查一次
  }
},
mounted() {
  this.startStatusCheck()
},
beforeDestroy() {
  this.stopStatusCheck()
},
methods: {
  startStatusCheck() {
    this.statusCheckTimer = setInterval(() => {
      this.checkOrderStatus() // 检查订单状态变化
    }, this.checkInterval)
  },
  async checkOrderStatus() {
    // 只检查状态,不重新加载整个列表
    const orderIds = this.orderList.map(o => o.id)
    const res = await this.$api.order.batchCheckStatus(orderIds)
    if (res.code === 200) {
      // 更新变化的订单状态
      this.updateOrderStatus(res.data)
    }
  }
}

3. 家长端 - 订单详情页轮询

场景: 家长查看订单详情时,实时看到陪伴员接单、开始服务、完成服务

实现:

// user-package/pages/order/detail.vue
data() {
  return {
    detailRefreshTimer: null,
    refreshInterval: 5000 // 5秒刷新一次
  }
},
mounted() {
  this.startDetailRefresh()
},
beforeDestroy() {
  this.stopDetailRefresh()
},
methods: {
  startDetailRefresh() {
    // 只在订单未完成时轮询
    if (this.order.status < 4) {
      this.detailRefreshTimer = setInterval(() => {
        this.loadOrderDetail(false) // 静默刷新
      }, this.refreshInterval)
    }
  },
  stopDetailRefresh() {
    if (this.detailRefreshTimer) {
      clearInterval(this.detailRefreshTimer)
      this.detailRefreshTimer = null
    }
  }
}

4. 分销员端 - 佣金状态轮询

场景: 分销员查看订单列表时,佣金状态自动更新

实现:

// distributor-package/pages/distributor/order-list.vue
data() {
  return {
    commissionCheckTimer: null,
    checkInterval: 15000 // 15秒检查一次
  }
},
mounted() {
  this.startCommissionCheck()
},
beforeDestroy() {
  this.stopCommissionCheck()
},
methods: {
  startCommissionCheck() {
    this.commissionCheckTimer = setInterval(() => {
      this.loadOrderList(false) // 静默刷新
    }, this.checkInterval)
  }
}

---

🔧 后端支持接口

1. 批量检查订单状态

接口: POST /api/order/batch-check-status

请求:

{
  "orderIds": [1, 2, 3, 4, 5]
}

响应:

{
  "code": 200,
  "data": [
    {
      "orderId": 1,
      "status": 2,
      "statusChanged": true
    },
    {
      "orderId": 2,
      "status": 1,
      "statusChanged": false
    }
  ]
}

2. 获取订单状态变更时间

接口: GET /api/order/{id}/status-time

响应:

{
  "code": 200,
  "data": {
    "orderId": 1,
    "status": 2,
    "updateTime": "2026-01-24 15:30:00"
  }
}

---

📊 性能优化

1. 智能轮询

// 根据页面可见性调整轮询频率
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // 页面不可见时,降低轮询频率或停止轮询
    this.refreshInterval = 30000 // 30秒
  } else {
    // 页面可见时,恢复正常频率
    this.refreshInterval = 5000 // 5秒
  }
})

2. 条件轮询

// 只在订单状态未完成时轮询
if (this.order.status >= 4) {
  this.stopAutoRefresh() // 订单已完成,停止轮询
}

3. 静默刷新

// 不显示loading,避免影响用户操作
async loadOrderList(showLoading = true) {
  if (showLoading) {
    uni.showLoading({ title: '加载中...' })
  }
  // ... 加载数据
  if (showLoading) {
    uni.hideLoading()
  }
}

---

🧪 测试场景

场景1: 管理师派单 → 陪伴员接单

1. 管理师打开工单列表(待派单)
2. 陪伴员在另一个设备接单
3. 预期: 10秒内管理师端自动刷新,订单从列表消失

场景2: 陪伴员开始服务 → 家长端更新

1. 家长打开订单详情页(待服务状态)
2. 陪伴员点击"开始服务"
3. 预期: 5秒内家长端自动更新为"服务中"

场景3: 订单完成 → 分销员佣金更新

1. 分销员打开订单列表
2. 订单完成并结算佣金
3. 预期: 15秒内分销员端显示佣金已到账

---

📁 需要修改的文件

前端文件

1. manager-package/pages/manager/work-orders.vue - 工单列表轮询
2. teacher-package/pages/teacher/my-orders.vue - 陪伴员订单轮询
3. user-package/pages/order/detail.vue - 家长订单详情轮询
4. distributor-package/pages/distributor/order-list.vue - 分销员订单轮询

后端文件

1. OrderController.java - 添加批量检查状态接口
2. OrderService.java - 实现批量状态检查逻辑

---

⏱️ 实施时间表

任务	预计时间	负责人
后端接口开发	30分钟	后端
前端轮询实现	30分钟	前端
测试验证	30分钟	测试
总计	1.5小时	-

---

🎯 后续优化方向

阶段2: WebSocket 实时推送 (1-2周后)

1. 实现 WebSocket 服务器
2. 订单状态变更时主动推送
3. 前端监听 WebSocket 消息
4. 移除轮询机制

阶段3: 消息队列 (长期优化)

1. 使用 Redis Pub/Sub 或 RabbitMQ
2. 订单状态变更发布消息
3. 各端订阅消息并更新
4. 支持离线消息

---

✅ 下一步行动

1. ✅ 创建后端批量检查状态接口
2. ✅ 实现前端轮询机制
3. ✅ 测试各端同步效果
4. ✅ 性能监控和优化

预计完成时间: 2026-01-24 17:00