guanmao-wxapp/components/logistics/common-logistics.vue

<template>
	<view class="bg-white">
		<view class="common-logistics">
			<view class="logistic-item" v-for="(item,index) in logisticsData" :key="index">
				<view class="total-wrap" :style="{marginTop: item.isFirstNode ? '22rpx' : '6rpx'}">
					<view class="item-container">
						<view class="item-container-left flex flex-direction align-center"
							:class="[index == 0 ? 'text-1A1A1A' : 'text-808080']">
							<text class="text-df">{{item.time | dateTommdd}}</text>
							<text class="text-sm">{{item.time | dateToHHmmss}}</text>
						</view>
						<view class="item-container-center">
							<view class="tag-container">
								<image v-if="item.isFirstNode && String(item.state) != 'null'" :src="nodeIconUrl(item.state, index)" mode="scaleToFill"></image>
								<view v-else class="item-tag-container">
									<image class="item-tag" :src="[index == 0 ? '/static/mine/logistics/active-line-state.png' : '/static/mine/logistics/line-state.png']" mode="scaleToFill"></image>
								</view>
							</view>
							<view class="line-container"
								:style="{height: item.isFirstNode ? '145rpx' : '88rpx' , paddingTop: item.isFirstNode ? '22rpx': '8rpx'}">
								<view v-if="index !== logisticsData.length - 1" class="line" :style="{height: item.isFirstNode ? '120rpx':'80rpx'}"></view>
							</view>
						</view>
						<view class="item-container-right" :style="{paddingTop: item.isFirstNode?'0':'8rpx'}">
							<view v-if="item.isFirstNode" class="item-title text-dm text-bold" :class="[index == 0 ? 'text-1A1A1A' : 'text-808080']">{{item.state | stateFilter}}</view>
							<view class="item-desc text-dm" :class="[index == 0 ? 'text-1A1A1A' : 'text-999999']" :style="{marginTop: item.isFirstNode ? '10rpx' : '0'}">{{item.context}}</view>
							<!-- <view class="item-time">{{item.createTime}}</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			logisticsData: {
				type: [Object, Array]
			}
		},
		filters: {
			stateFilter(val) {
				const stateMap = {
					0: '在途',
					1: '揽收',
					2: '疑难',
					3: '签收',
					4: '退签',
					5: '派件',
					6: '退回',
				}
				return stateMap[val]
			},
		},
		computed: {
			nodeIconUrl() {
				return function(data, isFirstIndex) {
					// 物流状：0在途，1揽收，2疑难，3签收，4退签，5派件，6退回
					if (data == 0) {
						return isFirstIndex === 0 ? '/static/icon/select_1.png' : '/static/icon/select_1.png'
					} else if (data == 1) {
						return isFirstIndex === 0 ? '/static/icon/select_1.png' : '/static/icon/select_1.png'
					} else if (data == 2) {
						return isFirstIndex === 0 ? '/static/icon/select_1.png' : '/static/icon/select_1.png'
					} else if (data == 3) {
						return isFirstIndex === 0 ? '/static/icon/select_1.png' : '/static/icon/select_1.png'
					} else if (data == 4) {
						return isFirstIndex === 0 ? '/static/icon/select_1.png' : '/static/icon/select_1.png'
					} else if (data == 5) {
						return isFirstIndex === 0 ? '/static/icon/select_1.png' : '/static/icon/select_1.png'
					} else if (data == 6) {
						return isFirstIndex === 0 ? '/static/icon/select_1.png' : '/static/icon/select_1.png'
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/components/logistics/main.css");
	
	.common-logistics {
		height: auto;
		box-sizing: border-box;
		background: #FFFFFF;
	}

	.item-container {
		width: 100%;
		height: auto;
		display: flex;

		.item-container-left {
			width: 120rpx;
			max-width: 120rpx;
		}

		.item-container-center {
			width: 44rpx;
			height: auto;

			.tag-container {
				width: 44rpx;
				height: 44rpx;

				image {
					width: 44rpx;
					height: 44rpx;
					border-radius: 50%;
				}

				.item-tag-container {
					width: 44rpx;
					height: 44rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.item-tag {
						width: 14rpx;
						height: 14rpx;
						border-radius: 50%;
					}
				}
			}

			.line-container {
				box-sizing: border-box;
				width: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.line {
					width: 2rpx;
					background-color: #dcdcdc;
				}
			}
		}

		.item-container-right {
			width: 510rpx;
			max-width: 510rpx;
			box-sizing: border-box;
			padding: 0 10rpx 0 24rpx;

			.item-title {
				width: 100%;
				height: 40rpx;
				line-height: 44rpx;
				color: #222;
				font-size: 28rpx;
			}

			.item-desc {
				margin-top: 16rpx;
				width: 100%;
				min-height: 30rpx;
				line-height: 30rpx;
				word-wrap: break-word;
				word-break: normal;
			}

			.item-time {
				margin-top: 12rpx;
				width: 100%;
				height: 34rpx;
				line-height: 34rpx;
				font-size: 24rpx;
			}
		}
	}

	.line-state {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
	}

	.take-space {
		width: 100%;
		height: 80rpx;
	}

	.text-1A1A1A {
		color: #1A1A1A;
	}

	.text-999999 {
		color: #999999;
	}

	.text-808080 {
		color: #808080;
	}
</style>