zyt/EXPRESS_TRACKING_AUTO_LOAD.md

物流轨迹自动加载优化

优化目标

将物流轨迹从"手动点击查询"改为"打开详情自动加载"，提升用户体验：

1. 打开订单详情时自动显示物流轨迹
2. 无需额外点击"查询轨迹"按钮
3. 保留"刷新轨迹"按钮用于手动更新

用户体验对比

优化前

用户操作流程：
1. 点击订单查看详情
2. 等待详情加载
3. 找到"查询轨迹"按钮
4. 点击"查询轨迹"
5. 等待轨迹加载
6. 查看物流信息

总步骤：6步

优化后

用户操作流程：
1. 点击订单查看详情
2. 等待详情和轨迹自动加载
3. 查看物流信息

总步骤：3步
减少：50%操作步骤

代码修改

1. 自动加载逻辑

文件：admin/src/views/consumer/prescription/order_list.vue

在 openDetail() 函数中添加自动加载：

async function openDetail(id: number) {
    detailVisible.value = true
    detailData.value = null
    logisticsTracePayload.value = null
    detailLogisticsExpress.value = 'auto'
    detailLoading.value = true
    try {
        const res: any = await prescriptionOrderDetail({ id })
        const d = res?.data ?? res ?? null
        detailData.value = d
        if (d) {
            detailLogisticsExpress.value = String(d.express_company || 'auto') || 'auto'
            
            // 如果有快递单号，自动加载物流轨迹
            if (String(d.tracking_number || '').trim()) {
                fetchLogisticsTrace()
            }
        }
    } catch (e: any) {
        feedback.msgError(e?.message || '加载失败')
        detailVisible.value = false
    } finally {
        detailLoading.value = false
    }
}

关键点：

• 检查订单是否有快递单号
• 有快递单号时自动调用 fetchLogisticsTrace()
• 无快递单号时不调用，避免无效请求

2. UI调整

按钮改为"刷新轨迹"

<el-button
    v-perms="['tcm.prescriptionOrder/logisticsTrace']"
    type="default"
    size="small"
    :loading="logisticsTraceLoading"
    @click="fetchLogisticsTrace"
>
    <template #icon>
        <el-icon><Refresh /></el-icon>
    </template>
    刷新轨迹
</el-button>

改动：

• 按钮文字：查询轨迹 → 刷新轨迹
• 按钮类型：type="primary" → type="default"（降低视觉优先级）
• 添加刷新图标：<Refresh />

添加加载状态提示

<div v-if="logisticsTraceLoading && !logisticsTracePayload" class="text-sm text-gray-500 mb-2">
    <el-icon class="is-loading"><Loading /></el-icon>
    正在加载物流轨迹...
</div>

作用：

• 首次自动加载时显示加载提示
• 已有数据时不显示（避免闪烁）
• 使用旋转动画图标

导入图标

import { Refresh, Loading } from '@element-plus/icons-vue'

工作流程

完整流程

用户点击"查看详情"
    ↓
打开详情弹窗
    ↓
加载订单详情
    ↓
检查是否有快递单号？
    ↓ 有
自动调用 fetchLogisticsTrace()
    ↓
显示"正在加载物流轨迹..."
    ↓
查询数据库（优先）
    ↓
有数据？
    ↓ 有
显示物流轨迹（13条记录）
    ↓
显示数据来源和更新时间

手动刷新流程

用户点击"刷新轨迹"按钮
    ↓
重新调用 fetchLogisticsTrace()
    ↓
查询数据库（优先）
    ↓
无数据或需要更新？
    ↓ 是
调用快递100 API
    ↓
更新数据库
    ↓
显示最新轨迹

性能优化

1. 并行加载

订单详情和物流轨迹是并行加载的：

• 订单详情：prescriptionOrderDetail()
• 物流轨迹：fetchLogisticsTrace()（在详情加载完成后立即触发）

虽然不是完全并行，但由于物流查询从数据库读取（< 50ms），总体加载时间几乎不增加。

2. 条件加载

只有在有快递单号时才加载物流轨迹：

if (String(d.tracking_number || '').trim()) {
    fetchLogisticsTrace()
}

避免无效请求。

3. 数据库优先

物流查询优先从数据库读取：

• 数据库查询：< 50ms
• API查询：> 1000ms

大部分情况下都能从数据库快速获取数据。

用户体验提升

1. 减少操作步骤

• 从6步减少到3步
• 减少50%操作

2. 信息即时可见

• 打开详情即可看到物流信息
• 无需额外操作

3. 保留手动控制

• "刷新轨迹"按钮用于手动更新
• 切换快递公司后可重新查询

4. 清晰的状态反馈

• 加载中：显示"正在加载物流轨迹..."
• 加载完成：显示轨迹列表
• 数据来源：显示"[数据库]"或"[API实时]"
• 更新时间：显示"最后更新：2026-04-07 17:14:16"

边界情况处理

1. 无快递单号

• 不调用物流查询
• 不显示物流轨迹区域

2. 数据库无数据

• 自动调用快递100 API
• 显示"[API实时]"标签

3. 查询失败

• 显示错误提示
• 保留"刷新轨迹"按钮供重试

4. 已签收订单

• 显示完整历史轨迹
• 显示"已签收"状态
• 数据不会再自动更新（定时任务已停止）

测试场景

场景1：有快递单号且数据库有数据

1. 打开订单详情
2. 自动显示"正在加载物流轨迹..."
3. < 50ms 后显示13条轨迹
4. 显示"[数据库]"标签
5. 显示"最后更新：2026-04-07 17:14:16"

场景2：有快递单号但数据库无数据

1. 打开订单详情
2. 自动显示"正在加载物流轨迹..."
3. 调用快递100 API（> 1s）
4. 显示轨迹
5. 显示"[API实时]"标签
6. 数据保存到数据库

场景3：无快递单号

1. 打开订单详情
2. 不显示物流轨迹区域
3. 不发起任何物流查询请求

场景4：手动刷新

1. 订单详情已打开，轨迹已显示
2. 点击"刷新轨迹"按钮
3. 重新查询（优先数据库）
4. 更新显示

相关文件

修改的文件

• admin/src/views/consumer/prescription/order_list.vue - 订单列表页面

相关文档

• EXPRESS_TRACKING_DATABASE_QUERY.md - 数据库查询优化
• EXPRESS_TRACKING_SYNC_COMPLETE.md - 同步完成报告
• EXPRESS_TRACKING_SYSTEM.md - 系统架构

总结

✅ 打开详情自动加载物流轨迹 ✅ 减少50%用户操作步骤 ✅ 保留手动刷新功能 ✅ 添加加载状态提示 ✅ 优化按钮文字和样式 ✅ 条件加载，避免无效请求 ✅ 数据库优先，快速响应

用户体验提升：

• 操作步骤：6步 → 3步
• 加载时间：< 50ms（数据库）
• 信息可见性：立即可见
• 操作便捷性：无需额外点击

下一步：

1. 前端测试自动加载功能
2. 验证各种边界情况
3. 收集用户反馈
4. 可选：添加"自动刷新"开关（用户可选择是否自动加载）