soulspace/pages/order/deliverDetail.vue

<template>
	<view class="">
		<view class="header">
			<z-nav-bar  title="物流详情"></z-nav-bar>		
		</view>
		<view class="" style="margin-bottom: 20rpx; font-size: 28rpx;">
			<view class="kuaidiItem">运单号： {{expressOrderSn}}
			<u-tag @click="copyData(expressOrderSn)" class="copyCode" text="复制" plain type="success" /></view>
		</view>
		<view v-if="deliverDetails.length > 0">
			<view class="deliverCntent">
				<view class="">	
					<view  v-for="(item, index) in deliverDetails" :class="['item',index == 0 ? 'first':'' ]">
						<view class="flexbox">
							<view class="img_icon "></view>
							<view class="wuliu">
								<view class="time">{{item.acceptTime}}</view>
								<view class="content">{{item.acceptStation}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>			
		</view>
		<view class="quesheng" v-else>			
			<u-divider text="- 暂无物流信息 -"></u-divider>
		</view>
	</view>
</template>

<script>
import $http from '@/config/requestConfig.js';
import {
	mapState
} from 'vuex';
import loginVue from '../user/login.vue';
export default {
	data() {
		return {
			playData:{},
			loading: false,
			orderId: null,
			deliverDetails: [],
			express:{},   // 面单
			consignee:{}, // 收件人信息
			expressOrderSn:'', // 运单号
			orderSn : '',
			current: 0,
			deliverList: [],
			deliverDetailsLength: null,
			orderContet:{},				
		}
	},
	onLoad(e) {
		this.expressOrderSn = e.expressOrderSn;
		this.orderSn = e.orderSn;
	},
	onShow() {
		this.getOrderList()			
	},
	computed: {
		...mapState(['userInfo']),
	},
	methods: {
		// 获取订单列表
		getOrderList() {
			this.$http.get(`book/buyOrder/orderDetail?orderSn=${this.orderSn}`)
				.then(res => {
					var seconds = res.result.timestamp + 30 * 60 + 2    // 过期时间
					var nowSeconds = Math.floor(new Date().getTime() / 1000);
					res.result.overTime = seconds - nowSeconds
					
					this.orderContet = res.result;
					this.productIDs = res.result.goodsList.map(item => {
						return item.buyOrderProductId
					})
					if (this.orderContet.orderStatus == 0) {
						this.titleStat = '待支付'
					} else if (this.orderContet.orderStatus == 1) {
						this.titleStat = '待发货'
					} else if (this.orderContet.orderStatus == 2) {
						this.titleStat = '待收货'
					} else if (this.orderContet.orderStatus == 3) {
						this.titleStat = '已完成'
					}
					
					
					if(parseInt(this.orderContet.orderStatus) >= 2){
						this.getdeliverDetails();
					}
				})
		},
		
		// 复制到剪切板
		copyData(data){
			uni.setClipboardData({
				data,
				success: function () {
					console.log('success');
				}
			});
		},
		tabchange(item) {
			this.current = item.index
		},
		// 获取物流
		getdeliverDetails() {
			this.deliverList = [];
			uni.showLoading()
			this.$http.get(`/book/buyOrder/searchExpress?expressOrderSn=${this.expressOrderSn}`)
				.then(res => {
					if (res && res.code === 0) {
						uni.hideLoading()
						if(res.express.traces.length > 0){
							this.deliverDetails = res.express.traces.reverse()	
						}else{
							this.deliverDetails = []
						}												
					}
				}).catch(e => {
					uni.hideLoading()
				})
		}
	}
}
</script>
<style>
.item:first-child::before {
	background-color: #6fca78 !important
}
</style>
<style lang="scss" scoped>
.quesheng{text-align: center; margin-top: 20px;
image{	width: 150rpx; height: 170rpx;  display: block; margin: 10px auto;	
	}
	text{
		color: #888;
	}
}
.copyCode{display: inline-block; margin-left: 20rpx; }
.u-tabs {
	background: #fff
}

.xiangqing {
	overflow: hidden;

	img {
		display: block;
		max-width: 100%;
	}
}

.kuaidiItem {
	padding: 10px;
	color: #666
}

.deliverCntent {
	.img_icon {
		border-left: 2px solid #eee;
	}
	line-height:20px;
	padding: 32rpx;
	position: relative;
	background-color: #fff;
	margin-bottom: 20rpx;
	border-top: 1px solid #eee;
	font-size: 28rpx;
	color:#777;
	.item {
		padding-left: 10px;
		position: relative;
	}			
	.item:before {
		display: inline-block;
		width: 10px;
		height: 10px;
		border-radius: 100%;
		background: #eee;
		left: 6px;
		top: 0;
		content: "";
		position: absolute;
	}

	.time {
		color: #888;
		font-size: 28rpx;
		margin-bottom: 5px
	}
	.first{			
		color: #55aa7f;
	}
	.content {
		padding-bottom: 14px;
	}
}
.flexbox {
	display: flex;
}

.img_icon {
	padding-right: 30rpx;
}

.moreBtnF {
	align-items: center;
	padding: 30rpx;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
	background-color: rgba(255, 255, 255, .9);
}
</style>