shunfengche-sfd/pages/index/orderDet.vue

<template>
	<view>

		<view style="position: relative;">
			<view>
				<!-- :customCallout="customCallout" -->
				<map id="map" style="width: 100%; height: 46vh;" :latitude="latitude" :longitude="longitude"
					:markers="covers" :polyline="polyline">
				</map>
			</view>
			<view class="listbb" v-if="order.appointmentStartTime">
				<view class="boxa">

					<view class="flex align-center justify-between" style="padding: 0rpx 0rpx 0rpx 30rpx;">
						<view style="font-weight: bold;">
							<view>{{order.appointmentStartTime}}-{{order.appointmentEndTime}}</view>
						</view>
						<view class="item_shunlu">{{order.similarity ? order.similarity : '0'}}% <text
								style="font-size: 24rpx;">顺路</text> </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>{{order.shipAddress}}
							</view>
							<view class="item_juli">{{order.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>{{order.deliveryAddress}}
							</view>
							<view class="item_juli">{{order.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">
									{{order.appointmentNum}}人乘坐·{{order.appointmentType == 1 ? '独享' : '拼车'}}
								</view>
							</view>
							<view class="item_juli">订单里程{{order.kmDistance}}km</view>

						</view>
					</view>

					<view class="margin-tb-sm" style="width: 100%;height:1rpx;background: #F2F2F2;"></view>
					<view class="flex align-center justify-end padding-lr ">
						<!-- <view>
							<view class="flex align-center" v-if="order.status != 5 && order.status != 6"
								@tap="bindPhone(order.shipUserPhone)">
								<image src="/static/upload/phone.png" style="width: 32rpx;height: 40rpx;"></image>
								<view class="add_name margin-left-xs">联系TA</view>
							</view>
						</view> -->
						<view style="color: #FF2020;font-size: 32rpx;font-weight: bold;">
							<text>¥</text><text style="font-size: 42rpx;">{{order.driveMoney}}</text>
						</view>
					</view>

					<!-- <view class="flex align-center justify-between padding-lr">
						<view class="flex align-center">
							<image src="../../static/image/data.png" style="width: 34rpx;height: 38rpx;"></image>
							<view class="margin-left-sm" v-if="order.indentType==1"> 即时代驾</view>
							<view class="margin-left-sm" v-if="order.indentType==2">朋友代叫</view>
							<view class="margin-left-sm" v-if="order.indentType==3">预约代驾</view>
						</view>
						<view v-if="order.indentType==3&&order.hopeTime">预约时间：{{order.hopeTime}}</view>
					</view>
					<view class="margin-tb-sm" style="width: 100%;height:1rpx;background: #F2F2F2;"></view>
					<view class="addbox bgs margin-lr margin-bottom"
						@click="openMap(order.shipAddressLatitude,order.shipAddressLongitude,order.shipAddress)">
						<view class="add_cont">
							<view class="green"></view>
							<view class="add_tit">
								<view>{{order.shipAddress}}</view>
							</view>
						</view>
						<view>
							<image src="../../static/image/ladd.png" style="width: 30rpx;height: 35rpx;"></image>
						</view>
					</view>
					<view class="addbox bg margin-lr"
						@click="openMap(order.deliveryAddressLatitude,order.deliveryAddressLongitude,order.deliveryAddress)">
						<view class="add_cont">
							<view class="orgin"></view>
							<view class="add_tit">{{order.deliveryAddress}}</view>
						</view>
						<view>
							<image src="../../static/image/hadd.png" style="width: 30rpx;height: 35rpx;"></image>
						</view>
					</view>
					<view class="margin-lr margin-top-sm" v-if="order.remarks">备注：{{order.remarks}}</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" v-if="order.distance>1000">
							<image src="../../static/image/add.png" style="width: 30rpx;height: 35rpx;"></image>
							<view class="margin-left-xs">距您<text
									style="color: #3699FF;">{{(Number(order.distance) / 1000).toFixed(2)}}km</text>
							</view>
						</view>
						<view class="flex align-center" v-else>
							<image src="../../static/image/add.png" style="width: 30rpx;height: 35rpx;"></image>
							<view class="margin-left-xs">距您<text style="color: #3699FF;">{{order.distance}}m</text>
							</view>
						</view>
						<view class="flex align-center">预估
							<view style="color: #FF2020;font-size: 32rpx;">
								<text>¥</text><text class="text-bold"
									style="font-size: 38rpx;">{{order.riderMoney}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="user">
					<image :src="order.avatar?order.avatar:'../../static/logo.png'"
						style="width: 90rpx;height: 90rpx;border-radius: 55%;"></image>
					<view class="flex align-center justify-between" style="width: 90%;">
						<view class="margin-left-xs">
							<view>{{order.shipUserName}}</view>
						</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 v-if="globalImages" :src="globalImages + 'imgs/static/image/shifuAvatar.png'"
								style="width: 90rpx;height: 90rpx;border-radius: 50rpx;">
							</image>
							<view class="margin-left-sm">
								<view class="">{{order.shipUserName}}</view>
								<view class="margin-top-xs">{{order.shipUserPhones}}</view>
							</view>
						</view>
						<view class="flex" v-if="order.status == 3">
							<image src="/my/static/phone.png" @click="bindPhone()" style="width: 32rpx;height: 40rpx;">
							</image>
						</view>
					</view>
				</view>
				<view class="btn" @click="jiedan()" v-if="order.status == 2">接单同行</view>
			</view>
		</view>



	</view>
</template>

<script>
	import { waitForGlobalImages } from '@/utils/globalImageLoader'
	import QQMapWX from '@/components/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js'
	export default {
		data() {
			return {
				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.indentNumber) {
				this.indentNumber = option.indentNumber
			}
			if (option.driverRouteId) {
				this.driverRouteId = option.driverRouteId;
				this.selectDriverRouteByUserId();
			}else{
				this.getorderDet()
			}
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.selectUserDetails()

			} else {
				this.isVip = false
			}
		},
		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.getorderDet()
					} else {
						this.getorderDet()
					}
				})
			},
			//个人信息
			selectUserDetails() {
				let data = {
					userId: uni.getStorageSync('userId')
				}
				this.$Request.getT("/app/user/selectUserDetails", data).then(res => {
					if (res.code == 0) {
						if (res.data.isVip && res.data.isVip == 1) {
							this.isVip = true
						} else {
							this.isVip = false
						}
					}
				})
			},
			// 一键导航
			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 //仅为示例
				});
			},
			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()
					} else {
						uni.showModal({
							title: '温馨提示',
							content: '当前订单已结束！',
							showCancel: false,
							confirmText: '确认',
							success: res => {
								uni.navigateBack();
							}
						});
					}
				});
			},
			// 步行路线规划
			routePlanning() {
				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: 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]
							})
						}
						// 设置polyline属性，将路线显示出来，将解压坐标第一个数据作为起点
						that.polyline = [{
							points: pl,
							color: '#346EF6',
							width: 4
						}]
					},
					fail(e) {
						console.log(e)
					},
				})
			},
			//接单
			jiedan() {
				if (uni.getStorageSync('isOpenVip') == '是') {
					if (this.isVip == false) {
						uni.showModal({
							title: '提示',
							content: '开通会员后可接单',
							confirmText: '开通会员',
							complete(ret) {
								if (ret.confirm) {
									uni.navigateTo({
										url: '/my/vip/vip'
									})
								}
							}
						})
						return
					}
				}
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定接单吗？',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							let userId = that.$queue.getData('userId');
							that.$Request.postT(
									'/app/orders/takingOrders?ordersId=' +
									that.indentNumber + '&userId=' + userId + '&driverRouteId=' + that
									.driverRouteId)
								.then(res => {
									if (res.code == 0) {
										uni.showToast({
											title: '接单成功',
											icon: 'none'
										})
										setTimeout(function() {
											uni.switchTab({
												url: '/pages/order/order'
											})
										}, 1000)
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 1500
										})
										// that.taskData()

									}
								});
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</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: #e8fbf6;
		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: #00c18a;
	}

	.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: #00c18a;
		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: #00c18a;
		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: #00c18a;
		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>