1

pages/bookShop/deliverDetail.vue

@@ -0,0 +1,173 @@
+<template>
+	<view class="">
+		<view class="header">
+			<!-- 顶部导航栏 -->
+			<z-nav-bar title="物流详情" bgColor="red"></z-nav-bar>
+			<u-tabs active-color="#2979ff" inactive-color="#606266" bar-height="6" bar-width="40" v-if="deliverList"
+				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}}</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>
+		<!-- <u-loading color="red" :show="loading"></u-loading> -->
+	</view>
+</template>
+
+<script>
+	import $http from '@/config/requestConfig.js';
+	// import Loading from '../../'
+	import {
+		mapState
+	} from 'vuex';
+	import loginVue from '../user/login.vue';
+	export default {
+		data() {
+			return {
+				loading: false,
+				orderId: null,
+				deliverDetails: [{
+					Traces: []
+				}],
+				current: 0,
+				deliverList: [{
+					name: null
+				}],
+				deliverDetailsLength: null
+			}
+		},
+		onLoad(e) {
+			this.orderId = e.objId
+		},
+		onShow() {
+			this.getdeliverDetails()
+		},
+		computed: {
+			...mapState(['userInfo']),
+		},
+		methods: {
+			tabchange(item) {
+				console.log(item)
+				this.current = item.index
+			},
+			// 获取物流
+			getdeliverDetails() {
+				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[index].name = item.ShipperName
+							})
+						}
+					})
+			},
+
+
+
+		}
+	}
+</script>
+<style>
+	.item:first-child::before {
+		background-color: #6fca78 !important
+	}
+</style>
+<style lang="scss" scoped>
+	.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: 24rpx;
+		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: 14px;
+			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>