当前位置：首页 > VUE

vue实现快递查询

2026-02-11 03:04:02VUE

Vue 实现快递查询功能

需要准备的工具和资源

Vue 2/3 开发环境
快递查询 API（如快递鸟、快递100等）
axios 或其他 HTTP 请求库

获取快递查询 API

注册快递查询 API 服务（如快递鸟或快递100），获取 API Key 和必要的接口文档。通常需要提供公司信息进行认证。

安装 axios

npm install axios

创建快递查询组件

<template>
  <div>
    <input v-model="trackingNumber" placeholder="输入快递单号" />
    <select v-model="selectedCarrier">
      <option value="">选择快递公司</option>
      <option v-for="carrier in carriers" :value="carrier.code">{{ carrier.name }}</option>
    </select>
    <button @click="queryExpress">查询</button>

    <div v-if="loading">查询中...</div>
    <div v-if="error">{{ error }}</div>

    <div v-if="result">
      <h3>快递信息</h3>
      <div v-for="item in result" :key="item.time">
        <p>{{ item.time }} - {{ item.status }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      trackingNumber: '',
      selectedCarrier: '',
      carriers: [
        { code: 'SF', name: '顺丰速运' },
        { code: 'STO', name: '申通快递' },
        { code: 'YTO', name: '圆通速递' },
        { code: 'ZTO', name: '中通快递' },
        { code: 'HTKY', name: '百世快递' }
      ],
      result: null,
      loading: false,
      error: ''
    };
  },
  methods: {
    async queryExpress() {
      if (!this.trackingNumber || !this.selectedCarrier) {
        this.error = '请输入快递单号和选择快递公司';
        return;
      }

      this.loading = true;
      this.error = '';
      this.result = null;

      try {
        const response = await axios.post('YOUR_API_ENDPOINT', {
          trackingNumber: this.trackingNumber,
          carrier: this.selectedCarrier
        }, {
          headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer YOUR_API_KEY'
          }
        });

        this.result = response.data.data;
      } catch (err) {
        this.error = '查询失败，请稍后再试';
        console.error(err);
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

对接 API 接口

根据选择的 API 服务，修改请求参数和响应处理逻辑。不同的 API 提供商可能有不同的参数要求和返回格式。

处理 API 响应

// 示例：快递100 API 响应处理
if (response.data.result) {
  this.result = response.data.result.list.map(item => ({
    time: item.time,
    status: item.status
  }));
}

添加样式和用户体验优化

input, select {
  padding: 8px;
  margin-right: 10px;
}
button {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #3aa876;
}

实现自动识别快递公司

某些 API 支持自动识别快递公司，可以简化用户操作：

methods: {
  async autoDetectCarrier() {
    if (this.trackingNumber.length > 8) {
      const response = await axios.get(`AUTO_DETECT_API?number=${this.trackingNumber}`);
      if (response.data.success) {
        this.selectedCarrier = response.data.carrier;
      }
    }
  }
},
watch: {
  trackingNumber(newVal) {
    this.autoDetectCarrier();
  }
}

注意事项