当前位置：首页 > VUE

vue物流状态实现

2026-03-10 02:05:46VUE

实现物流状态的基本思路

物流状态通常需要展示多个节点（如已下单、已发货、运输中、已签收等），每个节点包含状态、时间、描述信息。Vue中可通过动态数据绑定和条件渲染实现交互式物流跟踪界面。

数据准备

定义物流节点数据，建议使用数组存储每个节点的信息，例如：

vue物流状态实现

data() {
  return {
    logistics: [
      { status: '已下单', time: '2023-05-01 10:00', desc: '订单已支付' },
      { status: '已发货', time: '2023-05-02 15:30', desc: '快递已揽收' },
      { status: '运输中', time: '2023-05-03 09:00', desc: '到达中转中心' },
      { status: '已签收', time: '2023-05-05 14:00', desc: '包裹已送达' }
    ],
    currentStatus: '运输中' // 当前物流状态
  }
}

界面渲染

使用 v-for 循环渲染物流节点，并通过 v-bind:class 动态标记当前状态：

vue物流状态实现

<div class="logistics-track">
  <div 
    v-for="(item, index) in logistics" 
    :key="index"
    class="logistics-item"
    :class="{ 'active': item.status === currentStatus, 'completed': index < logistics.findIndex(i => i.status === currentStatus) }"
  >
    <div class="status-dot"></div>
    <div class="status-info">
      <h4>{{ item.status }}</h4>
      <p>{{ item.time }}</p>
      <p>{{ item.desc }}</p>
    </div>
  </div>
</div>

样式设计

通过CSS区分已完成、进行中和未开始的节点状态：

.logistics-item {
  position: relative;
  padding-left: 20px;
  border-left: 2px solid #eee;
  margin-bottom: 20px;
}
.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  position: absolute;
  left: -7px;
  top: 5px;
}
.logistics-item.completed {
  border-left-color: #4CAF50;
}
.logistics-item.completed .status-dot {
  background: #4CAF50;
}
.logistics-item.active .status-dot {
  background: #FF9800;
  transform: scale(1.3);
}

动态更新逻辑

通过API获取最新物流状态并更新 currentStatus：

methods: {
  async fetchLogistics() {
    const response = await axios.get('/api/logistics');
    this.currentStatus = response.data.latestStatus;
  }
},
mounted() {
  this.fetchLogistics();
}