nuttyreading-html/pages/bookShop/deliverDetail.vue

<template>
	<view class="">
		<view class="header">
			<!-- 顶部导航栏 -->
			<z-nav-bar title="物流详情" bgColor="red"></z-nav-bar>			
		</view>
		<view v-if="deliverList.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="" v-for="(list, index1) in deliverDetails" :key="index1">
					<view v-show="index1 == current">
					<view class="kuaidiItem">{{list.ShipperName}} {{list.LogisticCode}} <u-tag @click="copyData(list.LogisticCode)" class="copyCode" text="复制" plain type="success" /></view>
					<view class="item" v-for="(item, index) in list.Traces">
						<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>
		<view class="quesheng" v-else>
			<image src="../../static/icon/kongbai.png" ></image>
			<text>- 暂无物流信息 -</text>
		</view>
		<music-play :playData="playData"></music-play>
		<!-- <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: [{
					Traces: []
				}],
				current: 0,
				deliverList: [],
				deliverDetailsLength: null
			}
		},
		onLoad(e) {
			this.orderId = e.objId
		},
		onShow() {
			this.getdeliverDetails()
		},
		computed: {
			...mapState(['userInfo']),
		},
		components:{
			musicPlay
		},
		methods: {
			// 复制到剪切板
			copyData(data){
				uni.setClipboardData({
					data,
					success: function () {
						console.log('success');
					}
				});
			},
			tabchange(item) {
				console.log(item)
				this.current = item.index
			},
			// 获取物流
			getdeliverDetails() {
				this.deliverList = []
				uni.showLoading()
				this.$http
					.post(`/book/buyOrder/queryFMS?orderId=${this.orderId}`)
					.then(res => {
						 console.log(res, '物流信息')
						if (res && res.code === 0) {
							uni.hideLoading()
							this.deliverDetails = res.rntStr
							// console.log(res.rntStr,'物流信息')
							res.rntStr.forEach((item, index) => {
								item.Traces = item.Traces.reverse()
									//console.log(item)
								this.deliverList.push({'name':item.ShipperName})
							})							
						}
					})
			},



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

		.content {
			padding-bottom: 14px;
		}
	}

	.flexbox {
		display: flex;
	}

	.img_icon {
		padding-right: 5px;
	}

	.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>