How to implement express delivery inquiry and logistics tracking in uniapp

How to implement express delivery query and logistics tracking in uniapp

With the rapid development of e-commerce, the express delivery industry has also developed greatly. It is very important for users to know the latest status of express delivery and accurate logistics tracking information. In uniapp, we can easily implement express query and logistics tracking functions.

1. Express Query

In the express query function, we need the user to enter the express order number and pass the order number to the relevant express inquiry interface to obtain relevant information about the express, such as express delivery The current status of the company and express delivery, etc. The following is a sample code that uses the Express Bird API to implement express query:

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

In the above code, we use the uni.request function to send an HTTP request and pass the express order number as a parameter to the Express Bird query interface. When the interface response is successful, we will resolve the returned express track information and display it on the page.

2. Logistics tracking

The logistics tracking function refers to constantly updating the latest status of express delivery, allowing users to understand the transportation status of express delivery in real time. The following is a sample code that uses the setInterval function to implement logistics tracking:

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

In the above code, we use the setInterval function to call the queryExpress function every 30 seconds to obtain the latest trajectory information of the express and update the page display. When a request error occurs, we will clear the timer and stop logistics tracking.

Through the above code examples, we can implement express query and logistics tracking functions in uniapp. By inputting the courier order number, the user can obtain and display the relevant information of the courier. At the same time, through the call of the timer, the status of the courier can be updated in real time, so that the user can understand the logistics situation in real time. The implementation of this function can improve the user experience and improve the service quality of the e-commerce platform.

The above is the detailed content of How to implement express delivery inquiry and logistics tracking in uniapp. For more information, please follow other related articles on the PHP Chinese website!