先看效果

主要需要用到快递100这个官方借口

vue文件

<template>
	<view class="tracking-page">
		<!-- 步骤条 -->
		<view class="tracking-view" v-for="(item,index) in progress" :key="index">
			<!-- 左边 -->
			<view class="tracking-left">
				<view v-if="index == 0 && state == '3'" class="active">签</view>
				<view v-else></view>
				<view></view>
			</view>
			<!-- 右边 -->
			<view class="tracking-right">
				<view :class="[index == 0 && state == '3' ? 'active-text' : '']">{{item.context}}</view>
				<view>{{item.time}}</view>
			</view>
		</view>
		<!-- 没有物流轨迹 -->
		<view class="Tips" v-if="message == 1">暂无物流动态</view>
	</view>
</template>

<script setup>
	import {URL,KEY,CUSTOMER,KUAIDI} from '../../Acc-config/kuaidi.js'
	import {ref,reactive,toRefs} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	import md5 from 'js-md5'

	onLoad(()=>{
		post()
	})
	// body要请求的参数
	function getParams(){
		let param = {com:'',num:'???????',}
		// 加密
		let md = md5(JSON.stringify(param) + KEY + CUSTOMER).toUpperCase()
		let obj = {customer:CUSTOMER,sign:md,param:JSON.stringify(param)}
		return obj
	}
	
	const data = reactive({nu:'',state:0,kuaidi:'',logo:'',progress:[],message:0})
	const {nu,state,kuaidi,logo,progress,message} = toRefs(data)
	function post(){
		uni.request({
			url:URL,
			method:'POST',
			header:{'Content-Type':'application/x-www-form-urlencoded'},
			data:getParams()
		})
		.then(res=>{
			console.log(res)
			if(res.data.message == "ok"){
				data.nu = res.data.nu
				data.state = res.data.state
				const K_name = KUAIDI.filter(item=>item.com == res.data.com)
				data.kuaidi = K_name[0].name
				data.logo = K_name[0].logo
				data.progress = res.data.data
			}else{
				data.message = 1
			}
		})
		.catch(err=>{
			console.log(err)
		})
	}
		
</script>

<style scoped>
.tracking-page{
	margin: 20rpx 20rpx 40rpx 20rpx;
}

.tracking-view{
	display: flex;
}
.tracking-left{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 40rpx;
}
.tracking-left view:nth-child(2){
	background-color: #cccccc;
	width: 4rpx;
	height: 100%;
}
.tracking-left view:nth-child(1){
	background-color: #cccccc;
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
}
.tracking-right{
	padding: 0 0 40rpx 20rpx;
	width: 100%;
}
.tracking-right view:nth-child(1){
	line-height: 1.5;
	padding-bottom: 10rpx;
}
.tracking-right view:nth-child(2){
	color: #c0c0c0;
	font-size: 26rpx;
}
.active{
	width: 35rpx !important;
	height: 35rpx !important;
	font-size: 22rpx;
	color: #FFFFFF;
	background-color: #f42c37 !important;
	text-align: center;
	line-height: 35rpx;
}
.active-text{
	color: #f42c37;
}
</style>

kuaidi.js

/* 快递100的账号配置 */

const URL = 'https://poll.kuaidi100.com/poll/query.do'
const KEY = '?????'
const CUSTOMER = '??????'

// 快递公司
const KUAIDI = [
	{
		name:'圆通速递',
		com:'yuantong',
		logo:'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/yuantong.jpg'
	},
	{
		name:'韵达快递',
		com:'yunda',
		logo:'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/yunda.jpg'
	},
	{
		name:'中通快递',
		com:'zhongtong',
		logo:'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/zhongtong.jpg'
	},
	{
		name:'邮政快递',
		com:'youzhengguonei',
		logo:'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/youzheng.jpg'
	},
	{
		name:'申通快递',
		com:'shentong',
		logo:'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/shentong.png'
	},
	{
		name:'顺丰速运',
		com:'shunfeng',
		logo:'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/shunfeng.jpg'
	},
	{
		name:'EMS',
		com:'ems',
		logo:'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/ems.png'
	},
	{
		name:'京东物流',
		com:'jd',
		logo:'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/jd.jpg'
	},
	{
		name:'极兔速递',
		com:'jtexpress',
		logo:'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/jitu.png'
	},
	{
		name:'百世快递',
		com:'huitongkuaidi',
		logo:'https://qita-1252107261.cos.ap-chengdu.myqcloud.com/kuaidi/baishi.jpg'
	}
]

export {URL,KEY,CUSTOMER,KUAIDI}