uni-app 实现物流进度跟踪功能：从 UI 到数据驱动的完整方案

在电商、快递、订单履约等应用场景中，物流进度跟踪是一个高频且用户体验关键的功能。用户希望清晰、直观地看到包裹当前所处的环节、时间节点以及整体流转状态。在 uni-app 跨平台开发框架中，我们可以借助其丰富的组件和响应式能力，轻松实现一套兼容 H5、微信小程序、App 等多端的物流进度跟踪界面。

本文将带你从 UI 设计、数据结构、组件实现到动态渲染，一步步构建一个可复用、可扩展的物流进度跟踪组件。

一、效果预览与需求分析

典型的物流进度展示包含以下要素：

时间轴（垂直或水平）
每个节点的状态图标（已完成、进行中、未开始）
节点标题（如"已发货"、"运输中"）
详细描述与时间（如"2026-02-15 14:30 北京转运中心已发出"）
当前进度高亮（通常用不同颜色区分）

我们以 垂直时间轴 为例，这是移动端最常见的布局。

二、数据结构设计

良好的数据结构是动态渲染的基础。建议使用如下格式：

复制代码

const logisticsSteps = [
  {
    time: '2026-02-16 10:00',
    title: '订单已创建',
    desc: '系统已生成订单',
    status: 'done' // 'done' | 'processing' | 'pending'
  },
  {
    time: '2026-02-16 11:30',
    title: '仓库已发货',
    desc: '包裹已交由顺丰速运',
    status: 'done'
  },
  {
    time: '2026-02-17 09:00',
    title: '运输中',
    desc: '包裹正在发往杭州中转站',
    status: 'processing'
  },
  {
    time: '',
    title: '派送中',
    desc: '',
    status: 'pending'
  },
  {
    time: '',
    title: '已签收',
    desc: '',
    status: 'pending'
  }
];

💡 提示：status 字段用于控制 UI 状态，便于动态高亮当前步骤。

三、UI 组件实现（uni-app + Vue 3 语法）

在 components/LogisticsTrack.vue 中编写组件：

复制代码

<template>
  <view class="logistics-track">
    <view 
      v-for="(item, index) in steps" 
      :key="index"
      class="step-item"
    >
      <!-- 左侧状态图标 -->
      <view class="icon-wrapper">
        <view 
          class="status-icon"
          :class="{
            'icon-done': item.status === 'done',
            'icon-processing': item.status === 'processing',
            'icon-pending': item.status === 'pending'
          }"
        ></view>
        <!-- 连接线（最后一个不显示） -->
        <view 
          v-if="index < steps.length - 1" 
          class="connector"
          :class="{ 'connector-done': item.status === 'done' }"
        ></view>
      </view>

      <!-- 右侧内容 -->
      <view class="content">
        <text class="title">{{ item.title }}</text>
        <text v-if="item.time" class="time">{{ item.time }}</text>
        <text v-if="item.desc" class="desc">{{ item.desc }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  steps: {
    type: Array,
    required: true
  }
});
</script>

<style scoped>
.logistics-track {
  padding: 20rpx 0;
}

.step-item {
  display: flex;
  margin-bottom: 40rpx;
}

.icon-wrapper {
  width: 60rpx;
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-right: 20rpx;
}

.status-icon {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  background-color: #ccc; /* 默认灰色 */
}

.icon-done {
  background-color: #19be6b; /* 成功绿色 */
}

.icon-processing {
  background-color: #2d8cf0; /* 进行中蓝色 */
  box-shadow: 0 0 0 8rpx rgba(45, 140, 240, 0.2);
}

.icon-pending {
  background-color: #e5e9f2; /* 未开始浅灰 */
}

.connector {
  width: 2rpx;
  flex: 1;
  background-color: #e5e9f2;
  margin-top: 10rpx;
}

.connector-done {
  background-color: #19be6b;
}

.content {
  flex: 1;
}

.title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.time {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-bottom: 6rpx;
}

.desc {
  font-size: 26rpx;
  color: #666;
}
</style>

四、在页面中使用组件

复制代码

<template>
  <view class="page">
    <view class="header">物流信息</view>
    <LogisticsTrack :steps="logisticsSteps" />
  </view>
</template>

<script setup>
import LogisticsTrack from '@/components/LogisticsTrack.vue';

const logisticsSteps = ref([
  // 如上文所示的数据
]);
</script>

五、进阶优化建议

1. 动态计算当前状态

如果后端只返回原始物流日志（无 status 字段），可在前端根据最新一条记录自动推断状态：

复制代码

function enhanceSteps(rawLogs) {
  const now = new Date();
  return rawLogs.map((log, index) => {
    if (index < rawLogs.length - 1) {
      return { ...log, status: 'done' };
    } else if (log.time) {
      return { ...log, status: 'processing' };
    } else {
      return { ...log, status: 'pending' };
    }
  });
}

2. 支持横向时间轴（适用于 H5 宽屏）

通过 CSS 媒体查询或 props 控制布局方向，提升多端适配性。

3. 添加点击展开详情

对每条记录绑定 @tap 事件，支持查看物流地图、快递员电话等扩展信息。

4. 使用 uView 或 ThorUI 等 UI 库

若项目已集成第三方 UI 库，可直接使用其 u-steps 或类似组件快速搭建，但自定义样式灵活性较低。

六、总结

通过合理的数据结构设计与组件化思维，我们在 uni-app 中实现了高性能、跨平台、易维护的物流进度跟踪功能。该组件具备以下优点：

✅ 纯 CSS 实现，无额外依赖
✅ 支持动态状态高亮
✅ 结构清晰，易于扩展
✅ 兼容所有 uni-app 支持的平台（H5、小程序、App）

物流跟踪虽小，却是提升用户信任感和产品专业度的重要细节。掌握这一模式，你也能在其他"流程进度"类场景（如订单状态、审批流、任务看板）中快速复用。