medicine_app/pages/bookShop/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">
			<!-- <u-tabs active-color="#2979ff" inactive-color="#606266" bar-height="6" bar-width="40" 
				name="name" :list="deliverList" :is-scroll="false" :current="current" @change="tabchange"></u-tabs> -->
			<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>
		<music-play :playData="playData"></music-play>
		<public-module></public-module>
		<!-- <u-loading color="red" :show="loading"></u-loading> -->
	</view>
</template>

<script>
	import musicPlay from '@/components/music.vue'
	import $http from '@/config/requestConfig.js';
	// import Loading from '../../'
	import {
		mapState
	} from 'vuex';
	import loginVue from '../user/login.vue';
	export default {
		data() {
			return {
				playData:{},
				loading: false,
				orderId: null,
				deliverDetails: [],
				express:{},   // 面单
				consignee:{}, // 收件人信息
				expressOrderSn:'', // 运单号
				// expressCompanyCode:'', //快递编码
				// expressCompanyName:'' ,// 快递公司
				orderSn : '',
				current: 0,
				deliverList: [],
				deliverDetailsLength: null,
				orderContet:{},				
			}
		},
		onLoad(e) {
			this.expressOrderSn = e.expressOrderSn
			// this.expressCompanyCode = e.expressCompanyCode
			// this.expressCompanyName = e.expressCompanyName
			//this.express = e.express
			//this.consignee = e.consignee
			console.log(e,'传入的参数')
			this.orderSn = e.orderSn
		},
		onShow() {
			this.getOrderList()			
		},
		computed: {
			...mapState(['userInfo']),
		},
		components:{
			musicPlay
		},
		methods: {			
			
			// 获取订单列表
			getOrderList() {
				console.log('this.orderType',this.orderType)
				this.$http
					// .get(`book/buyOrder/getOrderInfo?orderId=${this.orderID}`)
					.get(`book/buyOrder/orderDetail?orderSn=${this.orderSn}`)
					.then(res => {
						console.log('订单详情',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.userRecordid = res.userRecordid
						this.productIDs = res.result.goodsList.map(item => {
							return item.buyOrderProductId
						})
						// console.log(this.orderContet,'this.orderContet')
						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()
							// 查询快递信息
							// this.getSheetInfo()
						}
						console.log(this.orderContet,'订单详情')
					})
			},
			
			// 复制到剪切板
			copyData(data){
				uni.setClipboardData({
					data,
					success: function () {
						console.log('success');
					}
				});
			},
			tabchange(item) {
				console.log(item)
				this.current = item.index
			},
			// 获取物流
			getdeliverDetails() {
				this.deliverList = []
				// var strLength = this.orderContet.consignee.consigneeMobile.length
				// var subMobile = this.orderContet.consignee.consigneeMobile.substring(strLength-4,strLength)
				// this.expressOrderSn = 'SF1504651506851'
				// this.expressCompanyCode = 'SF'
				// subMobile = '9277'
				uni.showLoading()
				this.$http
					//.post(`/book/buyOrder/queryFMS?orderId=${this.orderId}`)
					.get(`/book/buyOrder/searchExpress?expressOrderSn=${this.expressOrderSn}`)
					.then(res => {
						 console.log(res, '物流信息')
						if (res && res.code === 0) {
							uni.hideLoading()
							// this.deliverDetails = res.result.traces
							   console.log(res.express.traces,'物流信息')	
							if(res.express.traces.length > 0){
								this.deliverDetails = res.express.traces.reverse()	
							}else{
								this.deliverDetails = []
							}
																					
						}
					}).catch(e => {
						uni.hideLoading()
						console.log(e,'e')
					})
			},



		}
	}
</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>