baozhida-logistics-app/pages/order/logisticsDetails.vue

<template>
	<!-- 物流详情 -->
	<view>
		<u-navbar title="物流详情" autoBack placeholder></u-navbar>
		<view style="width: 100%;">
			<map style="width: 100%;height: 500rpx;" id="container" :latitude="latitude" :longitude="longitude"
				:scale="scale" :polyline="polylineList" :markers="markersList">
				<view slot="loading">
					<view class="loading-icon">加载中...</view>
				</view>
			</map>
		</view>
		<view class="card_logistics">
			<view class="title_logistics">物流详情</view>
			<view class="card_steps" :key="Math.random()" v-if="activitiesList.length > 0">
				<!-- <uni-steps direction="column" :options="activitiesList" :active="active"></uni-steps> -->
				<x-steps :infoList="activitiesList"></x-steps>
			</view>
			<view v-else style="padding-bottom: 20rpx;">
				<u-empty mode="data" text="暂无物流信息"></u-empty>
			</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: 1,
					title: '待派单',
				}, {
					id: 2,
					title: '待装车',
				}, {
					id: 3,
					title: '待入库',
				}, {
					id: 4,
					title: '已装车',
				}, {
					id: 5,
					title: '已入库',
				}, {
					id: 6,
					title: '已下车',
				}, {
					id: 7,
					title: '已出库',
				}, {
					id: 8,
					title: '已签收',
				}],
				polylineList: [],
				markersList: [],
			}
		},
		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.filter((i) => {
								return item.status == i.id;
							});
							let yonTitle = ''
							let phone = ''
							if (item.car.id) {
								yonTitle = item.car.carNo
								phone = item.car.user.phone
							} else if (item.warehouse.id) {
								yonTitle = item.warehouse.name
								phone = item.warehouse.user.phone
							}
							// const trapeze = await this.reverseGeocode(item.lng, item.lat)
							item.phone = phone
							item.text = item.address + '【' + yonTitle + '】'
							item.text1 = '您的货物' + arr[0].title
						})
						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 = []
						arr.forEach(item => {
							const arr1 = item.T_site.split(',')
							const list = {
								latitude: arr1[1],
								longitude: arr1[0],
							}
							arrList.push(list)
						})

						let polyline = [{
							width: 10,
							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: 40,
							height: 43
						}
						const markers1 = {
							latitude: arrList[length].latitude,
							longitude: arrList[length].longitude,
							id: 1,
							iconPath: '/static/task/endpoint.png',
							width: 40,
							height: 43
						}
						this.markersList[0] = markers0
						this.markersList[1] = markers1
						this.latitude = arrList[length].latitude
						this.longitude = arrList[length].longitude
						// console.log(this.polylineList, this.markersList, 266)
						this.$forceUpdate()
					}
				})
			},
			reverseGeocode(longitude, latitude) {
				return new Promise((resolve, reject) => {
					new AMap.plugin("AMap.Geocoder", () => {
						let position = [longitude, latitude] //位置的经纬度 
						const geocoder = new AMap.Geocoder({
							// city: "0851" ,
							cityCode: '0851',
						});
						geocoder.getAddress(position, (status, result) => {
							if (status === "complete" && result.info === "OK") {
								const title = result.regeocode.addressComponent.city
								resolve(title)
							}
						});
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.loading-icon {
		color: #333;
		font-size: 28rpx;
		padding: 10px;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 5px;
		text-align: center;
	}

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

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

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

	.card_steps {
		padding: 20rpx;
	}
</style>