miniapp/pages/expressDelivery/component/expressDelivery.vue

<template>
	<view class="page">
		<view class="mainAll" v-if="list2.length > 0">
			<view class="pageTitle">
				快递公司:{{expressMain.company}}
			</view>
			<view class="pageTitle">
				快递单号:{{expressMain.no}}
			</view>
			<view class="pageMain">
				<view>
					<uni-steps :options="list2" active-color="#007AFF" direction="column" />
				</view>
			</view>
		</view>
		<view class="emptyBox" v-if="list2.length == 0">
			<luanqing-empty :show="true" textColor="#000"></luanqing-empty>
		</view>
	</view>
</template>

<script>
	import {
		logistics
	} from '../../../api/handlecase/index.js'
	import LuanqingEmpty from "@/components/luanqing-empty.vue"
	export default {
		components: {
			'luanqing-empty': LuanqingEmpty,
		},
		data() {
			return {
				expressMain: {},
				list2: []
			}
		},
		methods: {

		},
		onLoad(data) {
			uni.showLoading()
			logistics({
				id: data.id
			}).then(res => {
				uni.hideLoading()
				this.expressMain = res.data[1].logisticsInfo;
				this.expressMain = JSON.parse(this.expressMain);
				this.expressMain.list.forEach(item => {
					item.title = item.remark;
					item.desc = item.datetime
				})
				this.list2 = this.expressMain.list
			})
		}
	}
</script>

<style lang="scss">
	.page {
		background-color: #ffffff;

		.pageTitle {
			width: 100%;
			padding: 15rpx;
		}

		.pageMain {
			.status-btn {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: row;
				align-items: center;
				justify-content: center;
				height: 92rpx;
				margin: 30rpx;
				background-color: #007AFF;
			}
		}
	}
</style>