point-app/pagesMy/logistics/index.vue

<template>
	<mobile-frame>
		<view class="main">
			<view class="one"></view>
			<view class="two">
				<view class="two_1">
					<view class="two_1_1">
						<text>订单状态：</text>
						<text>{{is_check}}</text>
					</view>
					<view class="two_1_1">
						<text>物流单号：</text>
						<text>{{no}}</text>
					</view>
				</view>
				<view class="two_2">
					<uni-section title="物流记录" type="line" padding>
						<uni-steps :options="list" active-color="#007AFF" :active="active" direction="column" />
					</uni-section>
				</view>
			</view>
		</view>
		</view>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				user: {},
				info: {},
				is_check: '',
				no: '',
				list: []
			};
		},
		onLoad: function(e) {
			const that = this;
			that.$set(that, `id`, e.id || '6343b53f21b24c75ad8dbf7a');
			that.watchLogin()
		},
		onShow: function() {},
		methods: {
			watchLogin() {
				const that = this;
				uni.getStorage({
					key: 'token',
					success: function(res) {
						let user = that.$jwt(res.data);
						if (user) that.$set(that, `user`, user);
						that.searchInfo();
					}
				})
			},
			async searchInfo() {
				const that = this;
				if (that.id) {
					let res = await that.$api(`/orderDetail/${that.id}`, 'GET')
					if (res.errcode == '0') {
						that.$set(that, `info`, res.data);
						that.search();
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						})
					}
				}
			},
			async search() {
				const that = this;
				let res = await that.$api(`/orderDetail/sot/${that.info._id}`);
				if (res.errcode == '0') {
					that.$set(that, `is_check`, res.data.is_check);
					let list = res.data.list.map((i) => ({
						desc: i.time,
						title: i.context
					}))
					console.log(list);
					that.$set(that, `list`, list);
					that.$set(that, `no`, res.data.no);
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			position: relative;
			width: 100vw;
			height: 100vh;
			background-color: #ff0000;
		}

		.two {
			position: absolute;
			bottom: 0;
			width: 92vw;
			height: 60vh;
			overflow-y: auto;
			background: #fff;
			margin: 0 2vw;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			padding: 2vw;

			.two_1 {
				margin: 0 0 2vw 0;

				.two_1_1 {
					padding: 1vw 0;
				}
			}
		}

	}

	.uni-section .uni-section-header {
		padding: 1vw !important;
	}

	.uni-section .uni-section-content {
		padding: 0 !important;
	}
</style>