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">
			</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: 11,
				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: '已签收',
				}],
			}
		},
		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.text = ''
							let arr = this.statusList.filter((i) => {
								return item.status == i.id;
							});
							let yonTitle = ''
							if (item.car.id) {
								yonTitle = item.car.carNo
							} else if (item.warehouse.id) {
								yonTitle = item.warehouse.name
							}
							// const trapeze = await this.reverseGeocode(item.lng, item.lat)
							item.text = '【' + yonTitle + '】' + '您的货物' + arr[0].title
						})
						this.activitiesList = arrList
					}
				})
			},
			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>
	::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>