caimei-applets-caimei/pages/user/order/order-logistics.vue

<template>
	<view class="container logistics clearfix">
		<!-- 商品 -->
		<view class="logistics-container">
			<view class="logistics-batch" v-for="(item, index) in goodsList" :key="index">
				<view class="order-item" v-for="(comItem, comIndex) in item.companyList" :key="comIndex">
					<view class="goods-title">
						<view class="title-logo"><image :src="comItem.shopLogo" mode=""></image></view>
						<view class="title-text">{{ comItem.name }}</view>
					</view>
					<view class="goods-item" v-for="(pros, prosIndex) in comItem.productsList" :key="prosIndex">
						<view class="goods-pros-t">
							<view class="pros-img"><image :src="pros.mainImage" alt=""/></view>
							<view class="pros-product">
								<view class="producttitle">{{ pros.name }}</view>
								<view class="productspec">购买数量：{{ pros.number }}</view>
								<view class="productspec">已发货数量：{{ pros.logNumber }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="logistics-template">
					<!-- 物流信息 -->
					<view
						class="logistics-content"
						v-if="item.logisticsData.length > 0"
						v-for="(loItem, loIndex) in item.logisticsData"
						:key="loIndex"
					>
						<view class="logistics-top"> <text class="name">物流信息</text> </view>
						<view class="logistics-warp">
							<view class="logistics-warp__wrapper">
								<view class="logistics-main">
									<view class="logistics-main-top">
										<view class="main-top" @click="showlogistics(index, loIndex)">
											{{ loItem.expressname }}：<text class="expressNumber">{{
												loItem.expressNumber
											}}</text>
											<text class="clipboard" @click.stop="clipboard(loItem.expressNumber)"
												>复制</text
											>
											<text
												class="arrow-showMore iconfont icon-web_xiangxiazhankai"
												:style="{
													transform: loItem.isOpen ? 'rotate(180deg)' : 'rotate(0)',
													transition: 'transform 0.3s ease'
												}"
											></text>
										</view>
										<view class="main-bot"> 发货时间：{{ loItem.expressNewtime }} </view>
									</view>
									<view
										v-if="loItem.expressRecord.length > 0"
										v-for="(infoItem, infoIndex) in loItem.expressRecord"
										:key="infoIndex"
										:class="{ 'logistics-warp--hide': !loItem.isOpen }"
										class="logistics-main-bot logistics-animation"
										:style="{
											transform: loItem.isOpen ? 'translateY(0)' : 'translateY(-50%)',
											'-webkit-transform': loItem.isOpen ? 'translateY(0)' : 'translateY(-50%)'
										}"
									>
										{{ infoItem.time }} {{ infoItem.desc }}
									</view>
									<view
										v-if="loItem.expressRecord.length < 1"
										:class="{ 'logistics-warp--hide': !loItem.isOpen }"
										class="logistics-main-bot logistics-animation"
										:style="{
											transform: loItem.isOpen ? 'translateY(0)' : 'translateY(-50%)',
											'-webkit-transform': loItem.isOpen ? 'translateY(0)' : 'translateY(-50%)'
										}"
									>
										暂无物流信息
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="logistics-content" v-else> 暂无物流信息 </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const thorui = require('@/components/clipboard/clipboard.thorui.js')
export default {
	data() {
		return {
			shopOrderId: '',
			goodsList: []
		}
	},
	onLoad(option) {
		//商品数据
		this.shopOrderId = option.shopOrderId
		this.getData()
	},
	methods: {
		navToListPage(id) {
			this.$api.navigateTo(`/pages/goods/product?id=${id}`)
		},
		showlogistics(index, loIndex) {
			let getGoodsList = this.goodsList[index],
				isOpen = getGoodsList.logisticsData[loIndex]['isOpen']
			this.goodsList[index].logisticsData[loIndex]['isOpen'] = !isOpen
		},
		clipboard(data) {
			thorui.getClipboardData(data, res => {
				if (res) {
					this.$util.msg('复制成功', 2000, true, 'success')
				} else {
					this.$util.msg('复制失败', 2000, true, 'none')
				}
			})
		},
		getData() {
			this.OrderService.QueryLogistics({ shopOrderId: this.shopOrderId })
				.then(response => {
					const resData = response.data
					// 添加订单列表信息
					let orderListArr = []
					resData.forEach((item, index) => {
						let logisticsArr = [],
							companyList = [],
							shopOrderList = item.shopOrderList,
							logisticsInfos = item.logisticsInformationList
						// 添加物流信息
						if (logisticsInfos.length > 0) {
							logisticsInfos.forEach((loItem, loIndex) => {
								let newRouters = []
								logisticsArr.push({
									expressname: loItem['logisticsCompanyName'],
									expressNumber: loItem['nu'],
									expressNewtime: item.deliveryTime,
									isOpen: false
								})
								if (loIndex == 0) {
									logisticsArr[loIndex]['isOpen'] = true
								}
								if (loItem.routerList) {
									loItem.routerList.forEach((rItem, rIndex) => {
										newRouters.push({
											desc: rItem.desc,
											time: rItem.time
										})
									})
									logisticsArr[loIndex]['expressRecord'] = [...newRouters]
								} else {
									logisticsArr[loIndex]['expressRecord'] = []
								}
							})
						}
						// 供应商信息
						shopOrderList.forEach((shopItem, shopIndex) => {
							let prosListArr = [],
								cmLogisticsRecords = shopItem.logisticsRecordList
							// 商品信息
							cmLogisticsRecords.forEach((prosItem, prosIndex) => {
								prosListArr.push({
									id: prosItem.organizeProductID,
									name: prosItem.productName,
									mainImage: prosItem.image,
									number: prosItem.buyNum,
									logNumber: prosItem.num
								})
							})
							companyList.push({
								shopLogo: shopItem.shopLogo,
								name: shopItem.shopName,
								showGoods: cmLogisticsRecords.length > 0,
								productsList: [...prosListArr]
							})
						})
						orderListArr.push({
							logisticsData: [...logisticsArr],
							companyList: [...companyList]
						})
					})
					this.goodsList = [...orderListArr]
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		}
	}
}
</script>

<style lang="scss">
page {
	height: auto;
}
.logistics-container {
	width: 100%;
	height: auto;
	float: left;
	background: #f7f7f7;
	border-top: 1px solid #f8f8f8;
	.logistics-batch {
		display: flex;
		flex-direction: column;
		margin-bottom: 24rpx;
	}
	.order-item {
		width: 702rpx;
		padding: 24rpx 24rpx 12rpx 24rpx;
		height: auto;
		float: left;
		background: #ffffff;
		margin-bottom: 24rpx;
		.goods-title {
			width: 100%;
			height: 48rpx;
			float: left;
			margin-bottom: 12rpx;
			.title-logo {
				width: 48rpx;
				height: 48rpx;
				float: left;
				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
			.title-text {
				float: left;
				margin-left: 16rpx;
				font-size: $font-size-28;
				color: $text-color;
				text-align: left;
				line-height: 48rpx;
				font-weight: bold;
			}
		}
		.goods-item {
			width: 100%;
			height: auto;
		}
		.goods-pros-t {
			display: flex;
			align-items: center;
			width: 100%;
			height: 217rpx;
			padding: 12rpx 0;
			.pros-img {
				width: 210rpx;
				height: 100%;
				border-radius: 10rpx;
				margin: 0 26rpx 0 0;
				border: 1px solid #f3f3f3;
				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
		}
		.pros-product {
			width: 468rpx;
			height: 100%;
			line-height: 36rpx;
			font-size: $font-size-26;
			position: relative;
			.producttitle {
				width: 100%;
				display: inline-block;
				height: auto;
				text-overflow: ellipsis;
				display: -webkit-box;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin-bottom: 58rpx;
			}
			.productspec {
				height: 36rpx;
				color: $text-color;
				line-height: 36rpx;
				font-size: $font-size-26;
			}
		}
	}
}

.logistics-template {
	width: 702rpx;
	height: 100%;
	background: #ffffff;
	float: left;
	padding: 24rpx 24rpx 12rpx 24rpx;
	.logistics-content {
		width: 100%;
		padding: 20rpx 0;
		height: auto;
		.arrow-showMore {
			position: absolute;
			right: 24rpx;
			z-index: 99;
		}
		.logistics-top {
			width: 100%;
			height: 40rpx;
			line-height: 40rpx;
			font-size: $font-size-28;
			color: $text-color;
			text-align: left;
			padding-bottom: 24rpx;
			border-bottom: 1px solid #f8f8f8;
			.name {
				float: left;
				font-weight: bold;
			}
			.icon-web_xiangxiazhankai {
				transform: rotate(0deg);
				transform-origin: center center;
				float: right;
				font-size: $font-size-32;
				color: #000000;
				/* transition: transform 0.3s ease;*/
				transition-property: transform;
				transition-duration: 0.3s;
				transition-timing-function: ease;
			}
			.icon-web_xiangxiazhankai-active {
				transform: rotate(180deg);
			}
		}
		.logistics-warp {
			width: 100%;
			overflow: hidden;
			.table {
				height: 76rpx;
				line-height: 76rpx;
				font-size: $font-size-26;
				color: $text-color;
				text-align: left;
			}
			.expressNumber {
				width: 250rpx;
				display: inline-block;
			}
		}
		.logistics-main-top {
			width: 100%;
			height: auto;
			float: left;
			padding-top: 24rpx;
			.main-top,
			.main-bot {
				font-size: $font-size-28;
				color: $text-color;
				line-height: 40rpx;
				margin: 4rpx 0;
			}
		}
		.logistics-main-bot {
			width: 100%;
			height: auto;
			font-size: $font-size-24;
			color: $text-color;
			line-height: 56rpx;
			text-align: justify;
		}
		.logistics-animation {
			/* transition: transform 0.3s ease;*/
			transition-property: transform;
			transition-duration: 0.3s;
			transition-timing-function: ease;
		}
		.logistics-warp__wrapper {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
		}
		.logistics-warp--hide {
			// padding: 0 0;
			// height: 0px;
			// line-height: 0px;
			display: none;
		}
		.clipboard {
			width: 84rpx;
			height: 36rpx;
			background: linear-gradient(34deg, rgba(255, 41, 41, 1) 0%, rgba(255, 109, 27, 1) 100%);
			text-align: center;
			font-size: $font-size-24;
			color: #ffffff;
			border-radius: 6rpx;
			line-height: 36rpx;
			display: inline-block;
			margin-left: 24rpx;
			position: relative;
			z-index: 99;
		}
	}
}
</style>