<template>
	<view style="padding-top: 80rpx;">
		<TopBar title="物流查询"/>
		<view v-if="data.list.length">
			<view class="logistics_tip" v-if="data.deliverystatus !== '3' && data.deliverystatus !== '4' && data.deliverystatus !== '5' && data.deliverystatus !== '6'">
				<text class="horn_icon"></text>
				<text>您的货品正在向您飞奔而来，请耐心等待！</text>
			</view>
			<view class="logistics_info" v-if="!data.courier">
				<image :src="data.logo" class="logistics_icon"></image>
				<view class="flex logistics_view">
					<text class="logistics_name">{{data.expName}}</text>
					<text class="logistics_no">运单号：{{data.number}}
						<text class="copy_icon" @click="copy(data.number)"></text>
						<text class="vertical_line"></text>
						<text>官方电话</text>
						<text class="phone_icon" @click="phoneCall(data.expPhone)"></text>
					</text>
				</view>
			</view>
			<view class="logistics_info logistics_info2" v-else>
				<view style="display: flex;">
					<image :src="data.logo" class="logistics_icon"></image>
					<view class="flex logistics_view">
						<text class="logistics_name">{{data.courier}}</text>
						<text class="logistics_no">运单号：{{data.number}}
							<text class="copy_icon" @click="copy(data.number)"></text>
						</text>
					</view>
				</view>
				<view class="view2">
					<text class="courierPhone_icon" @click="phoneCall(data.Phone)"></text>
					<text class="courierPhone_title">电话</text>
				</view>
			</view>
			<view class="color_bar"></view>
			<view class="logistics_list_box">
				<view class="vertical_line2"></view>
				<view class="logistics_address">
					<text class="get" :class="{'get_icon': data.deliverystatus !== '3', 'get_icon_act': data.deliverystatus === '3'}">收</text>
					【收货地址】{{region_name + ' ' + address}}
				</view>
				<view class="logistics_list_item" v-for="(item, index) in data.list" :key="index" :class="{
					'important': index !== 0
				}">
					<view class="flex item_left_view">
						<text class="item_time1">{{item.time.substr(5,5)}}</text>
						<text class="item_time2">{{item.time.substr(11,5)}}</text>
					</view>
					<view class="flex item_left_right" :class="{'no_point': index===0}">
						<text v-if="index === 0" class="list_icon" :class="{
							'porting_icon_act': data.deliverystatus === '1',
							'transport_icon_act': data.deliverystatus === '0',
							'distribution_icon_act': data.deliverystatus === '2',
							'distribution_get_act': data.deliverystatus === '3'
						}"></text>
						<text v-if="index === 0">
							<text v-if="data.deliverystatus === '0'" class="item_status">已揽件</text>
							<text v-if="data.deliverystatus === '1'" class="item_status">运输中</text>
							<text v-if="data.deliverystatus === '2'" class="item_status">派件中</text>
							<text v-if="data.deliverystatus === '3'" class="item_status">已签收</text>
							<text v-if="data.deliverystatus === '4'" class="item_status">派送失败</text>
							<text v-if="data.deliverystatus === '5'" class="item_status">疑难件</text>
							<text v-if="data.deliverystatus === '6'" class="item_status">退件签收</text>
						</text>
						<text class="item_detail" v-html="item.status"></text>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="no_logistics">
			暂无物流信息
		</view>
		<view class="recommend_box">
			<view class="flex_title">
				<text class="t_point1"></text>
				<view>
					<view class="title1">更多推荐</view>
					<view class="title2">猜你喜欢 商品推荐</view>
				</view>
				<text class="t_point2"></text>
			</view>
			<view class="recommend_list">
				<view v-for="(item, index) in recommend_goods" :key="index" class="recomment_item">
					<image :src="item.default_image || $noGoodsImg" @click="$jumpGoodDetail(item.goods_id)"></image>
					<view class="recomment_goods_name">{{item.goods_name}}</view>
					<view class="recommend_flex">
						<text class="symbol">￥<text class="price">{{item.price}}</text></text>
						<text class="shopcart_icon" @click="$addCart(item.spec_id, 1,isLogin)"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		handleClipboard
	} from '../../common/util.js';
	import TopBar from '@/components/TopBar/TopBar.vue';
	export default {
		data() {
			return {
				data: {
					expName: '',
					number: '',
					logo: '',
					deliverystatus: '',
					list: [],
					courier: '',
					courierPhone: '',
				},
				address: '',
				region_name: '',
				recommend_goods: [],
				isLogin: ''
			}
		},
		onLoad(options) {
			let num = options.invoice_no,
				order_id = options.order_id;
			uni.request({
				url: '/uni/api/alibaba/get_express_info',
				method: 'POST',
				data: {
					no: num,
					order_id: order_id
				},
				dataType: 'json',
				success: (res) => {
					if(res.data.data.result) {
						// #ifdef H5
						if(res.data.data.result.deliverystatus === '2' || res.data.data.result.deliverystatus === '3' || res.data.data.result.deliverystatus === '4') {
							let reg = /(\d{11})/g,
								str = res.data.data.result.list[0]['status'];
							res.data.data.result.list[0]['status'] = str.replace(reg,`<a style="color:red;" href="tel:${"$1"}">${"$1"}</a>`);
						}
						// #endif
						this.data = res.data.data.result;
						this.address = res.data.data.address;
						this.region_name = res.data.data.region_name;
					}
					this.recommend_goods = res.data.data.recommend_goods;
					this.isLogin = res.data.data.login_flg;
				}
			});
		},
		methods: {
			phoneCall(num) {
				uni.makePhoneCall({
					phoneNumber: num
				});
			},
			copy(data) {
				// #ifdef H5
				handleClipboard(data, event, () => {
					uni.showToast({
						icon: 'none',
						title: '单号已复制'
					})
				}, () => {
					uni.showToast({
						icon: 'none',
						title: '复制失败'
					})
				})
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: data,
					success: function() {
						uni.showToast({
							title: '单号已复制',
							icon: 'none',
						})
					}
				});
				// #endif
			}
		},
		components: {
			TopBar
		}
	}
</script>

<style lang="less" scoped>
	.flex {
		display: flex;
	}

	.logistics_tip {
		width: 686rpx;
		height: 64rpx;
		border-radius: 32rpx;
		background-color: #FFF8DD;
		margin: 8rpx auto;
		font-size: 28rpx;
		color: #F0AB00;
		display: flex;
		align-items: center;

		.horn_icon {
			width: 40rpx;
			height: 40rpx;
			margin: 0 12rpx 0 24rpx;
			background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAAH7+Yj7AAAAAXNSR0IArs4c6QAABQ9JREFUWAntWF1oXEUU/u7+tGnS7BYrRYkItsEqLaXWHxBRMAqiJaQmGysiYvsiFoUiFh/0QQVBpX3wQUXBB32pNn/GoAQKFsFfkKIV0Vq0VKFoaWV/0tDGvXv9zmTP7Oy9u9nNdgkKubB7zpzzzZkzZ+acO3OBhZ4gQFz1CWGyIwhyo0bk5SbRG1OtpT56Ld88I3YVHZOGCrKjeFwUMc9DURHxAD8pb6iiq4SNGp4Cwr3XDMPoRC68mWQY5HbWDgYoDTp7gib+VJBQkdcz4uKWmqdPs+oXl/ZhHd+EIDeCn7kwG1UoNH05VpEkvDsxI20z6zBIFPlzOCYgWi1ZoDDhJ+mhT2TcbmZUYzEMkvZcCb+U5ZWh2WcPA/6r24HB7syP41bSblduefr0vs7a3eUW8N9l8qPYzXX5sZGHJmHrgbJjeJmr8ozoSzb1KuhybB5gAEdUatZGGkzKMebroCrq0XQXOnLncUG2vmDo9Rlm0/7UEF6VdmWdmzAmHbz7cJHkHjpwUtrpYawrlfCK8PJUDM63m/r34riMsynUArsGn60FCMtmp9AT+DjIKW8RHafsx2IYUJyNoQpcykVZz0UJ72TbRxYluQI9XQM47fZrig8m0c0BHmsKvAxamghwRU/lprn/GjzuPqwJZVHYV87Zq70CbldQbgK3KO/SusUhOIIOFu4Ci0JNTFDCDRzoG81pNWo3qZTdko8vVVGLcjo7Yivw9eoB/CV6ZskJlojpdAZPKt5OuZEx7eDP4SgNvS7tVBc2s6w/oTqh1qArXIhndelhadwjmHLlQXAYae2zaIPaUSlj9nkhj4y2WzYYTKHTGPFwmh5feckGvX7MihEau45/tiIt2sPI5g6wheX/g9Y9nMFZnkmHxEB2AhuE8u1vDhjC203LvRTPj2GSsutFwe1gwMK7D3F2Vl4Rx7kPH3L11mB5lH5XyRfRYcbnblemPI8YU9T9zQEOqkyozRRX6PKFcazz/fnMoGs7UsNmFi6kNT43hr2t9VzutRyBJY5AwzRp1h9TJYp4m/g+7cNc3s68/ETbrVBbGFrpPDOBrUUf77BAbKtcbCuWvADJSqvCseD8wD6bWUX2r8lgX0UT5epGUO5Z+Y9YDovYyIFs+QtiSMHH86z6vVFz1ZKFChOdlIntZpTPxZPYpK/5ags1KiHPDtfydf8dgavC4MW2xUEe7b/i/eB3OvNHKoGbvfuRVTu5cTzCk/q7dPJiIon1tQ7VNjLaiR0+I3/Jzqm97kHeiIAHJeL5Is4wAGtVlx7Ee3TuJa7Wyn/m8LHKXRp1ELjCBbSDT2XwIZ18gU4mGU377hbbTKLnZJnJbuV7qy88XsTBMKBd7VgSh8QW9/MdjFj1uAG+EB1Xb5tQ96kGupo28zxQrxaTgYfzjJg9sJhhPKws6y6YtvO3ZA4y858y4waY/8JXdkJuBGTvkiadOVIWWxJ10MP3VtsmhoepN7msO1n3fuOeq7rF5s9ilLoEo3qoOxP9MBJxML0WN9GvT9vkmxwteSRFBy/6T7Mob3CXl46/xsTZzgQ6zoNv1dFSx4+8SfjVTD52mpAryKUyILNtL/fUi6xt82d/FxDi6ZBP0S5XLCfzoIBvaesaOjfN2869rt7lIw66ylp8ecAD1MkPPIg/ypvjAUai4V1X7dG5t+hYZyKGG7uGcFTltShx7Xt4l+5ner7ByF4lVrl/buMZfMEbbftGX7b0P43Av4N9hjRSE72fAAAAAElFTkSuQmCC') no-repeat;
			background-size: 100% 100%;
		}
	}

	.logistics_info {
		padding: 24rpx 32rpx;
		height: 140rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-start;

		.view2 {
			display: flex;
			flex-direction: column;
		}

		.courierPhone_icon {
			width: 48rpx;
			height: 48rpx;
			background: url(../../static/logistics/icon_dianhua_big.png) no-repeat;
			background-size: 100% 100%;
		}

		.courierPhone_title {
			font-size: 24rpx;
			color: #979797;
		}

		.logistics_icon {
			width: 84rpx;
			height: 84rpx;
			margin-right: 24rpx;
		}

		.logistics_view {
			flex-direction: column;
			justify-content: center;
		}

		.logistics_name {
			font-size: 30rpx;
			color: #212121;
			font-family: PingFangSC-Medium;
			margin-bottom: 8rpx;
			line-height: 42rpx;
		}

		.logistics_no {
			font-size: 24rpx;
			color: #979797;
			line-height: 34rpx;
		}

		.copy_icon,
		.phone_icon {
			display: inline-block;
			width: 28rpx;
			height: 28rpx;
			background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAEFCu8CAAAAAXNSR0IArs4c6QAABBNJREFUSA3FVktIm0EQ3sRojE8UX2BpvRR7aKWiuXirvaSgQkWQgogeWntoULC0UOhFFFEvxhe0BUGFth7Eogcf0IroKX1cUqF4k4qIetDEGB8xf7/Z5N/s/+dvCVbahfw7O++ZzMwuY7plonNvb69Ce3t7+2OOoIPf73+RnJy8RzAbGBhQ+vv7ORdHiM/Z2ZnS3d0dpkxPT3Ngb29v3VJYWOgjuZycHJPQSnKHh4fe4+PjDYKzsrIGaWeqKMFkmvbz8/MWMwFGKyEh4ZURPhY3Pj6uwCMP/To7O7mHXC3Fvb6+zkZHR28mJibesFqtXNpC36ampi95eXl2gkEQoXMiIdV1dHREnvJjDDElJYW1trby+Pmnp6dHsdlsnDs7O5s1NDREiapKdafkzs7Oqkex5+fnByoqKnJNJpNfIGVgYmJC2d3dnZZxBPf19SmUVYJFZin1JycnvtPT0yf19fXOzMzMjwQDt+ZyuUTkJERLE+TBwcEPpGkoTAp/8f9lAOqScQRrBPVE9UzpnJ+fD6Smpu6bzeY3cQtSqh0ORzi1EW08tQQrimJD4A0RvGZDJX1DJr9qkBc9CIuqAljOmJub20HFh6tLJWCvrq4OovASCRWTHGT25dramrW5ufm7JMPAf3VmZoYyzJcQhCUz4ggRNi0tjaHxboVZwt+dnR036LyiCcNdhdCVoaGhn4FAgIVCIWpOlpEhlDOn0/nI5/M9XF1dtdfW1nIZbhHZvEdCbW1tTtkKwVNTU4MQeqDHC1eJkJSUpKkawk1OTobHAR2kJWpVwsUFaiz+TgLtbUfsSEW01uMS3NjYSN7a2gpWVVXtq8rjEiwoKFgpKSmpVIVo/+sYfV6vl09qWSvBHo+HwcU0PV7UajAYbAbR0HWLxcJ7UBYWgjLSCEZGr6FQ7qLseJEb8cg48J+iHd+DPyDjDT2TGQhGNXatrKw8W1xctNAohyI9i+aMqBnmHKupqXEBbkGk71SGuAxiQCahBOimY3V1dR9yc3PvqwqMdmrAsbEx++bmZnpZWVm0ycAcYxDzwoFmfI7CFH8c7uNi+pNBY7hEKqHws2wIEVjQVp8wO58ihdFqlpkisMYgwm9cWlp6vby8bC0qKqJrWYigVjm8sLBAHperBEofVRbot3FtXAe+RqUZ7RqDYLAiOiuNGuRf3LRGgiou8izo2t7epnkusqLS9fuFG0qvKN7zPzeoT2m8jsbw4a3ARkZG7nR0dCjDw8P8PVNaWhpAmsVgI6FLM4hWYY2Nje709HRXxJsg+nUeVeuVvbs0g6QUzyk/OuStbEAPxxikS5FKHf1WjH5b1Avoz4iiHHcfv0yRvj/2IMlqZin4U2Fs3+12n8GY5i2jNySfkbYg3j4hjL1ywB6Z9t/hX+Hlp7dLP0PDAAAAAElFTkSuQmCC') no-repeat;
			background-size: 100% 100%;
			position: relative;
			top: 4rpx;
			margin-left: 8rpx;
		}

		.phone_icon {
			background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAEFCu8CAAAAAXNSR0IArs4c6QAAA0ZJREFUSA3Nlk1IVFEUx33z6WimtZBahLtIW1hIucldZbQIol1UIGrRByWRGDkOgyNMJjkRYUgWtAjBCCIKgtr1AdEXLYtIbBZjNFFQDqPMR78zeh9v3sx7fhF24XnPved/zv+cc8+9Y0mJ1fD7/UOicyiApmlpJZf09PSM64v5hWAwWJpDYfejKBzEapR+UeqUCunxeLzI62WtqU0s9qTT6SbWp0OhUIXaX/hMitmiaFyXicISgOKayikv2kAg0ILhZpRJ3TV53ZQFm3lgtZjA3RmUGd3inwqEMzUXzg7kl4pMhaPWBXM2my3r6+urIdTnKKMFAKsNWHKnTp6/jBj9LNUmgLfI9fRaE2z3XC7X3lQqdQLWowpTMONdD2VsbMyJk8VVcnBw0FfgdcU3Copjjog8P7BXS5HKOJKU0tueI8B1VPcNFfVQ2U/KSGZbQ8BfuGatcwanBgYGypWxraHD4bhEqM8EDPP5zs7OXPvJ2tawt7c3CGabABm1s9PsX1tDclwL7AWNEfH5fJuMhrYyYeYeBObPZmDeccBQRUF+kttl+vSY1+utSyaTH6lq7uEwGueFilEckMaLFhGj6enpIc5vu9GgQCaPu8ZNwhvhoWk37hllPVRC0wDOoDyMfIVwW6nqIyPYVibUDbaAlVLqKS4ngOHhYXcsFmtwu93j3d3d3+x8LZuQc7iYyWTOcQUOQtTI18GZvOP0D9BOX83kyyKkQ65CJH25EXlCOUfeh3y/srKywngPRZ/Xp8pgIXN/f38FZMfJZpT+1t9isWW/ji9mJhPdkgm7urp+8xS5aecn/AcwRVavxSFlrCOIMIQdsjaPJRMqRziv4SuFoE2eAMhfEUSIO5V3QRXepYSlzNz665C10yD12Gcg+846QOZhK3/zEs61fCNOo6ox6MxmHD/E6fvq6uryeDx+iE4dAbOLLJ9akcm+ZZcKUTQafQymgXI1M8sDHoGoinkC5zuZ42Qlv/gzTqezAbIEsu0oSkipjuD4NpZnebIiZg/oNDA3CKQFeT+YB2aM1dqqpPILI6OWqFfx/ZFFOBxek0gk7kC2m8Y4SWO0yf5iRtEMlQMcbyWDW6y3kE0SeZRSXiCASYX57+e/z3lZSO3+ki0AAAAASUVORK5CYII=') no-repeat;
			background-size: 100% 100%;
		}

		.vertical_line {
			display: inline-block;
			width: 1Px;
			height: 24rpx;
			background-color: #d8d8d8;
			margin: 0 24rpx;
			vertical-align: middle;
		}
	}

	.logistics_info2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.color_bar {
		height: 20rpx;
		background-color: #f5f5f5;
	}

	.recommend_box {
		background-color: #f5f5f5;

		.flex_title {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 60rpx 0 20rpx;
		}

		.title1 {
			font-size: 32rpx;
			color: #3C3F49;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			line-height: 44rpx;
			margin-bottom: 4rpx;
			text-align: center;
		}

		.title2 {
			text-align: center;
			font-size: 20rpx;
			color: #AEAEAE;
			line-height: 28rpx;
		}

		.t_point1 {
			width: 48rpx;
			height: 12rpx;
			background: url(../../static/logistics/Group14@2x.png) no-repeat;
			background-size: 100% 100%;
			margin-right: 4rpx;
		}

		.t_point2 {
			width: 48rpx;
			height: 12rpx;
			background: url(../../static/logistics/Group2@2x.png) no-repeat;
			background-size: 100% 100%;
			margin-left: 4rpx;
		}

		.recommend_list {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			width: 702rpx;
			margin: 0 auto;
		}

		.recomment_item {
			width: 346rpx;
			height: 514rpx;
			background: #fff;
			border-radius: 16rpx;
			text-align: center;
			overflow: hidden;
			margin-bottom: 20rpx;

			image {
				margin: 24rpx 0 20rpx;
				width: 300rpx;
				height: 300rpx;
			}

			.recomment_goods_name {
				font-size: 26rpx;
				color: #212121;
				line-height: 28rpx;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 300rpx;
				margin: 0 auto 14rpx;
				text-align: left;
			}

			.recommend_flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 300rpx;
				margin: 0 auto;
			}

			.symbol {
				font-size: 26rpx;
				font-family: PingFangSC-Semibold;
				color: #F46B33;
			}

			.price {
				font-size: 36rpx;
			}

			.shopcart_icon {
				width: 56rpx;
				height: 56rpx;
				background: url(../../static/common/icon_gouwuche@2x2.png) no-repeat;
				background-size: 100% 100%;
			}
		}
	}

	.logistics_list_box {
		padding: 44rpx 0 0 32rpx;
		position: relative;

		.logistics_address {
			font-size: 26rpx;
			color: #aeaeae;
			line-height: 34rpx;
			padding-left: 30rpx;
			padding-right: 32rpx;
			margin-left: 116rpx;
			position: relative;

			.get {
				width: 36rpx;
				height: 36rpx;
				text-align: center;
				line-height: 36rpx;
				border-radius: 50%;
				font-size: 20rpx;
				font-family: PingFangSC-Medium;
				position: absolute;
				left: -18rpx;
				z-index: 10;
			}

			.get_icon {
				background-color: #d2d2d2;
				color: #fff;
			}

			.get_icon_act {
				background-color: #FFCD00;
				color: #000;
			}
		}

		.logistics_list_item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin: 40rpx 0;

			.item_left_view {
				flex-direction: column;
				justify-content: center;
			}

			.item_time1 {
				font-size: 28rpx;
				color: #212121;
				font-family: PingFangSC-Medium;
				line-height: 40rpx;
				width: 86rpx;
				text-align: right;
			}

			.item_time2 {
				font-size: 24rpx;
				color: #464646;
				line-height: 24rpx;
				text-align: right;
			}

			.item_left_right {
				flex-direction: column;
				justify-content: center;
				margin-left: 30rpx;
				padding-left: 30rpx;
				padding-right: 32rpx;
				position: relative;
			}

			.item_left_right::after {
				width: 12rpx;
				height: 12rpx;
				background: #d2d2d2;
				border-radius: 50%;
				z-index: 10;
				content: '';
				position: absolute;
				left: -6rpx;
				top: 14rpx;
			}

			.no_point::after {
				display: none;
			}

			.item_status {
				font-family: PingFangSC-Medium;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #212121;
			}

			.item_detail {
				font-size: 26rpx;
				color: #464646;
				line-height: 36rpx;
			}
		}

		.important {

			view,
			text {
				color: #aeaeae !important;
			}
		}
	}

	.vertical_line2 {
		width: 1px;
		height: 100%;
		background-color: red;
		position: absolute;
		left: 146rpx;
		z-index: 5;
		background-color: #ececec;
	}

	.list_icon {
		position: absolute;
		left: -20rpx;
		top: 10rpx;
		width: 40rpx;
		height: 40rpx;
		z-index: 10;
	}

	.porting_icon_act {
		background: url(../../static/logistics/icon_yunshuzhong_xuanzhong.png);
		background-size: 100%;
	}

	.transport_icon_act {
		background: url(../../static/logistics/icon_yilaanjian_xuanzhong.png);
		background-size: 100%;
	}

	.distribution_icon_act {
		background: url(../../static/logistics/icon_paisong_xuanzhong.png);
		background-size: 100%;
	}

	.distribution_get_act {
		background: url(../../static/logistics/icon_qianshou.png);
		background-size: 100%;
	}
	.no_logistics {
		font-size: 40rpx;
		text-align: center;
		padding: 40rpx 0;
	}
</style>