当前位置：首页 > VUE

vue实现类似淘宝快递

2026-01-22 23:36:18VUE

Vue 实现类似淘宝快递物流跟踪功能

实现类似淘宝的快递物流跟踪功能需要结合前端展示和后端数据交互。以下是关键步骤和代码示例：

数据准备与接口设计

后端需提供物流信息接口，返回数据结构示例：

{
  "expressCompany": "顺丰速运",
  "expressNumber": "SF123456789",
  "status": "运输中",
  "steps": [
    {
      "time": "2023-05-01 14:00",
      "location": "北京市朝阳区",
      "description": "快件已签收"
    },
    {
      "time": "2023-04-30 09:30",
      "location": "北京市转运中心",
      "description": "快件运输中"
    }
  ]
}

Vue 组件实现

创建物流跟踪组件（ExpressTrack.vue）：

<template>
  <div class="express-track">
    <div class="header">
      <span>{{ expressCompany }}</span>
      <span>{{ expressNumber }}</span>
      <span class="status-badge">{{ status }}</span>
    </div>

    <div class="timeline">
      <div 
        v-for="(step, index) in steps" 
        :key="index"
        :class="['step', { 'active': index === 0 }]"
      >
        <div class="dot"></div>
        <div class="line" v-if="index !== steps.length - 1"></div>
        <div class="content">
          <p>{{ step.description }}</p>
          <p class="time">{{ step.time }}</p>
          <p class="location">{{ step.location }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    expressData: {
      type: Object,
      required: true
    }
  },
  computed: {
    expressCompany() {
      return this.expressData.expressCompany
    },
    expressNumber() {
      return this.expressData.expressNumber
    },
    status() {
      return this.expressData.status
    },
    steps() {
      return [...this.expressData.steps].reverse()
    }
  }
}
</script>

<style scoped>
.express-track {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.status-badge {
  margin-left: auto;
  padding: 4px 8px;
  background: #ff5722;
  color: white;
  border-radius: 4px;
  font-size: 12px;
}

.timeline {
  position: relative;
  padding-left: 30px;
}

.step {
  position: relative;
  padding-bottom: 20px;
}

.dot {
  position: absolute;
  left: -30px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e0e0e0;
  border: 3px solid #fff;
}

.active .dot {
  background: #4caf50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
}

.line {
  position: absolute;
  left: -24px;
  top: 16px;
  width: 2px;
  height: calc(100% - 16px);
  background: #e0e0e0;
}

.active ~ .step .line {
  background: #4caf50;
}

.content {
  padding: 8px 16px;
  background: #f5f5f5;
  border-radius: 4px;
}

.time, .location {
  color: #666;
  font-size: 12px;
  margin-top: 4px;
}
</style>

接口调用与数据绑定

在父组件中调用接口并传递数据：

<template>
  <div>
    <ExpressTrack v-if="expressData" :expressData="expressData" />
    <div v-else>加载中...</div>
  </div>
</template>

<script>
import ExpressTrack from './ExpressTrack.vue'

export default {
  components: {
    ExpressTrack
  },
  data() {
    return {
      expressData: null
    }
  },
  async created() {
    try {
      const response = await fetch('/api/express/track?id=123')
      this.expressData = await response.json()
    } catch (error) {
      console.error('获取物流信息失败:', error)
    }
  }
}
</script>

功能增强建议

自动刷新功能

// 在组件中添加定时刷新
setInterval(async () => {
  const response = await fetch('/api/express/track?id=123')
  this.expressData = await response.json()
}, 30000) // 每30秒刷新一次

快递公司图标显示

<template>
  <div class="header">
    <img 
      :src="`/icons/${expressCompany}.png`" 
      width="24" 
      height="24"
    >
    <!-- 其他内容 -->
  </div>
</template>

地图集成 使用高德或百度地图API展示物流路径：

import AMapLoader from '@amap/amap-jsapi-loader'

methods: {
  initMap() {
    AMapLoader.load({
      key: 'YOUR_KEY',
      version: '2.0'
    }).then((AMap) => {
      const map = new AMap.Map('map-container', {
        viewMode: '2D',
        zoom: 10
      })

      // 添加物流路径标记
      this.steps.forEach(step => {
        new AMap.Marker({
          position: [step.lng, step.lat],
          map: map
        })
      })
    })
  }
}