当前位置：首页 > VUE

vue实现快递查询

2026-01-08 13:51:56VUE

实现思路

通过调用第三方快递查询API接口，结合Vue.js框架实现快递单号查询功能。需要用户输入快递单号和选择快递公司，点击查询后显示物流信息。

vue实现快递查询

准备工作

注册快递查询API服务（如快递100、聚合数据等），获取API密钥。以快递100为例，其免费接口支持实时查询。

安装依赖

在Vue项目中安装axios用于HTTP请求：

npm install axios

核心代码实现

模板部分

<template>
  <div class="express-query">
    <select v-model="selectedCompany">
      <option v-for="company in companies" :value="company.code">{{ company.name }}</option>
    </select>
    <input v-model="trackingNumber" placeholder="输入快递单号">
    <button @click="queryExpress">查询</button>

    <div v-if="result">
      <h3>物流信息</h3>
      <ul>
        <li v-for="item in result.data" :key="item.time">
          {{ item.time }} - {{ item.context }}
        </li>
      </ul>
    </div>
  </div>
</template>

脚本部分

<script>
import axios from 'axios';

export default {
  data() {
    return {
      trackingNumber: '',
      selectedCompany: 'yuantong', // 默认圆通
      companies: [
        { code: 'yuantong', name: '圆通快递' },
        { code: 'shentong', name: '申通快递' },
        { code: 'zhongtong', name: '中通快递' }
      ],
      result: null
    }
  },
  methods: {
    async queryExpress() {
      try {
        const response = await axios.get(
          `https://api.kuaidi100.com/v1/query?type=${this.selectedCompany}&postid=${this.trackingNumber}`,
          {
            headers: {
              'Authorization': 'YOUR_API_KEY' // 替换为实际API密钥
            }
          }
        );
        this.result = response.data;
      } catch (error) {
        console.error('查询失败:', error);
        alert('查询失败，请检查单号和快递公司');
      }
    }
  }
}
</script>

样式部分

<style scoped>
.express-query {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
select, input {
  padding: 8px;
  margin-right: 10px;
}
button {
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
</style>