ホームページ > ウェブフロントエンド > uni-app > uniappで速達の問い合わせと物流追跡を実装する方法

uniappで速達の問い合わせと物流追跡を実装する方法

王林
リリース: 2023-10-18 09:24:27
オリジナル
1759 人が閲覧しました

uniappで速達の問い合わせと物流追跡を実装する方法

uniapp で速達クエリと物流追跡を実装する方法

電子商取引の急速な発展に伴い、速達業界も大きく発展しました。ユーザーにとって、速達の最新状況や正確な物流追跡情報を知ることは非常に重要です。 uniappでは、エクスプレスクエリや物流追跡機能を簡単に実装できます。

1. エクスプレス クエリ

エクスプレス クエリ機能では、ユーザーがエクスプレス注文番号を入力し、その注文番号を関連するエクスプレス問い合わせインターフェイスに渡して、エクスプレスに関する関連情報を取得する必要があります。 、速達など 会社の現状や速達など。以下は、Express Bird API を使用してエクスプレス クエリを実装するサンプル コードです。

// 封装快递查询函数
function queryExpress(expressNo) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: 'https://api.kdniao.com/Ebusiness/EbusinessOrderHandle.aspx',
      method: 'POST',
      data: {
        ShipperCode: '', // 快递公司编码
        LogisticCode: expressNo // 用户输入的快递单号
      },
      success: (res) => {
        if (res.statusCode === 200 && res.data.Success) {
          resolve(res.data.Traces); // 返回快递轨迹信息
        } else {
          reject(res.data.Reason); // 返回错误信息
        }
      },
      fail: (err) => {
        reject('网络请求失败');
      }
    })
  });
}

// 在页面中调用快递查询
async function searchExpress() {
  try {
    const expressNo = '123456789'; // 用户输入的快递单号
    const traces = await queryExpress(expressNo);
    console.log(traces); // 打印快递轨迹信息
  } catch (err) {
    console.error(err); // 打印错误信息
  }
}
ログイン後にコピー

上記のコードでは、uni.request 関数を使用して HTTP リクエストを送信し、エクスプレス注文番号をパラメータとして渡します。 Express Bird クエリ インターフェイスに接続します。インターフェイスの応答が成功すると、返された特急トラック情報が解決され、ページに表示されます。

2.物流追跡

物流追跡機能とは、速達の最新状況を常に更新し、速達の輸送状況をリアルタイムに把握できる機能です。以下は、setInterval 関数を使用して物流追跡を実装するサンプル コードです。

// 在页面加载完成后开始物流追踪
onLoad() {
  this.trackExpress();
},

// 封装物流追踪函数
trackExpress() {
  const expressNo = '123456789'; // 用户输入的快递单号
  this.intervalId = setInterval(async () => {
    try {
      const traces = await queryExpress(expressNo);
      this.updateTraces(traces); // 更新快递轨迹信息
    } catch (err) {
      console.error(err); // 打印错误信息
      clearInterval(this.intervalId); // 请求错误时,清除定时器
    }
  }, 30000); // 每30秒更新一次快递轨迹信息
},

// 更新快递轨迹信息
updateTraces(traces) {
  this.traces = traces;
}
ログイン後にコピー

上記のコードでは、setInterval 関数を使用して 30 秒ごとに queryExpress 関数を呼び出し、急行の最新の軌跡情報を取得します。ページ表示を更新します。リクエストエラーが発生した場合、タイマーをクリアし、物流追跡を停止します。

上記のコード例を通じて、uniapp にエクスプレス クエリと物流追跡機能を実装できます。ユーザーは宅配便の注文番号を入力することで、宅配便の関連情報を取得して表示することができると同時に、タイマーの呼び出しを通じて宅配便のステータスをリアルタイムに更新することができ、ユーザーは把握することができます。リアルタイムの物流状況。この機能の実装により、ユーザーエクスペリエンスが向上し、電子商取引プラットフォームのサービス品質が向上します。

以上がuniappで速達の問い合わせと物流追跡を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート