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

<template>
	<!-- 物流详情 -->
	<view class="card_logist">
		<view class="map_card">
			<map style="width: 100%;" :style="{height:windowHeight * 2 + 'rpx'}" :latitude="latitude"
				:longitude="longitude" :enable-3D="true" :scale="scale" :polyline="polylineList" :markers="markers"
				:v-if="showmap">
			</map>
		</view>
		<view class="card_logistics">
			<view class="img_head" @click="clickImg">
				<image style="width: 80rpx;height: 40rpx;transform: rotate(0deg);" v-if="logisticsFlag"
					src="../../static/unfold.png"></image>
				<image style="width: 80rpx;height: 40rpx;transform: rotate(180deg);" v-else
					src="../../static/unfold.png"></image>
			</view>
			<view class="card_wlxq" v-if="logisticsFlag">
				<text class="title_logistics_il">物流详情</text>
				<view class="card_steps" v-if="activitiesList.length > 0">
					<view class="steps">
						<view class="steps_item" v-for="(i, index) in activitiesList" :key="index">
							<view class="s_r">
								<text class="line"
									:style="{ backgroundColor: index != 0 ? '#EAEAEA' : 'rgba(0,0,0,0)' }"></text>
								<text class="index_title" :style="{ backgroundColor: i.backgroundColor, color: color }">
								</text>
								<text class="line1"
									:style="{ backgroundColor: index != activitiesList.length - 1 ? '#EAEAEA' : 'rgba(0,0,0,0)' }">
								</text>
							</view>
							<view class="s_l">
								<text class="title_scacm_34">{{ i.text }}
									<text v-if="i.phone">
										联系电话:<text style="color: #f29100;margin-right: 15rpx;">{{i.phone}}</text>
									</text>
									{{ i.text1 }}
								</text>
								<text class="date_scacm">{{ i.createdAt || ''}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="not_card" v-else style="padding-bottom: 20rpx;">
					<image style="width: 280rpx;height: 220rpx;padding: 30rpx;" src="../../static/task/not.png"></image>
					<text class="not_title">暂无物流信息</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const ENV = require('../../.env.js')
	export default {
		data() {
			return {
				windowHeight: uni.getSystemInfoSync().windowHeight, //屏幕高度
				orderList: {},
				trackList: [],
				map: null,
				longitude: 106.6282014,
				latitude: 26.64669,
				scale: 13,
				activitiesList: [],
				active: 0,
				statusList: [{
					id: 3,
					title: '待配送',
				}, {
					id: 4,
					title: '配送中',
				}, {
					id: 5,
					title: '已送达',
				}, {
					id: 6,
					title: '已拒收',
				}],
				polylineList: [],
				markers: [],
				logisticsFlag: true,
				showmap: false,
				color: '#fff',
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: '物流详情',
			})
			var orderList = uni.getStorageSync('orderDetails')
			this.orderList = orderList
			this.$nextTick(() => {
				setTimeout(() => {
					this.getList()
				})
			})
		},
		methods: {
			getList() {
				uni.request({
					url: ENV.APP_DEV_URL + '/api/waybill-logistics',
					method: 'GET',
					data: {
						waybillNo: this.orderList.waybillNo,
					},
					success: (res) => {
						if (res.data.code == 200) {
							var arrList = res.data.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
								} else {
									yonTitle = '运单号' + item.waybillNo
								}
								item.text = item.address + '【' + yonTitle + '】' + '  ' + '您的货物' +
									arr
							})
							arrList[0].backgroundColor = '#2979ff'
							this.activitiesList = arrList.reverse()
							this.getTrack()
						}
					},
					fail: (err) => {
						// 处理请求失败情况
					}
				});
			},
			// 获取轨迹
			getTrack() {
				uni.request({
					url: ENV.APP_DEV_URL + '/api/waybill-task/locus',
					method: 'GET',
					data: {
						waybillNo: this.orderList.waybillNo,
					},
					success: (res) => {
						if (res.data.code == 200) {
							let arr = res.data.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 = [{
									points: arrList,
									color: '#3591FC',
									width: 15,
									arrowLine: true,
								}]
								this.polylineList = polyline
								const markers0 = {
									latitude: arrList[0].latitude,
									longitude: arrList[0].longitude,
									id: 0,
									iconPath: '/static/task/startpoint.png',
									width: 35,
									height: 35,
								}
								const markers1 = {
									latitude: arrList[arrList.length - 1].latitude,
									longitude: arrList[arrList.length - 1].longitude,
									id: 1,
									iconPath: '/static/task/endpoint.png',
									width: 35,
									height: 35,
								}
								let markers = []
								markers.push(markers0)
								markers.push(markers1)
								this.markers = markers
								this.latitude = arrList[arrList.length - 1].latitude
								this.longitude = arrList[arrList.length - 1].longitude
								this.$forceUpdate()
								this.showmap = true;
							}
						}
					},
					fail: (err) => {
						// 处理请求失败情况
					}
				});
			},
			clickImg() {
				if (this.logisticsFlag) {
					this.logisticsFlag = false
				} else {
					this.logisticsFlag = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card_logist {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
	}

	.card_logistics {
		z-index: 2023;
		position: absolute;
		display: flex;
		bottom: 0;
		left: 20rpx;
		right: 20rpx;
		// width: calc(100% - 40rpx);
		// margin: 20rpx 20rpx 0rpx 20rpx;
		background-color: #fff;
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
	}

	.img_head {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 0rpx;
	}

	.card_wlxq {
		display: flex;
		flex: 1;
	}

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

	.card_steps {
		display: flex;
		padding: 20rpx;
	}

	.overturn {
		transform: rotate(180deg);
	}

	.steps {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.steps_item {
		display: flex;
		flex-direction: row;
		flex: 1;
	}

	.s_r {
		padding: 0 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 50rpx;
	}

	.line {
		width: 5rpx;
		height: 20rpx;
	}

	.line1 {
		width: 5rpx;
		height: 90rpx;
	}

	.index_title {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50rpx;
		border: 4rpx solid #e3eeff;
	}

	.s_l {
		flex: 1;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 20rpx;
	}

	.date_scacm {
		font-size: 23rpx;
		color: #afb4be;
	}

	.title_scacm_34 {
		font-size: 28rpx;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}

	.not_card {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.not_title {
		font-size: 30rpx;
		color: #afb4be;
	}
</style>