yicangzongtai_app_240321/pages/order/logistics.vue

<template>
	<view class="container">
		<navbar :config="config" backColor="#666"></navbar>
		<!--商品信息-->
		<view class="u-bg-fff u-plr30 borderBottom">
			<view class="u-ptb30 u-flex">
				<image class="u-goods120" :src="goodsimg"></image>
				<view class="u-1A1A1A u-ml30">
					<view class="u-font28">商品已揽件 <span class="u-font24 u-999 u-ml20">共{{num}}件商品</span> </view>
					<view class="u-font24 u-mt5">订单编码： <span class="u-999">{{code}}</span> </view>
				</view>
			</view>
		</view>
		<!--物流信息-->
		<view class="u-mt30">
			<view class="shipping u-bg-fff">
				<view class="linehh" :style="'height:'+xiantiaoHeight+'px;top:'+xiantiaoTop+'px;left:'+xiantiaoLeft+'px'"></view>
				<view class="ul u-plr30" v-for="(item,index) in shiplist" :key="index">
					<view class="li">
						<!-- <view class="state u-font26 u-flex" :class="{act:index==0}">
							{{item.state}}
						</view> -->
						<view class="mmmm">
							<view class="yuan " :class="{act:index==0,first:index==0,end:index==shiplist.length-1}">
							</view>
						</view>
						<view class="desc">
							<view class="u-font26 u-1A1A1A">{{item.acceptStation}}</view>
							<view class="u-999 u-font24 u-mt10">{{item.acceptTime}}</view>
						</view>
					</view>
				</view>
				<nodata v-if="noData" :config="{top:20,content:'暂无物流数据~'}"></nodata>

			</view>
		</view>

	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '物流信息',
					color: '#1a1a1a',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A'
				},
				xiantiaoHeight: 0,
				xiantiaoLeft: 0,
				xiantiaoTop: 0,
				goodsimg:'',
				num:0,
				code:'',
				shiplist: [],
				noData:false,
				
			}
		},
		onLoad(options) {
			if(options.id){
				this.num = options.num
				this.goodsimg = options.img
				if(options.type==1){
					this.getLogistiscs(options.id)
				}else{
					this.getLogistiscsBlack(options.id)
				}
				
			}
		
			
			
		},
		methods: {
			getLogistiscs(id){
				this.$http.get('/order/express/select/'+id)
					.then(res => {
						if(res&&res.code==200){
							this.shiplist = res.data.traces.reverse()
							this.code = res.data.logisticCode
							if(res.data.traces.length==0){
								this.noData=true
							}
						}
					})
			},
			getLogistiscsBlack(id){
				this.$http.get('/rights/express/select/'+id)
					.then(res => {
						if(res&&res.code==200){
							this.shiplist = res.data.traces.reverse()
							this.code = res.data.logisticCode
							if(res.data.traces.length==0){
								this.noData=true
							}
						}
					})
			},
			getHeight() {
				const query = uni.createSelectorQuery();
				query.select('.first').boundingClientRect()
				query.select('.end').boundingClientRect()
				var that = this;
				query.exec(function(res) {
					console.log(res);
					var xiantiaoHeight = 0;
					if (res[1] !== null) {
						xiantiaoHeight = (res[1].top - res[0].top);
					}
					that.xiantiaoHeight = xiantiaoHeight;
					that.xiantiaoLeft = res[0].left + 4;
					that.xiantiaoTop = res[0].top;
				})
			}
		}
	}
</script>

<style lang="scss">
	.borderBottom{
		border-bottom: 20rpx solid #eee;
	}
	.shipping {
			width: 100%;
			margin: 0 auto;
			background-color: #ffffff;
	         .linehh {
				 position: absolute;
	         	width: 2rpx;
				margin-left: 16rpx;
	         	border-left: 2rpx dotted #BEC2CB;
	         }
			.ul {
				.li {
					width: 100%;
					display: flex;
					height: auto;
	                margin-top: 2rpx;	 
					.state {
						padding: 20rpx 0rpx;
						 &.act{
						 	color:#3775F6;
						 }	 
						.timeday {
							font-size:28upx;
						}	 
						.timeh {
							font-size: 24upx;
						}	 
					}
	 
					.mmmm {
	                    position: relative;
						display: flex;
						padding: 0rpx 32rpx 0rpx 36rpx;
						margin-top: 22rpx;
						.yuan {
							position: absolute;
							left: 26rpx;
							width: 25rpx;
							height: 25rpx;
							background: #dedede;
							border-radius: 50%;
							border: 3rpx solid #f2f2f2;
							&.act{
								background-color: #FA6138;
								width: 44rpx;
								height: 44rpx;
								margin-left: -10rpx;
							}
						}
					}
					.desc {
						width: 74%;
						padding: 20rpx 0rpx;
						margin-left: 22rpx;
					}
				}
			}
		}
</style>