shunfengche-sfd/my/order/xcDetail.vue

<template>
	<view>

		<view style="position: relative;">
			<view>
				<map id="map" style="width: 100%; height: 46vh;" :latitude="latitude" :longitude="longitude"
					:markers="covers" :polyline="polyline">
				</map>
			</view>
			<view class="listbb" v-if="orderList.length > 0">
				<scroll-view scroll-y="true" style="width: 750rpx;height: 790rpx;">
					<view v-for="(item,index) in orderList" v-if="item.status == 3 || item.status == 4">
						<view class="boxa">
							<view class="flex align-center justify-between" style="padding: 30rpx 0rpx 0rpx 30rpx;">
								<view style="font-weight: bold;">
									<view>{{item.appointmentStartTime}}-{{item.appointmentEndTime}}</view>
								</view>
							</view>

							<view class="order_city">
								<view class="flex align-center add_name justify-between"
									style="margin: 0rpx 0rpx 4rpx;">
									<view class="flex align-center">
										<view class="green"></view>{{item.shipAddress}}
									</view>
									<view class="item_juli">{{item.startDistance}}km</view>
								</view>
								<image v-if="globalImages" :src="globalImages + 'imgs/static/upload/up.png'" class="order_up"></image>
								<view class="flex align-center add_name justify-between">
									<view class="flex align-center">
										<view class="orgin"></view>{{item.deliveryAddress}}
									</view>
									<view class="item_juli">{{item.endDistance}}km</view>
								</view>
								<view class="flex align-center justify-between" style="margin-top: 24rpx;">
									<view class="flex align-center">
										<image v-if="globalImages" :src="globalImages + 'imgs/static/upload/person.png'" style="width: 30rpx;height: 31rpx;">
										</image>
										<view style="margin-left: 16rpx;" class="add_name">
											{{item.appointmentNum}}人乘坐·{{item.appointmentType == 1 ? '独享' : '拼车'}}
										</view>
									</view>
									<view class="item_juli">订单里程{{item.kmDistance}}km</view>

								</view>
							</view>

							<view class="margin-tb-sm" style="width: 100%;height:1rpx;background: #F2F2F2;"></view>
							<view class="flex align-center justify-between padding-lr ">
								<view class="flex align-center" @click="bindPhone()">
									<view>
										<view class="">{{item.shipUserName}}</view>
										<!-- <view class="margin-top-xs">{{item.shipUserPhones}}</view> -->
									</view>
									<view class="flex margin-left-sm">
										<image src="/my/static/phone.png" style="width: 22rpx;height: 30rpx;">
										</image>
									</view>
								</view>
								<view style="color: #FF2020;font-size: 32rpx;font-weight: bold;">
									<text>¥</text><text style="font-size: 42rpx;">{{item.driveMoney}}</text>
								</view>
							</view>
						</view>


						<!-- <view class="boxs" style="margin-top: 28rpx;">
							<view class="flex align-center justify-between padding-lr">
								<view class="flex align-center">
									<image src="/static/image/shifuAvatar.png"
										style="width: 90rpx;height: 90rpx;border-radius: 50rpx;">
									</image>
									<view class="margin-left-sm">
										<view class="">{{item.shipUserName}}</view>
										<view class="margin-top-xs">{{item.shipUserPhones}}</view>
									</view>
								</view>
								<view class="flex" v-if="item.status == 3">
									<image src="/my/static/phone.png" @click="bindPhone()"
										style="width: 32rpx;height: 40rpx;">
									</image>
								</view>
							</view>
						</view> -->
					</view>
				</scroll-view>
			</view>
		</view>



	</view>
</template>

