mp-ui-user/packageGoods/order/logistics.vue

<template>
	<view class="detail">
		<u-navbar title="物流详情" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
		<!-- 包裹 -->
		<view class="pack" v-if="deliverList.length>1">
			<u-tabs @change="changeTab" :scrollable="false" :list="packList" lineWidth="20" lineHeight="4"
				lineColor="#E96737" :activeStyle="{
									color: '#333',
									transform: 'scale(1.1)',
									width: '50px',
									
								}" :inactiveStyle="{
									color: '#666666',
									transform: 'scale(1)',
									width: '50px'
								}" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;text-align: center;">
			</u-tabs>
		</view>
		
		<!-- 商品 -->
		<view class="goods">
			<view class="goods-title">商品信息</view>
			<view class="goods-item" v-for="(item, index) in deliverListData[listIndex]" :key="index">
				<image :src="item.picUrl" mode="aspectFit"></image>
				<view class="info">
					<view class="info-title ells">{{ item.title }}</view>
					<view class="info-num flex">
						<view class="info-num-sku ells-one">规格：{{ item.properties || '-' }}</view>
						<view class="info-num-goods">共{{ item.goodsNum }}件</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 配送方式 -->
		<view class="mode">
			<view class="mode-item">
				<view>配送方式：</view>
				<view>{{ deliverListData[listIndex][0].companyName ? "快递发货" : "无需物流" }}</view>
			</view>
			<view class="mode-item" v-if="deliverListData[listIndex][0].companyName">
				<view>{{ deliverListData[listIndex][0].companyName }}：</view>
				<view class="flex" @click="copyDeliveryFlowId(deliverListData[listIndex][0].deliveryFlowId)">
					<text>{{ deliverListData[listIndex][0].deliveryFlowId }}</text>
					<view class="copy flex">
						<text>复制</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 物流信息 -->
		<view class="logistics" v-if="deliverListData[listIndex][0].companyName && logistics!==''">
			<u-steps current="0" direction="column" dot activeColor="#F9822C">
				<u-steps-item :desc="item.context" :title="item.status + '  ' + item.time"
					v-for="(item,index) in logistics">
				</u-steps-item>
			</u-steps>
		</view>
		<view class="logistics" v-else-if="deliverListData[listIndex][0].companyName">
			<view style="color: #b1b1b1;">
				暂无物流信息
			</view>
		</view>
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	export default {
		data() {
			return {
				info: '',
				list: [{
					picUrl: '',
					deliveryFlowId: '',
					deliveryId: '',
				}],
				orderId: '',
				deliverList: [{
					companyName: '',
				}],
				deliverListData: [
					[{
						companyName: ''
					}]
				],
				ListData: [],
				listIndex: 0,
				logistics: '',
				packList: []
			}
		},
		onLoad(opthios) {
			this.orderId = opthios.id
			this.getDetail()
		},
		methods: {
			changeTab(e) {
				this.listIndex = e.index
				if (this.deliverListData[this.listIndex][0].deliveryFlowId == "") {
					return
				}
				let data = {
					deliveryFlowId: this.deliverListData[this.listIndex][0].deliveryFlowId,
					deliveryId: this.deliverListData[this.listIndex][0].deliveryId,
				}
				$http.post('/api/v1/mp/logistics/query', data).then(res => {
					if (res.code == 500) {
						uni.hideToast();
					}
					if (res.code == 0) {
						this.logistics = res.data
					}
				})
			},

			getDetail() {
				uni.showLoading({
					title: '加载中'
				});
				$http.post('/api/v1/mp/user/deliver/order/detail', {
					orderId: this.orderId
				}).then(res => {
					uni.hideLoading();
					this.info = res.data
					this.deliverList = res.data.deliverList;
					res.data.items.forEach(item => {
						let picUrlArr = item.picUrl.split(',')
						item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170'
					})

					res.data.deliverList && res.data.deliverList.forEach((item, index) => {
						item.items.forEach((ele) => {
							let picUrlArr = ele.picUrl.split(",");
							ele.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170';
							this.ListData.push(item.items)
							this.packList.push({ name: `包裹${ index + 1 }` })
						});
					});
					this.deliverListData = this.ListData
					this.list = res.data.items
					this.changeTab({ index: 0 })
				}).catch(() => {
					uni.hideLoading();
				})
			},
			
			copyDeliveryFlowId(id) {
				uni.setClipboardData({
					data: id,
				});
			},
		}
	}
</script>
<style lang="scss" scopen>
	.aside-active {
		color: #f27120;
		border-bottom: 4rpx solid #f27120;
	}
</style>
<style lang="scss" scoped>
	.detail {
		padding-bottom: 160rpx;
	}

	// 包裹
	.pack {
		display: flex;
		background-color: #fff;
	}
	
	// 商品
	.goods {
		margin: 26rpx 34rpx 22rpx;
		background-color: #fff;
		padding: 20rpx 36rpx;
		border-radius: 20rpx;
		
		&-title {
			font-size: 30rpx;
			line-height: 30rpx;
			margin-bottom: 22rpx;
		}
		
		// 商品列表
		&-item{
			display: flex;
			
			image {
				width: 220rpx;
				height: 200rpx;
				border-radius: 12rpx;
				margin-right: 24rpx;
			}
			
			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
				padding: 8rpx 0;
				
				&-title {
					font-weight: bold;
					line-height: 40rpx;
				}
				
				&-num {
					justify-content: space-between;
					
					&-sku {
						flex: 1;
						color: #666666;
						font-size: 26rpx;
					}
					
					&-goods {
						color: #666666;
						font-size: 26rpx;
					}
				}
			}
		}
	}
	
	// 配送方式
	.mode {
		margin: 0 34rpx 22rpx;
		background-color: #fff;
		padding: 20rpx 36rpx;
		border-radius: 20rpx;
		
		&-item {
			display: flex;
			margin-bottom: 22rpx;
			
			.copy {
				height: 100%;
				margin-left: 8rpx;
				text-align: center;
				border-radius: 12rpx;
				font-size: 24rpx;
				line-height: 24rpx;
				padding: 0 6rpx;
				background-color: rgba(153, 153, 153, .1);
				
				text {
					display: inline-block;
					transform: scale(0.8);
				}
			}
		}
		
		&-item:last-child {
			margin-bottom: 0;
		}
	}
	
	// 物流信息
	.logistics {
		margin: 0 34rpx 22rpx;
		background-color: #fff;
		padding: 20rpx 36rpx;
		border-radius: 20rpx;
	}
</style>