baozhida-deliver-medicine-app/pages/order/logisticsDetails.vue

<template>
	<!-- 物流详情 -->
	<view class="card_logist">
		<u-navbar title="物流详情" autoBack placeholder></u-navbar>
		<map style="width: 100%;height: 500rpx;z-index: 2" id="container" :latitude="latitude" :longitude="longitude"
			:scale="scale" :polyline="polylineList" :markers="markersList">
		</map>
		<view class="card_logistics">
			<!-- <view class="center_in img_head" @click="clickImg">
				<u-image :class="logisticsFlag ? '' : 'overturn'" src="../../static/unfold.png" width="80rpx"
					height="50rpx"></u-image>
			</view> -->
			<view v-if="logisticsFlag">
				<view class="title_logistics">物流详情</view>
				<view class="card_steps" :key="Math.random()" v-if="activitiesList.length > 0">
					<x-steps :infoList="activitiesList"></x-steps>
				</view>
				<view v-else style="padding-bottom: 20rpx;">
					<u-empty mode="data" text="暂无物流信息"></u-empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: {},
				trackList: [],
				map: null,
				longitude: 106.6282014,
				latitude: 26.64669,
				scale: 14,
				activitiesList: [],
				active: 0,
				statusList: [{
					id: 3,
					title: '待配送',
				}, {
					id: 4,
					title: '配送中',
				}, {
					id: 5,
					title: '已送达',
				}, {
					id: 6,
					title: '已拒收',
				}, {
					id: 6,
					title: '已拒收',
				}],
				polylineList: [],
				markersList: [],
				logisticsFlag: true,
			}
		},
		mounted() {
			var orderList = this.$cache.getCache('orderDetails')
			this.orderList = orderList
			this.$nextTick(() => {
				setTimeout(() => {
					this.getList()
				})
			})
		},
		methods: {
			getList() {
				this.$api.get('/api/waybill-logistics', {
					waybillNo: this.orderList.waybillNo,
				}).then(res => {
					if (res.code == 200) {
						var arrList = res.data.list
						arrList.forEach(async (item) => {
							item.backgroundColor = '#ffffff'
							item.text = ''
							let arr = ''
							this.statusList.forEach((item1) => {
								if (item.status == item1.id) {
									arr = item1.title
								}
							});
							let yonTitle = ''
							if (item.coolerBox.id) {
								yonTitle = item.coolerBox.name
							}
							item.text = item.address + '【' + yonTitle + '】' + '  ' + '您的货物' + arr
						})
						arrList[0].backgroundColor = '#2979ff'
						this.activitiesList = arrList.reverse()
						this.getTrack()
					}
				})
			},
			// 获取轨迹
			getTrack() {
				this.$api.get('/api/waybill-task/locus', {
					waybillNo: this.orderList.waybillNo,
				}).then(res => {
					if (res.code == 200) {
						let arr = res.data
						let arrList = []
						if (arr.length > 0) {
							arr.forEach(item => {
								if (item.T_site != '0,0' && item.T_site) {
									const arr1 = item.T_site.split(',')
									const list = {
										latitude: arr1[1],
										longitude: arr1[0],
									}
									arrList.push(list)
								}
							})

							let polyline = [{
								width: 30,
								points: arrList,
								color: '#3591FC',
								arrowLine: true,
								arrowIconPath: '/static/task/arrows.png',
							}]
							this.polylineList = polyline
							const markers0 = {
								latitude: arrList[0].latitude,
								longitude: arrList[0].longitude,
								id: 0,
								iconPath: '/static/task/startpoint.png',
								width: 20,
								height: 23
							}
							const markers1 = {
								latitude: arrList[arrList.length - 1].latitude,
								longitude: arrList[arrList.length - 1].longitude,
								id: 1,
								iconPath: '/static/task/endpoint.png',
								width: 20,
								height: 23
							}
							this.markersList[0] = markers0
							this.markersList[1] = markers1
							this.latitude = arrList[arrList.length - 1].latitude
							this.longitude = arrList[arrList.length - 1].longitude
							// console.log(this.polylineList, this.markersList, 266)
							this.$forceUpdate()
						}
					}
				})
			},
			clickImg() {
				if (this.logisticsFlag) {
					this.logisticsFlag = false
				} else {
					this.logisticsFlag = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	#map {
		width: 100%;
		height: 500rpx;
	}

	.loading-icon {
		color: #333;
		font-size: 28rpx;
		padding: 10px;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 5px;
		text-align: center;
	}

	.card_logist ::v-deep .u-navbar__content {
		z-index: 2004;
	}

	.card_logistics {
		// width: calc(100% - 40rpx);
		// margin: 20rpx 20rpx 0rpx 20rpx;
		width: 100%;
		height: auto;
		background-color: #fff;
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
	}

	.img_head {
		padding: 10rpx 0rpx;
	}

	.title_logistics {
		font-weight: 600;
		padding: 30rpx 20rpx 0rpx 20rpx;
	}

	.card_steps {
		padding: 20rpx;
	}

	.overturn {
		transform: rotate(180deg);
	}
</style>