<script>
	import QQMapWX from '@/components/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js'
	import { waitForGlobalImages } from '@/utils/globalImageLoader'
	export default {
		data() {
			return {
				orderList: [],
				latitude: '',
				longitude: '',
				qqmapsdk: {}, // 腾讯地图小程序的SDK
				covers: [], // 地图上面的标记点
				to: { // 目的地坐标
					latitude: '',
					longitude: '',
				},
				polyline: [], //路线
				polylines: '',
				driverRouteId: '',
				indentNumber: '',
				order: {
					appointmentStartTime: ''
				},
				isVip: false,
				waypointsList: [],
				waypoints: '', //途径点
				globalImages: '',
			}
		},
		onLoad(option) {
			waitForGlobalImages().then((path) => {
				console.log('✅ 全局图片路径:', path)
				this.globalImages = path
			  })
			// 实例化API核心类
			// DU7BZ-S6GCJ-Y46FR-XIEGB-4EKBZ-ZMFA4
			this.$Request.getT('/app/common/type/282').then(res => { //师傅端腾讯地图key
				if (res.code === 0) {
					this.qqmapsdk = new QQMapWX({
						key: res.data.value // 自己申请的key值
					})
				}
			});
			if (option.driverRouteId) {
				this.driverRouteId = option.driverRouteId;
				this.selectDriverRouteByUserId();
			}
		},
		onShow() {},
		methods: {
			//获取我的行程
			selectDriverRouteByUserId() {
				let data = {
					userId: uni.getStorageSync('userId'),
					driverRouteId: this.driverRouteId
				}
				this.$Request.getT('/app/driverRoute/selectDriverRouteById', data).then(res => {
					if (res.code == 0 && res.data) {
						let from = {
							lat: res.data.shipAddressLatitude,
							lng: res.data.shipAddressLongitude,
							address: res.data.shipAddress,
						}
						let to = {
							lat: res.data.deliveryAddressLatitude,
							lng: res.data.deliveryAddressLongitude,
							address: res.data.deliveryAddress,
						}
						this.waypointsList = [from, to]
						console.log(this.waypointsList, '4444444')

						this.latitude = res.data.shipAddressLatitude
						this.longitude = res.data.shipAddressLongitude

						this.to.latitude = res.data.deliveryAddressLatitude
						this.to.longitude = res.data.deliveryAddressLongitude


						this.getMyOrderListByRounteId();
					} else {
						this.getMyOrderListByRounteId();
					}
				})
			},
			// 一键导航
			openMap(latitude, longitude, name) {
				uni.openLocation({
					latitude: latitude - 0, //要去的纬度-地址       
					longitude: longitude - 0, //要去的经度-地址
					name: name, //地址名称
					address: name, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			bindPhone() {
				uni.makePhoneCall({
					phoneNumber: this.order.shipUserPhone //仅为示例
				});
			},
			getMyOrderListByRounteId() {
				let driverId = this.$queue.getData('driverId');
				if (!driverId) {
					return;
				}
				let userId = this.$queue.getData('userId');
				let latitude = uni.getStorageSync('latitude');
				let longitude = uni.getStorageSync('longitude');
				let data = {
					page: 1,
					limit: 10,
					latitude: latitude,
					longitude: longitude,
					driverUserId: userId,
					appointmentType: '',
					driverRouteIds: this.driverRouteId,
					driverRouteId: this.driverRouteId,
					status: '',
					driverId: driverId,
					sort: 3
				}
				let that = this;
				this.$Request.getT('/app/orders/selectOrdersList', data).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						this.order = res.data.list[0]
						this.orderList = res.data.list
						let waypoints = ''
						let dData = {
							id: 1,
							latitude: that.waypointsList[0].lat,
							longitude: that.waypointsList[0].lng,
							iconPath: this.globalImages ? this.globalImages + 'imgs/static/image/qi.png' : '',
							width: 32,
							height: 44,
							callout: { //自定义标记点上方的气泡窗口 点击有效
								content: that.waypointsList[0].address, //文本
								color: '#333333', //文字颜色
								fontSize: 10, //文本大小
								padding: 10, //附近留白
								borderRadius: 6, //边框圆角
								bgColor: '#FFFFFF', //背景颜色
								display: 'ALWAYS', //常显
							},
						}
						that.covers = []
						that.covers.push(dData)
						res.data.list.forEach((d,index) => {
							// waypoints: that.latitude + ',' + that.longitude + ';' + that.to.latitude + ',' + that.to
							// 	.longitude, //客户的位置是途径点

							// latitude: this.order.shipAddressLatitude,
							// longitude: this.order.shipAddressLongitude,
							// latitude: this.order.deliveryAddressLatitude,
							// longitude: this.order.deliveryAddressLongitude,
							
							let dDatas = {
								id: index + 2,
								latitude: d.shipAddressLatitude,
								longitude: d.shipAddressLongitude,
								iconPath: this.globalImages ? this.globalImages + 'imgs/static/image/qi.png' : '',
								width: 32,
								height: 44,
								callout: { //自定义标记点上方的气泡窗口 点击有效
									content: d.shipAddress, //文本
									color: '#333333', //文字颜色
									fontSize: 10, //文本大小
									padding: 10, //附近留白
									borderRadius: 6, //边框圆角
									bgColor: '#FFFFFF', //背景颜色
									display: 'ALWAYS', //常显
								},
							}
							that.covers.push(dDatas)
							dDatas = {
								id: index + 3,
								latitude: d.deliveryAddressLatitude,
								longitude: d.deliveryAddressLongitude,
								iconPath: this.globalImages ? this.globalImages + 'imgs/static/image/zd.png' : '',
								// iconPath: '../../static/logo.png',
								width: 32,
								height: 44,
								callout: { //自定义标记点上方的气泡窗口 点击有效
									content: d.deliveryAddress, //文本
									color: '#333333', //文字颜色
									fontSize: 10, //文本大小
									padding: 10, //附近留白
									borderRadius: 6, //边框圆角
									bgColor: '#FFFFFF', //背景颜色
									display: 'ALWAYS', //常显
								},
							}
							that.covers.push(dDatas)
							if (waypoints) {
								waypoints = waypoints + ';' + d.shipAddressLatitude + ',' + d.shipAddressLongitude + ';' + d.deliveryAddressLatitude + ',' + d.deliveryAddressLongitude
							} else {
								waypoints = d.shipAddressLatitude + ',' + d.shipAddressLongitude + ';' + d.deliveryAddressLatitude + ',' + d.deliveryAddressLongitude
							}
						});
						// console.log(this.covers)
						
						dData = {
							id: this.covers.length + 1,
							latitude: that.waypointsList[1].lat,
							longitude: that.waypointsList[1].lng,
							iconPath: this.globalImages ? this.globalImages + 'imgs/static/image/zd.png' : '',
							width: 32,
							height: 44,
							callout: { //自定义标记点上方的气泡窗口 点击有效
								content: that.waypointsList[1].address, //文本
								color: '#333333', //文字颜色
								fontSize: 10, //文本大小
								padding: 10, //附近留白
								borderRadius: 6, //边框圆角
								bgColor: '#FFFFFF', //背景颜色
								display: 'ALWAYS', //常显
							},
						}
						this.covers.push(dData)
						this.routePlanning(waypoints)
					}
				});
			},
			getorderDet() {
				let userId = this.$queue.getData('userId');
				let driverRouteId = this.$queue.getData('driverRouteId')
				let data = {
					ordersId: this.indentNumber,
					driverRouteId: driverRouteId,
					driverRouteId: this.driverRouteId,
					driverUserId: userId
				}
				this.$Request.getT('/app/orders/selectOrdersDetails', data).then(res => {
					if (res.code === 0) {
						this.order = res.data
						// if (this.order.shipUserPhone) {
						// 	let mobile = this.order.shipUserPhone
						// 	this.order.shipPhone = mobile.substring(0, 3) + "****" + mobile.substring(7)
						// }
						this.latitude = this.order.shipAddressLatitude
						this.longitude = this.order.shipAddressLongitude

						this.to.latitude = this.order.deliveryAddressLatitude
						this.to.longitude = this.order.deliveryAddressLongitude

						this.covers = [{
							id: 1,
							latitude: this.waypointsList[0].lat,
							longitude: this.waypointsList[0].lng,
							iconPath: this.globalImages ? this.globalImages + 'imgs/static/image/qi.png' : '',
							width: 32,
							height: 44,
							callout: { //自定义标记点上方的气泡窗口 点击有效
								content: this.waypointsList[0].address, //文本
								color: '#333333', //文字颜色
								fontSize: 10, //文本大小
								padding: 10, //附近留白
								borderRadius: 6, //边框圆角
								bgColor: '#FFFFFF', //背景颜色
								display: 'ALWAYS', //常显
							},
						}, {
							id: 2,
							latitude: this.order.shipAddressLatitude,
							longitude: this.order.shipAddressLongitude,
							iconPath: this.globalImages ? this.globalImages + 'imgs/static/image/qi.png' : '',
							// iconPath: '../../static/logo.png',
							width: 32,
							height: 44,
							callout: { //自定义标记点上方的气泡窗口 点击有效
								content: this.order.shipAddress, //文本
								color: '#333333', //文字颜色
								fontSize: 10, //文本大小
								padding: 10, //附近留白
								borderRadius: 6, //边框圆角
								bgColor: '#FFFFFF', //背景颜色
								display: 'ALWAYS', //常显
							},
						}, {
							id: 3,
							latitude: this.order.deliveryAddressLatitude,
							longitude: this.order.deliveryAddressLongitude,
							iconPath: this.globalImages ? this.globalImages + 'imgs/static/image/zd.png' : '',
							// iconPath: '../../static/logo.png',
							width: 32,
							height: 44,
							callout: { //自定义标记点上方的气泡窗口 点击有效
								content: this.order.deliveryAddress, //文本
								color: '#333333', //文字颜色
								fontSize: 10, //文本大小
								padding: 10, //附近留白
								borderRadius: 6, //边框圆角
								bgColor: '#FFFFFF', //背景颜色
								display: 'ALWAYS', //常显
							},
						}, {
							id: 4,
							latitude: this.waypointsList[1].lat,
							longitude: this.waypointsList[1].lng,
							iconPath: this.globalImages ? this.globalImages + 'imgs/static/image/zd.png' : '',
							width: 32,
							height: 44,
							callout: { //自定义标记点上方的气泡窗口 点击有效
								content: this.waypointsList[1].address, //文本
								color: '#333333', //文字颜色
								fontSize: 10, //文本大小
								padding: 10, //附近留白
								borderRadius: 6, //边框圆角
								bgColor: '#FFFFFF', //背景颜色
								display: 'ALWAYS', //常显
							},
						}]
						// this.polylines = this.order.polyline
						this.routePlanning(waypoints)
					} else {
						uni.showModal({
							title: '温馨提示',
							content: '当前订单已结束！',
							showCancel: false,
							confirmText: '确认',
							success: res => {
								uni.navigateBack();
							}
						});
					}
				});
			},
			// 步行路线规划
			routePlanning(waypoints) {
				let that = this
				// latitude: that.latitude,
				// 	longitude: that.longitude
				console.log(that.latitude + ',' + that.longitude + ';' + that.to.latitude + ',' + that.to
					.longitude, '2222222')

				that.qqmapsdk.direction({
					mode: 'driving', // 驾车
					from: { // 起始位置(当前位置)坐标
						latitude: that.waypointsList[0].lat,
						longitude: that.waypointsList[0].lng
					},
					waypoints: waypoints,
					// waypoints: that.latitude + ',' + that.longitude + ';' + that.to.latitude + ',' + that.to
					// 	.longitude, //客户的位置是途径点
					to: {
						latitude: that.waypointsList[1].lat,
						longitude: that.waypointsList[1].lng,
					}, // 目的地位置坐标（我的终点）
					success(res) {
						console.log(res, '=======')
						// var coors = JSON.parse(that.polylines)
						// console.log(coors,'11111111111111')
						var coors = res.result.routes[0].polyline
						// console.log(coors2,'11111111111111')
						var pl = [] // 点串数组
						// 坐标解压(返回的点串坐标，通过前向差分进行压缩)
						var kr = 1000000
						for (var i = 2; i < coors.length; i++) {
							coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr
						}
						// 将解压后的坐标放入点串数组pl中
						for (var i = 0; i < coors.length; i += 2) {
							pl.push({
								latitude: coors[i],
								longitude: coors[i + 1]
							})
						}
						console.log(pl,'plplplplpl')
						// 设置polyline属性，将路线显示出来，将解压坐标第一个数据作为起点
						that.polyline = [{
							points: pl,
							color: '#346EF6',
							width: 4
						}]
					},
					fail(e) {
						console.log(e)
					},
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F5F5F5;
	}

	.boxs {
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 30rpx;
		padding: 30rpx 0;
	}

	.item_shunlu {
		width: 210rpx;
		height: 80rpx;
		background: #EFF4FF;
		border-radius: 0px 24rpx 0px 50rpx;
		text-align: center;
		line-height: 80rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 32rpx;
		color: #346EF6;
	}

	.order_city {
		padding: 10rpx 30rpx 10rpx;
		font-weight: bold;
		color: #1A1A1A;
	}

	.order_up {
		width: 6rpx;
		height: 24rpx;
		margin-left: 16rpx;
	}

	.listbb {
		position: absolute;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		top: 700rpx;
		/* #endif */
		/* #ifndef H5 */
		top: 670rpx;
		/* #endif */
	}

	.boxa {
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 30rpx;
		padding: 0rpx 0rpx 30rpx;
	}


	.addbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 110rpx;
		border-radius: 16rpx;

	}

	.add_cont {
		display: flex;
		align-items: center;
	}

	.add_tit {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.bg {
		background: #F5F5F5;
	}

	.bgs {
		background: #F5F8FF;
	}

	.remkbtn {
		width: 100%;
		height: 98rpx;
		background: #346EF6;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 98rpx;
		margin-top: 40rpx;
	}

	.green {
		width: 16rpx;
		height: 16rpx;
		background: #1FC657;
		border-radius: 50%;
		margin-right: 20rpx;
		margin-left: 10rpx;
	}

	.orgin {
		width: 16rpx;
		height: 16rpx;
		background: #FBAC04;
		border-radius: 50%;
		margin-right: 20rpx;
		margin-left: 10rpx;
	}

	.user {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx;
		margin: 30rpx;
		display: flex;
		align-items: center;

	}

	.btn {
		width: 690rpx;
		height: 100rpx;
		background: #346EF6;
		border-radius: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}

	.item_juli {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #999999;
	}
</style>