Comment mettre en œuvre une demande de livraison express et un suivi logistique dans Uniapp

Comment mettre en œuvre une demande de livraison express et un suivi logistique dans uniapp

Avec le développement rapide du commerce électronique, le secteur de la livraison express s'est également considérablement développé. Il est très important pour les utilisateurs de connaître le dernier statut de la livraison express et des informations précises de suivi logistique. Dans uniapp, nous pouvons facilement mettre en œuvre des fonctions de requête express et de suivi logistique.

1. Demande express

Dans la fonction de demande express, nous avons besoin que l'utilisateur saisisse le numéro de commande express et transmette le numéro de commande à l'interface de demande express appropriée pour obtenir des informations connexes express, telles que la société express, le statut actuel. de l'express, etc. Voici un exemple de code qui utilise l'API Express Bird pour implémenter une requête de livraison express :

// 封装快递查询函数
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); // 打印错误信息
  }
}

Dans le code ci-dessus, nous utilisons la fonction uni.request pour envoyer une requête HTTP et transmettre le numéro de commande de livraison express en tant que paramètre au Interface de requête Express Bird. Lorsque la réponse de l'interface est réussie, nous résoudrons les informations de piste express renvoyées et les afficherons sur la page.

2. Suivi logistique

La fonction de suivi logistique met à jour en permanence le dernier statut de la livraison express, permettant aux utilisateurs de comprendre l'état du transport de la livraison express en temps réel. Voici un exemple de code qui utilise la fonction setInterval pour implémenter le suivi logistique :

// 在页面加载完成后开始物流追踪
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;
}

Dans le code ci-dessus, nous utilisons la fonction setInterval pour appeler la fonction queryExpress toutes les 30 secondes afin d'obtenir les dernières informations de trajectoire de l'express et de mettre à jour la page. afficher. Lorsqu'une erreur de demande se produit, nous effacerons le minuteur et arrêterons le suivi logistique.

Grâce aux exemples de code ci-dessus, nous pouvons implémenter des fonctions de requête express et de suivi logistique dans uniapp. En saisissant le numéro de commande du coursier, nous pouvons obtenir et afficher les informations pertinentes du coursier. En même temps, grâce à l'appel du minuteur, le statut du coursier peut être mis à jour en temps réel, permettant aux utilisateurs de comprendre la situation logistique. en temps réel. La mise en œuvre de cette fonction peut améliorer l'expérience utilisateur et améliorer la qualité de service de la plateforme de commerce électronique.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!