当前位置：首页 > VUE

vue物流状态实现

2026-01-17 20:22:08VUE

实现物流状态的基本思路

物流状态通常涉及多个阶段（如已下单、运输中、已送达等），可通过进度条、时间轴或状态标签展示。Vue中可利用动态数据绑定和条件渲染实现交互式效果。

数据准备

定义物流状态数据模型，通常包含状态名称、时间戳和是否完成等字段：

data() {
  return {
    logistics: [
      { name: '已下单', time: '2023-10-01 10:00', completed: true },
      { name: '已发货', time: '2023-10-02 15:30', completed: true },
      { name: '运输中', time: '2023-10-03 09:00', completed: false },
      { name: '已送达', time: '', completed: false }
    ],
    currentStatus: 2 // 当前状态索引
  }
}

时间轴展示方式

使用v-for渲染状态列表，通过class动态控制样式：

<div class="timeline">
  <div 
    v-for="(item, index) in logistics" 
    :key="index"
    :class="['timeline-node', 
             { 'active': index <= currentStatus }]">
    <div class="timeline-dot"></div>
    <div class="timeline-content">
      <p>{{ item.name }}</p>
      <small>{{ item.time || '待更新' }}</small>
    </div>
  </div>
</div>

.timeline {
  position: relative;
  padding-left: 20px;
}
.timeline-node {
  position: relative;
  padding-bottom: 20px;
}
.timeline-dot {
  position: absolute;
  left: -10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
}
.timeline-node.active .timeline-dot {
  background: #4CAF50;
}
.timeline-content {
  margin-left: 15px;
}

进度条实现方案

使用CSS过渡效果实现动态进度条：

<div class="progress-bar">
  <div 
    class="progress" 
    :style="{ width: `${(currentStatus / (logistics.length - 1)) * 100}%` }">
  </div>
</div>

.progress-bar {
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  margin: 20px 0;
}
.progress {
  height: 100%;
  background: #4CAF50;
  border-radius: 3px;
  transition: width 0.5s ease;
}

状态更新逻辑

通过API获取最新物流状态后更新数据：

methods: {
  async fetchLogistics() {
    const response = await axios.get('/api/logistics');
    this.logistics = response.data.steps;
    this.currentStatus = response.data.currentIndex;
  }
},
mounted() {
  this.fetchLogistics();
  // 可选：设置轮询更新
  setInterval(this.fetchLogistics, 60000);
}

移动端适配技巧

针对小屏幕设备，可切换为垂直布局或折叠面板：

vue物流状态实现

<div class="mobile-status">
  <div 
    v-for="(item, index) in logistics"
    :key="index"
    class="status-card"
    :class="{ 'expanded': index === currentStatus }">
    <div @click="currentStatus = index">
      <span>{{ item.name }}</span>
      <span>{{ index <= currentStatus ? '✓' : '' }}</span>
    </div>
    <div v-if="index === currentStatus" class="status-detail">
      <p>更新时间: {{ item.time }}</p>
    </div>
  </div>
</div>