liveShop/pages/order/expressInfo.vue

<template>
	<view class="container">
		<view class="express-box">
			<view class="top-text">
				<text class="top-com">{{expressList.com}}</text>
				<text>{{ expressList.nu }}</text>
			</view>
			<view class="express-body">
				<uni-steps :options="expressList.data" active-color="#007AFF" :active="active" direction="column"></uni-steps>
			</view>
		</view>
	</view>
</template>

<script>
import { express_query } from '@/api/order.js';
import uniSteps from '@/components/uni-steps/uni-steps.vue';
export default {
	components: {
		uniSteps
	},
	data() {
		return {
			id: '',
			expressList: [],
			active: 0
		}
	},
	onLoad(option) {
		this.id = option.id
	},
	onShow() {
		this.loadData()
	},
	methods: {
		loadData() {
			express_query({
				
			},this.id).then(({data}) => {
				this.expressList = data;
				console.log(this.expressList)
			}).catch(e => {
				uni.showModal({
					title: '提示',
					content: '暂无物流信息，请稍后查询',
					showCancel: false,
					success() {
						uni.navigateBack()
					}
				})
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	padding: 40rpx;
	background: #FFFFFF;
	.express-box {
		border-radius: $border-radius-sm;
		.top-text {
			width: 100%;
			height: 60rpx;
			background: #FFFFFF;
			padding-left: 20rpx;
			font-size: $font-base;
			border-radius: $border-radius-sm;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #EEEEEE;
			.top-com {
				margin-right: 10rpx;
			}
		}
		.express-body {
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: $border-radius-sm;
			padding: 20rpx 10rpx 20rpx 0;
		}
	}
}
</style>