当前位置：首页 > VUE

vue实现物流追踪

2026-02-17 13:23:00VUE

Vue实现物流追踪功能

物流追踪功能通常需要结合后端API数据展示物流节点的动态信息。以下为Vue实现方案的核心要点：

数据准备

物流节点数据格式建议：

nodes: [
  { time: '2023-01-01 10:00', status: '已发货', desc: '快件已揽收' },
  { time: '2023-01-02 15:30', status: '运输中', desc: '到达广州转运中心' },
  // ...
]

时间轴组件实现

<template>
  <div class="logistics-track">
    <div v-for="(node, index) in nodes" :key="index" class="track-node">
      <div class="node-time">{{ node.time }}</div>
      <div class="node-status">{{ node.status }}</div>
      <div class="node-desc">{{ node.desc }}</div>
    </div>
  </div>
</template>

样式优化

.logistics-track {
  position: relative;
  padding-left: 20px;
}
.track-node {
  position: relative;
  padding-bottom: 20px;
  border-left: 2px solid #1890ff;
}
.track-node:last-child {
  border-left-color: transparent;
}
.track-node::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1890ff;
}

动态效果增强

添加当前节点高亮效果：

computed: {
  activeNodes() {
    return this.nodes.map((node, index) => ({
      ...node,
      isActive: index <= this.currentStep
    }))
  }
}

API集成

methods: {
  async fetchLogistics() {
    try {
      const res = await axios.get('/api/logistics', {
        params: { orderId: this.orderId }
      })
      this.nodes = res.data.nodes
    } catch (error) {
      console.error(error)
    }
  }
}

第三方组件方案

可使用vant的Steps组件快速实现：

<van-steps direction="vertical" :active="activeStep">
  <van-step v-for="node in nodes" :key="node.time">
    <h3>{{ node.status }}</h3>
    <p>{{ node.time }}</p>
    <p>{{ node.desc }}</p>
  </van-step>
</van-steps>

注意事项

vue实现物流追踪