当前位置：首页 > VUE

vue实现快递查询

2026-01-15 00:01:43VUE

实现快递查询功能

在Vue中实现快递查询功能需要对接第三方快递查询API，以下是一个完整的实现方案。

准备工作

注册并获取快递查询API的密钥，常用的快递API包括快递鸟、快递100等。以快递100为例，需要申请API key。

安装必要的依赖：

npm install axios

创建快递查询组件

创建一个Vue组件用于快递查询功能。

<template>
  <div class="express-query">
    <h3>快递查询</h3>
    <div class="input-group">
      <input v-model="expressNumber" placeholder="请输入快递单号" />
      <select v-model="expressCompany">
        <option value="">选择快递公司</option>
        <option v-for="company in companies" :value="company.code">{{ company.name }}</option>
      </select>
      <button @click="queryExpress">查询</button>
    </div>
    <div class="result" v-if="result.length > 0">
      <div v-for="item in result" :key="item.time" class="result-item">
        <p>{{ item.time }}</p>
        <p>{{ item.status }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      expressNumber: '',
      expressCompany: '',
      result: [],
      companies: [
        { code: 'yuantong', name: '圆通快递' },
        { code: 'shentong', name: '申通快递' },
        { code: 'zhongtong', name: '中通快递' },
        { code: 'shunfeng', name: '顺丰速运' }
      ]
    };
  },
  methods: {
    async queryExpress() {
      if (!this.expressNumber || !this.expressCompany) {
        alert('请填写快递单号和选择快递公司');
        return;
      }

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

<style scoped>
.express-query {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
.input-group {
  display: flex;
  margin-bottom: 20px;
}
input, select {
  flex: 1;
  padding: 10px;
  margin-right: 10px;
}
button {
  padding: 10px 20px;
  background: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}
.result-item {
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}
</style>

使用组件

在需要使用快递查询功能的页面中引入并注册组件：

<template>
  <div>
    <express-query />
  </div>
</template>

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

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