water-mall/pagesA/order/logistics.vue

<template>
	<view class="logistics" v-if="ifLoading">
		<status-nav :ifReturn="true" navBarTitle="订单跟踪"></status-nav>
		<!-- 暂无物流信息 -->
		<view class="state logboxs" v-if="logisticsInfo.data.length>0">
			<view class="title" v-if="logisticsInfo.data[0].statusCode==3">已签收</view>
			<view class="title" v-else>{{logisticsInfo.data[0].status}}</view>
			<text>{{logisticsInfo.data[0].time}}</text>
		</view>
		<view class="state logboxs" v-else>
			<view class="title">暂无物流信息</view>
		</view>
		<view class="user-list logboxs">
			<image :src="userInfo.headimgurl!==''?baseHttps+userInfo.headimgurl:headimgUrl" mode="cover" class="face"></image>
			<view class="boxs">
				<view class="st">
					<text>{{logisticsInfo.addressee_name}}</text>
					<view>{{logisticsInfo.addressee_phone}}</view>
				</view>
				<view class="st">
					<!-- <image src="/static/logistics/icon-call.png" mode="widthFix"></image> -->
					<text>{{logisticsInfo.express_name}}</text>
					<view class="phone">{{logisticsInfo.nu}}</view>
				</view>
			</view>
		</view>
		<!-- 快递 -->
		<view class="express logboxs">
			<view class="boxs">
				<view class="all-text">
					<view class="text-cont" v-for="(item,index) in logisticsInfo.data" :key="index">
						<view class="icon" v-if="item.statusCode==3">
							<view>收</view>
							<text>已签收</text>
						</view>
						<view class="icon" v-if="item.statusCode==5">
							<view>
								<image src="/static/logistics/icon-logistics-04.png" mode=""></image>
							</view>
							<text>派件</text>
						</view>
						<view class="icon" v-if="item.statusCode==0">
							<view><image src="/static/logistics/icon-logistics-03.png" mode="widthFix"></image></view>
							<text>运输中</text>
						</view>
						<view class="icon" v-if="item.statusCode==1">
							<view><image src="/static/logistics/icon-logistics-02.png" mode="widthFix"></image></view>
							<text>已揽件</text>
						</view>
						<view class="text" :style="{paddingTop:item.statusCode<10?'45rpx':'0rpx'}">{{item.context}}</view>
						<view class="time">{{item.time}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logs:{
					state:'交易成功',
					time:'送货时间不限',
				},
				baseHttps:`${getApp().globalData.hostapi}`, //接口链接 
				logisticsInfo:{}, //物流信息
				headimgUrl:'/static/public/avatar.png',
				userInfo:{}, //个人信息
				ifLoading:false, //是否加载完成
			};
		},
		onLoad(op) {
			if(op.id){
				// 查询物流信息
				this.getLogisticsEv(op.id);
			}
			// 查询个人信息
			this.getUserInfo();
		},
		methods: {
			// 查询个人信息
			getUserInfo(){
				this.$requst.post('/api/user/info').then(res => {
					if(res.code == 0){
						console.log(res,'用户信息');
						this.userInfo = res.data;
					}else{
						this.$toolAll.tools.showToast('登录已过期，请重新登录');
					}
				})
			},
			// 查询物流信息
			getLogisticsEv(id){
				this.$requst.get('/api/order/kd-loo-query',{order_id:id}).then(res => {
					if(res.code == 0){
						console.log(res,'物流信息');
						this.logisticsInfo = res.data;
						this.ifLoading = true;
					}else{
						this.$toolAll.tools.showToast(res.msg);
					}
				})
			}
		}
	}
</script>
<style scoped>
	.logistics {
		margin: 0 20rpx;
	}
	.logboxs {
		padding: 22rpx 40rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}
	
	.state .title {
		font-size: 36rpx;
		color: #333;
	}
	.state text {
		color: #343434;
		font-size: 24rpx;
		margin-top: 6rpx;
		display: block;
	}
	
	.user-list {
		display: flex;
		margin-top: 24rpx;
		align-items: center;
	}
	
	.user-list .face {
		width: 88rpx;
		height: 88rpx;
		margin-right: 18rpx;
		border-radius: 50%;
		overflow: hidden;
		display: block;
	}
	.user-list .boxs {
		display: block;
		line-height: 50rpx;
		font-size: 24rpx;
		color: #333;
	}
	
	.user-list .boxs .st {
		display: flex;
		align-items: center;
	}
	.user-list .boxs .st view {
		color: #f92d2e;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
	}
	.user-list .boxs .st .phone {
		margin-left: 30rpx;
	}
	.user-list .boxs .st view image {
		width: 30rpx;
		margin-right: 10rpx;
	}
	
	.express {
		margin-top: 24rpx;
		position: relative;
		padding-top: 40rpx;
		padding-right: 20rpx;
	}
	.express .boxs:before {
		content: "";
		display: block;
		left: -20rpx;
		width: 1px;
		top: 0;
		height: 100%;
		background-color: #e5e5e5;
		z-index: 9;
		position: absolute;
	}
	.express .boxs {
		display: flex;
		align-items: flex-start;
		padding-bottom: 40rpx;
		position: relative;
	}
	
	.express .boxs .icon{
		display: flex;
		align-items: center;
		width: 100%;
		height: 42rpx;
		position: absolute;
		left: -64rpx;
		top: 0;
		z-index: 999;
	}
	
	.express .boxs .icon>view {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 42rpx;
		height: 42rpx;
		border-radius: 50%;
		background-color: #e5e5e5;
		color: #666;
		font-size: 24rpx;
		position: relative;
		z-index: 99;
	}
	.express .boxs .icon>text{
		margin-left: 24rpx;
		font-size: 24rpx;
		font-weight: bold;
	}
	.express .boxs .icon>view image {
		width: 24rpx;
		height: 24rpx;
	}
	.express .boxs .all-text {
		margin-left: 24rpx;
	}
	.express .boxs .all-text .text-cont:first-child {
		margin-top: 0;
	}
	.express .boxs .all-text .text-cont:first-child::before {
		display: none;
	}
	.express .boxs .text-cont {
		width: 100%;
		position: relative;
		margin-top: 40rpx;
	}
	.express .boxs .text-cont:before {
		content: "";
		width: 20rpx;
		left: 0;
		height: 20rpx;
		background-color: #e5e5e5;
		border-radius: 50%;
		position: absolute;
		left: -54rpx;
		top: 12rpx;
	}
	.express .boxs .text-cont .title {
		line-height: 44rpx;
		font-size: 24rpx;
		color: #333;
		font-weight: bold;
	}
	
	.express .boxs .text-cont .text {
		font-size: 24rpx;
		color: #666;
		line-height: 44rpx;
	}
		
	.express .boxs .text-cont .time  {
		font-size: 22rpx;
		color: rgba(102,102,102,0.8);
		line-height: 40rpx;
	}
</style>