<style lang="scss">
	.express_box {
		.express_name {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 2rpx solid #efeff4;
		}
		.express_item {
			padding-bottom: 30rpx;
			position: relative;
		}
		.time {
			width: 240rpx;
			flex-direction: column;
		}
		.dot {
			width: 10rpx;
			height: 10rpx;
			margin-top: 16rpx;
			border-radius: 50%;
			background: #888;
			box-shadow: 0 0 0 4rpx rgba(136, 136, 136, 0.3);
			z-index: 2;
			// margin-left: -2rpx;
			-webkit-transform: translate(2rpx);
			transform: translate(2rpx);
			position: relative;
		}
		.text {
			flex: 1;
			padding: 0 20rpx;
			position: relative;
			font-size: 30rpx;
		}
		.text:before {
			position: absolute;
		  left: -5rpx;
		  top: 12rpx;
		  margin-top: 12rpx;
		  bottom: -50rpx;
		  border-left: 2rpx solid rgba(136,136,136,0.3);
		  content: '';
		}
		.express_info .express_item:first-child {
			color: #ff7f02;
			.dot {
				width: 18rpx;
				height: 18rpx;
				left: -9rpx;
				-webkit-transform: translate(6rpx);
				transform: translate(6rpx);
				background: #ff7f02;
				box-shadow: 0 0 0 4rpx rgba(255, 127, 2, 0.2);
			}
		}
		.express_info .express_item:first-child .text:before {
			left: -12rpx;
		}
		.express_info .express_item:last-child .text:before {
			display: none;
		}
	}
</style>
<template>
	<view class="express_box bg-w">

		<!--页面加载动画-->
		<!-- <rfLoading isFullScreen :active="loading"></rfLoading> -->
		<view class="" v-if="expressList.length">
			<view class="express_name">
				{{ query.name }}: {{query.num}}
			</view>
			<view class="express_info">
				<view class="express_item flex" v-for="(item,index) in expressList" :key="index">
					<view class="time flex flex-align-center">
						{{ item.ftime.split(' ')[0] }}
						<view>
							{{ item.ftime.split(' ')[1] }}
						</view>
					</view>
					<view class="dot"></view>
					<view class="line"></view>
					<view class="text" v-html="item.context"></view>
				</view>
			</view>
		</view>
		<view style="height: 100vh;" v-else class="flex flex-center">
			<u-empty  text="'暂无物流信息'"></u-empty>
		</view>
	</view>
</template>

<script>
	import url from "@/common/http/url.js"
	export default {
		data() {
			return {
				expressList: [],
				query: {}
			};
		},
		onLoad(e) {
			this.query = e;
			this.getExpressInfo(e)
		},
		methods: {
			async getExpressInfo (params) {
				let res = await this.$httpJson("POST", url.order.getExpressInfo, {
					com: params.com,
					num: params.num,
					phone: params.phone
				});
				let { code, data: { data } } = res;
				console.log('res', res)
				if (code == 200) {
					data.forEach((item) => {
						item.context = this.selectPhoneNumber(item.context);
					});
					this.expressList = data;
				}

			},
			selectPhoneNumber(str) {
			  let regx = /(1[2|3|4|5|6|7|8|9][\d]{9}|0[\d]{2,3}-[\d]{7,8}|400[-]?[\d]{3}[-]?[\d]{4})/g;
			  let phoneNums = str.match(regx);
			  if (phoneNums) {
			    for (let i = 0; i < phoneNums.length; i++) {
			      let temp = phoneNums[i]
			      str = str.replace(phoneNums[i], '<a href="tel:' + temp + '"  class="copy phone-num" style=" text-decoration: underline;color: #317ee7;">' + temp + '</a>');
			    }
			  }
			  return str;
			},
		}
	}
</script>

<style lang="scss">

</style>
