当前位置：首页 > VUE

vue实现快递查询

2026-03-28 13:11:22VUE

使用 Vue 实现快递查询功能

快递查询功能通常需要调用第三方快递查询 API，以下是一个基于 Vue 的实现方案。

准备工作

注册并获取快递查询 API 的密钥，常用的快递查询 API 有：

vue实现快递查询

快递鸟（Kdniao）
快递 100（Kuaidi100）
阿里云快递查询

安装依赖

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

vue实现快递查询

npm install axios

创建快递查询组件

创建一个 Vue 组件（如 ExpressQuery.vue）来实现快递查询功能。

<template>
  <div class="express-query">
    <h3>快递查询</h3>
    <div>
      <input v-model="expressNumber" placeholder="请输入快递单号" />
      <select v-model="expressCompany">
        <option value="">选择快递公司</option>
        <option v-for="company in companies" :value="company.code" :key="company.code">
          {{ company.name }}
        </option>
      </select>
      <button @click="queryExpress">查询</button>
    </div>
    <div v-if="loading">查询中...</div>
    <div v-if="error">{{ error }}</div>
    <div v-if="result">
      <h4>查询结果</h4>
      <ul>
        <li v-for="(item, index) in result" :key="index">
          {{ item.time }} - {{ item.status }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      expressNumber: '',
      expressCompany: '',
      companies: [
        { code: 'SF', name: '顺丰速运' },
        { code: 'YTO', name: '圆通速递' },
        { code: 'ZTO', name: '中通快递' },
        { code: 'STO', name: '申通快递' },
        { code: 'YD', name: '韵达快递' },
      ],
      loading: false,
      error: '',
      result: null,
    };
  },
  methods: {
    async queryExpress() {
      if (!this.expressNumber || !this.expressCompany) {
        this.error = '请输入快递单号并选择快递公司';
        return;
      }

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

      try {
        const response = await axios.get('https://api.kuaidi100.com/v3/query', {
          params: {
            com: this.expressCompany,
            num: this.expressNumber,
            key: 'YOUR_API_KEY', // 替换为你的 API 密钥
          },
        });
        this.result = response.data.data;
      } catch (err) {
        this.error = '查询失败，请稍后重试';
        console.error(err);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
.express-query {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
input, select, button {
  margin: 5px;
  padding: 8px;
}
</style>

使用快递查询组件

在 Vue 项目的入口文件或需要使用的页面中引入并注册组件：

<template>
  <div id="app">
    <ExpressQuery />
  </div>
</template>

<script>
import ExpressQuery from './components/ExpressQuery.vue';

export default {
  components: {
    ExpressQuery,
  },
};
</script>