当前位置：首页 > VUE

vue实现物流信息

2026-02-18 16:22:03VUE

Vue 实现物流信息功能

物流信息功能通常包括物流状态展示、物流轨迹跟踪、物流公司选择等。以下是一个基于 Vue 的实现方案。

物流信息组件结构

创建一个物流信息组件，包含物流状态、物流轨迹和物流公司选择等功能。

<template>
  <div class="logistics-info">
    <div class="logistics-status">
      <h3>物流状态</h3>
      <p>{{ logisticsStatus }}</p>
    </div>
    <div class="logistics-track">
      <h3>物流轨迹</h3>
      <ul>
        <li v-for="(track, index) in tracks" :key="index">
          {{ track.time }} - {{ track.status }}
        </li>
      </ul>
    </div>
    <div class="logistics-company">
      <h3>选择物流公司</h3>
      <select v-model="selectedCompany">
        <option v-for="company in companies" :key="company.id" :value="company.id">
          {{ company.name }}
        </option>
      </select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      logisticsStatus: '运输中',
      tracks: [
        { time: '2023-10-01 10:00', status: '已发货' },
        { time: '2023-10-02 15:00', status: '运输中' },
        { time: '2023-10-03 09:00', status: '已到达目的地' },
      ],
      companies: [
        { id: 1, name: '顺丰速运' },
        { id: 2, name: '中通快递' },
        { id: 3, name: '圆通速递' },
      ],
      selectedCompany: 1,
    };
  },
};
</script>

<style scoped>
.logistics-info {
  font-family: Arial, sans-serif;
}
.logistics-track ul {
  list-style-type: none;
  padding: 0;
}
.logistics-track li {
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}
</style>

物流信息 API 调用

通过 API 获取物流信息，可以使用 Axios 或其他 HTTP 客户端。

methods: {
  fetchLogisticsInfo() {
    axios.get('/api/logistics', {
      params: {
        orderId: this.orderId,
      },
    })
    .then(response => {
      this.logisticsStatus = response.data.status;
      this.tracks = response.data.tracks;
    })
    .catch(error => {
      console.error('获取物流信息失败:', error);
    });
  },
},

物流轨迹可视化

使用第三方库如 vue-timeline 或自定义样式实现物流轨迹可视化。

<template>
  <div class="timeline">
    <div v-for="(track, index) in tracks" :key="index" class="timeline-item">
      <div class="timeline-dot"></div>
      <div class="timeline-content">
        <p>{{ track.time }}</p>
        <p>{{ track.status }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.timeline {
  position: relative;
  padding-left: 20px;
}
.timeline-item {
  position: relative;
  padding-bottom: 20px;
}
.timeline-dot {
  position: absolute;
  left: -10px;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #42b983;
}
.timeline-content {
  margin-left: 20px;
}
</style>

物流公司选择与提交

实现物流公司选择并提交到后端。

methods: {
  submitLogisticsCompany() {
    axios.post('/api/logistics/company', {
      orderId: this.orderId,
      companyId: this.selectedCompany,
    })
    .then(response => {
      alert('物流公司选择成功');
    })
    .catch(error => {
      console.error('提交物流公司失败:', error);
    });
  },
},

物流状态实时更新

使用 WebSocket 或轮询实现物流状态实时更新。

created() {
  this.fetchLogisticsInfo();
  this.polling = setInterval(this.fetchLogisticsInfo, 60000);
},
beforeDestroy() {
  clearInterval(this.polling);
},

物流信息打印

实现物流信息打印功能，可以使用 vue-print-nb 插件。

<template>
  <button @click="printLogisticsInfo">打印物流信息</button>
</template>

<script>
import print from 'vue-print-nb';

export default {
  directives: {
    print,
  },
  methods: {
    printLogisticsInfo() {
      this.$print(this.$refs.logisticsInfo);
    },
  },
};
</script>