跨端开发踩坑实录：一套状态机如何搞定小程序、H5与PC端的订单同步？

// PHP 后端：定义全局统一的订单状态枚举与输出模型
class OrderStatusMachine {
    const STATUS_PENDING_PAY = 10; // 待付款
    const STATUS_PENDING_RECEIVE = 20; // 待接单
    const STATUS_PROCESSING = 30; // 服务中
    const STATUS_COMPLETED = 40; // 已完成

    // 无论哪个终端请求，均通过统一转换器输出状态
    public static function formatOrderOutput($order) {
        return [
            'order_id' => $order['id'],
            'amount'   => number_format($order['pay_amount'], 2),
            'status_code' => $order['status'],
            'status_text' => self::getStatusText($order['status']),
            'can_cancel'  => self::canCancel($order['status'])
        ];
    }
}

<!-- Vue3 / UniApp：基于角色的个人中心动态视图渲染 -->
<template>
  <view class="user-center">
    <!-- 公共基础信息区 -->
    <UserProfile :userInfo="userInfo" />
    
    <!-- 动态渲染业务区：接单员看到工作台，普通用户看到订单中心 -->
    <component 
      :is="isWorker ? WorkerDashboard : CustomerOrderList" 
      :summaryData="summaryData" 
    />
  </view>
</template>

<script setup>
import { computed } from 'vue';
import { useUserStore } from '@/store';
import WorkerDashboard from './components/WorkerDashboard.vue';
import CustomerOrderList from './components/CustomerOrderList.vue';

const userStore = useUserStore();
const isWorker = computed(() => userStore.role === 'worker');
</script>

<!-- Vue3 + Element Plus：PC端高密度订单处理表格 -->
<template>
  <el-table :data="orderList" border size="small" height="calc(100vh - 200px)">
    <el-table-column prop="order_sn" label="业务单号" width="180" fixed="left" />
    <el-table-column prop="service_sku" label="服务规格" min-width="200" />
    <el-table-column label="资金状态" width="150">
      <template #default="{ row }">
        <el-tag :type="row.pay_status === 1 ? 'success' : 'danger'">
          {{ row.pay_amount }}元 ({{ row.pay_status_text }})
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="客服快捷操作" width="220" fixed="right">
      <template #default="{ row }">
        <el-button link type="primary" @click="openChat(row)">接入会话</el-button>
        <el-button link type="danger" @click="handleRefund(row)">强制退单</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

// PHP Workerman：订单状态变更时的跨端实时群播指令
use GatewayWorker\Lib\Gateway;

class OrderImService {
    // 将订单状态同步推送到所属的专属会话频道
    public static function broadcastOrderStatus($orderId, $newStatus, $operatorId) {
        $roomId = "order_room_" . $orderId;
        $message = json_encode([
            'type' => 'system_order_update',
            'data' => [
                'order_id' => $orderId,
                'status' => $newStatus,
                'operator_id' => $operatorId,
                'timestamp' => time()
            ]
        ]);
        
        // 推送给该订单内包含的用户、接单员及当前介入的 PC 端客服
        Gateway::sendToGroup($roomId, $message);
    }
}

// PHP 后端：跨端统一的请求拦截与多端 Token 解析中间件
public function handle($request, \Closure $next) {
    // 无论是哪种终端发起的请求，统一通过 Header 提取凭证
    $token = $request->header('Authorization');
    $clientType = $request->header('X-Client-Type'); // 区分 app/mp/pc
    
    if (!$token || !JwtAuth::verifyToken($token, $clientType)) {
        return json(['code' => 401, 'msg' => '终端会话已过期，请重新登录']);
    }
    
    // 将解析出的统一 UID 注入上下文，放行到业务逻辑
    $request->uid = JwtAuth::getUid($token);
    return $next($request);
}

// E2E 端到端自动化测试脚本概念示例 (如使用 Playwright)
test('跨端订单流转测试：移动端下单 -> PC端审核', async ({ browser }) => {
  // 1. 模拟移动端用户下单
  const mobileContext = await browser.newContext({ viewport: { width: 375, height: 667 } });
  const mobilePage = await mobileContext.newPage();
  await mobilePage.goto('https://api.example.com/h5/#/order');
  await mobilePage.click('#btn-pay');
  
  // 2. 模拟 PC 端客服介入审核
  const pcContext = await browser.newContext({ viewport: { width: 1920, height: 1080 } });
  const pcPage = await pcContext.newPage();
  await pcPage.goto('https://admin.example.com/#/dashboard');
  
  // 断言：PC 端必须通过 WebSocket 实时接收到新订单卡片
  await expect(pcPage.locator('.new-order-alert')).toBeVisible({ timeout: 3000 });
});