xusfood_client/shopping/distribution.vue

<template>
	<view class="">
		<u-navbar
			title="物流详情"
			:placeholder="true"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<!-- <view class="map-wrap">
			<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
		</view> -->

		<view class="base-info page-wrap">
			<view class="company base-item u-flex"  v-if="details.logisticsNum">
				<!-- <u--image :showLoading="false" :src="companylogo" width="60rpx" height="60rpx"></u--image> -->
				<text>{{details.logisticsCompany}}：{{details.logisticsNum}}</text>
			</view>
			<view class="orderNo base-item">订单号：{{details.orderNum}}</view>
			<view class="addr base-item">收货地址：{{details.receiveAdress + details.address }}</view>
		</view>
		<view class="distribution page-wrap">
			<u-steps current="0" activeColor="#00A447" dot direction="column">
				<u-steps-item 
					v-for="(item,index) in details.dileveryList" :key="index"
					:title="item.reason + dileveryStatus(item.status)" 
					:desc="item.time">
				</u-steps-item>
				<!-- <u-steps-item title="已出库" desc="10:35"></u-steps-item> -->
			</u-steps>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				orderId:'',
				details:{
					orderNum:'',
					receiveAdress:'',
					address:''
				},
				staticUrl:this.$commonConfig.staticUrl,
				latitude: 30.659462,
				longitude: 104.065735,
				covers: [], //存放标记点数组
				companylogo:'',
			}
		},
		computed:{
			dileveryStatus(){
				return function(value){
					let dileveryList = ['下单', '揽件', '运输中', '派件中', '签收', '退回', '拒签']
					return ''
					return '-' + dileveryList[value]
				}
			}
		},
		onLoad(page) {
			this.orderId = page.orderId;
			this.getDilevery();
			// this.setCovers(this.latitude, this.longitude);
		},
		methods:{
			//设置点位
			setCovers(latitude, longitude) {
				let location = {
					id: 0,
					latitude: Number(latitude),
					longitude: Number(longitude),
					width: uni.upx2px(50),
					height: uni.upx2px(55),
					iconPath:this.$commonConfig.staticUrl+ '/img/index-nav-2.png'
					// iconPath: './../../static/location.png'
				}
				this.covers = [location]
			},
			getDilevery(){
				this.$u.api.getDilevery({orderId:this.orderId}).then(res=>{
					this.details = res.data;
					this.details.dileveryList = res.data.dileveryList.reverse();
					console.log('res',res.data);
				}).catch(err=>{
					console.log('getDilevery',err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.base-info{
	background-color: #fff;
	font-size: 32rpx;
	font-weight: 400;
	color: #333333;
	line-height: 45rpx;
	.base-item{
		padding: 20rpx;
		border-bottom: 0.5px solid #eee;
	}
	.company{
		font-weight: 600;
		color: #00A447;
	}
	.orderNo{
		
	}
}
.distribution{
	/deep/.u-steps{
		font-weight: 400;
		.u-text__value{
			font-size: 32rpx;
			color: #999999;
			line-height: 45rpx;
		}
		.u-text__value--main{
			color: #00A447;
		}
		.u-text__value--tips{
			font-size: 24rpx;
			line-height: 33rpx;
		}
	}
}
</style>