CBB3/pages/user/order/flow/flow.vue

<template>
	<view>
		<page-head title="查看物流" :isBack="true"></page-head>
		<view id="box">
			<view class="teack-top">
				<view class="tt-left">
					<image :src="path_img"></image>
				</view>
				<view class="tt-right">
					<view>物流状态：{{data.expName}}</view>
					<view>更新时间：{{data.updatTime}}</view>
					<view>运单编号：{{data.num}}</view>
				</view>
			</view>
			
			<view class="traces">
				<view v-for="(item,index) of data.data" :key="index" v-if="data.data.length != 0" >
					<view class="cu-line ">
						<view :class="[index == 0 ? 'cul-item-select' : 'cul-item']">
							<view class="content">
								<view>{{item.context}}</view>
								<view class="time">{{item.time}}</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="data.data.length == 0" class="no_time">
					暂无物流信息
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				path_img:"",
				data : {
					expName : "",
					updateTime : "",
					data : [],
					num : ""
				}
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.orderId = options.orderId;
			this.path_img = options.path_img;
			this.fetch_logistics();
		},
		methods: {
			fetch_logistics(){
				
				this
					.request
					.post("orderLogistics",{id:this.id})
					.then(res=>{
						if(res.code == 200) {
							this.data = res.data;
						}
					})
					.catch(err=>{
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
			}
		}
	}
</script>

<style>
	page {
		
	}

	#box {
		padding-top: 90px;
		z-index: -1;
	}
	.teack-top{
		padding: 20px 15px;
		display: flex;
		background: #fff;
	}
	
	.tt-left{
		width: 90px;
		height: 90px;
		margin-right: 10px;
	}
	.tt-left image{
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}
	.tt-right{
		width: 70%;
		color: #4A4A4A;
		font-size: 13px;
	}
	.tt-right view{
		margin-bottom: 5px;
	}
	/* ==================
	         物流信息
	 ==================== */
	.traces {
		border-top: 10px #f5f5f5 solid;
		padding: 30px 10px 20px 10px;
	}
	
	.cul-item,.cul-item-select {
		padding: 0 0 30px 30px;
		position: relative;
		display: block;
		z-index: 0;
	}
	
	.cul-item::after {
		content: "";
		display: block;
		position: absolute;
		width: 1px;
		background-color: #E2E2E2;
		left: 12px;
		height: calc(100% - 20px);
		margin: 15px auto 0;
		top: 0;
		z-index: 8;
	}
	
	.cul-item-select::after {
		content: "";
		display: block;
		position: absolute;
		width: 1rpx;
		background-color: #E2E2E2;
		left: 25rpx;
		height: calc(100% - 50rpx);
		margin: 40rpx auto 0;
		top: 0;
		z-index: 8;
	}
	
	.cul-item::before {
		display: block;
		position: absolute;
		top: 0rpx;
		z-index: 9;
		width: 10px;
		height: 10px;
		text-align: center;
		border: none;
		line-height: 12rpx;
		left: 16rpx;
		background: #E2E2E2;
		content: "";
		border-radius: 100%;
	}
	
	.cul-item-select::before {
		display: block;
		position: absolute;
		top: 0rpx;
		z-index: 9;
		width: 14rpx;
		height: 14rpx;
		text-align: center;
		border: none;
		line-height: 14rpx;
		left: 10rpx;
		background: #F3D9C3;
		content: "";
		border: 8rpx #EF4034 solid;
		border-radius: 100%;
	}
	
	.content {
		display: block;
		font-size: 28rpx;
		padding-left: 15rpx;
		color: #999;
		position: relative;
		top: -10rpx;
	}
	
	.cul-item-select>.content {
		color: #EF4034;
	}
	
	.cul-item-select>.content>.time {
		color: #EF4034;
	}
	.time {
		margin-top: 10rpx;
		color: #999;
		font-size: 24rpx;
	}
	
	.no_time {
		width: 100%;
		text-align: center;
		font-size: 26rpx;
		color: #999;
	}

</style>