uniapp-shunfengche/my/order/pay.vue

<template>
	<view style="padding-bottom: 90rpx;">
		<view class="top_view">
			<view class="top_title" v-if="order.status==3">司机正在努力赶来</view>
			<view class="top_title" v-if="order.status==1">等待用户支付...</view>
			<view class="top_title" v-if="order.status==2">等待附近司机接单...</view>
			<view class="top_title" v-if="order.status==6">订单已取消</view>
			<view class="top_title" v-if="order.status==4">订单进行中</view>
			<view class="top_title" v-if="order.status==5">已到达终点</view>
		</view>

		<view class="top_box">
			<view v-if="order.status!=3 && order.status!=4 && order.status!=5">
				<view class="topbox_addview justify-between">
					<view class="flex align-center" style="margin-bottom: 4rpx;">
						<view class="green"></view>
						<view class="topbox_addName">{{order.shipAddress}}</view>
					</view>
					<image v-if="globalImages" :src="globalImages + 'images/static/upload/up.png'"></image>
					<view class="flex align-center">
						<view class="orgin"></view>
						<view class="topbox_addName">{{order.deliveryAddress}}</view>
					</view>
				</view>
				<view class="flex justify-between margin-tb-sm">
					<view class="topbox_title">{{order.appointmentNum}}人·{{order.appointmentType == 1 ? '独享' : '拼车'}}
					</view>
					<view class="topbox_title">{{order.appointmentStartTime}}-{{order.appointmentEndTime}}</view>
				</view>
			</view>
			<view class="cph_item" v-if="order.status == 3 || order.status == 4 || order.status == 5">
				<view v-if="order.driver">
					<view class="cphitem_name">{{order.driver.driverPlate}}</view>
					<view class="cphitem_name flex align-center" style="font-size: 28rpx;margin-top: 20rpx;">
						<view>{{order.driver.driverColor}}</view>
						<view class="blackdian"></view>
						<view>{{order.driver.driverBrand}}</view>
					</view>
					<view class="flex align-center margin-top">
						<view class="sj_name">{{order.driver.driverName}}</view>
						<view style="width: 10rpx;height: 20rpx;margin: 0rpx 20rpx;">
							<u-line direction="col" color="#ababab" />
						</view>
						<view class="sj_name">接单{{order.ordersCount ? order.ordersCount : 1}}次</view>
					</view>
				</view>
				<image v-if="globalImages" :src="globalImages + 'images/static/upload/orderimage.png'"></image>
			</view>
			<map class="orderMap" id="orderMap" scale="12" :latitude="latitude" :longitude="longitude" :markers="covers"
				:polyline="polyline">
			</map>
			<u-line color="#E6E6E6" />
			<view class="order_btn">
				<view class="btn3" v-if="order.status == 1 || order.status == 2" @tap.stop="bindorderOff()">取消行程</view>

				<view class="btn2 margin-left" @click.stop="backindex()">再来一单</view>
				<view class="btn2 margin-left" v-if="order.status==1" @click.stop="orderpay()">
					立即支付</view>
				<!-- <view class="btn2 margin-left" v-if="order.status==5" @tap.stop="bindcomment()">
					去评价
				</view>
				<view class="btn2 margin-left" v-if="order.status==5" @tap.stop="bindtousu()">
					去投诉
				</view> -->
				<view class="btn2 margin-left" v-if="order.status == 4 || order.status==3 && order.driver"
					@tap.stop="bindPhone">
					致电车主
				</view>
				<view class="btn2 margin-left" v-if="order.status == 4 || order.status==3 && order.driver && zxMsg === '是'"
					@tap.stop="goMsg">
					在线联系
				</view>
			</view>
		</view>

		<view v-if="order.status != 2">
			
			<view class="box ">
				<view>订单信息</view>
				<view class="flex align-center justify-between margin-top">
					<view>订单编号</view>
					<view @click.stop="copyClick(order.ordersNo)">{{order.ordersNo}}
						<image src="../static/copy.png" style="width:28rpx;height: 28rpx;margin-left: 10rpx;"></image>
					</view>
				</view>
				<!--<view class="flex align-center justify-between margin-top" v-if="order.couponMoney">
					<view>优惠券</view>
					<view>-￥{{order.couponMoney}}</view>
				</view> -->
				<view class="flex align-center justify-between margin-top">
					<view>下单时间</view>
					<view>{{order.createTime}}</view>
				</view>
				<view class="flex align-center justify-between margin-top" v-if="order.payWay">
					<view>支付方式</view>
					<!-- 支付方式 1微信小程序 2微信公众号 3微信app 4支付宝 5季钱 -->
					<view v-if="order.payWay==1">微信小程序支付</view>
					<view v-if="order.payWay==2">微信公众号支付</view>
					<view v-if="order.payWay==3">微信app支付</view>
					<view v-if="order.payWay==4">支付宝支付</view>
					<view v-if="order.payWay==5">零钱支付</view>
					<view v-if="order.payWay==6">线下支付</view>
				</view>
				<view class="flex align-center justify-between margin-top" v-if="order.driverRoute && order.driverRoute.isHighSpeedPrice">
					<view>高速费用</view>
					<!-- <view>{{order.driverRoute.isHighSpeedPrice == 1 ? '司机承担高速费' : '用户承担高速费'}}</view> -->
					<view v-if="order.driverRoute.isHighSpeedPrice == 1">
						·司机承担</view>
					<view v-if="order.driverRoute.isHighSpeedPrice == 2">
						·乘客承担</view>
					<view v-if="order.driverRoute.isHighSpeedPrice == 3">
						·费用AA</view>
					
				</view>
				<view class="margin-tb" v-if="order.remark">
					<view>备注</view>
					<view class="margin-top-xs">{{order.remark}}</view>
				</view>
			</view>

			<view class="boxs">
				<!-- <view class="titls">出行信息</view> -->
				<view class="flex align-center padding-tb-sm">
					<view>
						<image v-if="globalImages" :src="globalImages + 'images/order/tiem.png'" style="width: 80rpx;height: 80rpx;" mode=""></image>
					</view>
					<view style="margin-left: 30rpx; line-height: 40rpx;">
						<view style="color: #999;">预约出发时间</view>
						<view>{{order.appointmentStartTime}}</view>
					</view>
				</view>
				<view class="flex align-center padding-tb-sm">
					<view>
						<image v-if="globalImages" :src="globalImages + 'images/order/tiem.png'" style="width: 80rpx;height: 80rpx;" mode=""></image>
					</view>
					<view style="margin-left: 30rpx; line-height: 40rpx;">
						<view style="color: #999;">预约到达时间</view>
						<view>{{order.appointmentEndTime}}</view>
					</view>
				</view>
				<view class="flex align-center padding-tb-sm">
					<view>
						<image v-if="globalImages" :src="globalImages + 'images/order/phone.png'" style="width: 80rpx;height: 80rpx;" mode=""></image>
					</view>
					<view style="margin-left: 30rpx; line-height: 40rpx;">
						<view style="color: #999;">联系方式</view>
						<view>{{order.shipUserPhone}}</view>
					</view>
				</view>
				<view class="flex align-center padding-tb-sm margin-top-xs">
					<view>
						<image v-if="globalImages" :src="globalImages + 'images/order/chufa.png'" style="width: 80rpx;height: 80rpx;" mode=""></image>
					</view>
					<view style="margin-left: 30rpx; line-height: 40rpx;">
						<view style="color: #999;">出发地</view>
						<view>{{order.shipAddress}}</view>
					</view>
				</view>
				<view class="flex align-center padding-tb-sm">
					<view>
						<image v-if="globalImages" :src="globalImages + 'images/order/mididi.png'" style="width: 80rpx;height: 80rpx;" mode=""></image>
					</view>
					<view style="margin-left: 30rpx; line-height: 40rpx;">
						<view style="color: #999;">目的地</view>
						<view>{{order.deliveryAddress}}</view>
					</view>
				</view>
				<view class="flex align-center padding-tb-sm">
					<view>
						<image v-if="globalImages" :src="globalImages + 'images/order/chengcheren.png'" style="width: 80rpx;height: 80rpx;" mode=""></image>
					</view>
					<view style="margin-left: 30rpx; line-height: 40rpx;">
						<view style="color: #999;">乘车人数</view>
						<view>{{order.appointmentNum}}人</view>
					</view>
				</view>
				<view v-if="order.kmDistance" class="flex align-center padding-tb-sm">
					<view>
						<image v-if="globalImages" :src="globalImages + 'images/order/chufa.png'" style="width: 80rpx;height: 80rpx;" mode=""></image>
					</view>
					<view style="margin-left: 30rpx; line-height: 40rpx;">
						<view style="color: #999;">总行程</view>
						<view>{{order.kmDistance}}公里</view>
					</view>
				</view>
				<view class="flex align-center padding-tb-sm">
					<view>
						<image v-if="globalImages" :src="globalImages + 'images/order/leixing.png'" style="width: 80rpx;height: 80rpx;" mode=""></image>
					</view>
					<view style="margin-left: 30rpx; line-height: 40rpx;">
						<view style="color: #999;">用车类型</view>
						<view>需要加一下</view>
					</view>
				</view>
			</view>

			<view class="boxa">
				<view class="align-center justify-between" style="padding-bottom: 30rpx; border-bottom: #ccc 1rpx solid;margin: 0 30rpx;">
					<view class="titls2">订单信息</view>
					<view class="flex align-center justify-between margin-top">
						<view>基础费用</view>
						<view >￥123123</view>
					</view>
					<view class="flex align-center justify-between margin-top">
						<view>里程费</view>
						<view >￥123123</view>
					</view>
					<view class="flex align-center justify-between margin-top">
						<view>市场费</view>
						<view >￥123123</view>
					</view>
					<view class="flex align-center justify-between margin-top" v-if="order.couponMoney">
						<view>优惠券</view>
						<view >-￥123123</view>
					</view>
				</view>
				<view class="flex align-center justify-between padding-lr" style="margin-top: 30rpx;">
					<view>总计</view>
					<view class="order_money">￥{{order.payMoney}}</view>
				</view>
			</view>
		</view>

		<view v-if="order.status == 2" style="padding: 0rpx 30rpx;">
			<view class="titls">联系车主接单</view>
			<view class="list_item" v-for="(item,index) in list">
				<view class="flex" style="padding: 30rpx 30rpx 20rpx;">
					<image v-if="globalImages" :src="globalImages + 'images/static/upload/ordercz.png'"></image>
					<view class="margin-left-sm">
						<view class="flex">
							<view class="item_time">{{item.startTime}}</view>
							<view class="item_shunlu">{{item.similarity ? item.similarity : 0}}%顺路</view>
						</view>
						<view class="flex align-center" style="margin-top: 6rpx;">
							<view class="sj_name" v-if="item.driver">
								{{item.driver.driverColor}}·{{item.driver.driverBrand}}
							</view>
							<view style="width: 10rpx;height: 20rpx;margin: 0rpx 20rpx;">
								<u-line direction="col" color="#ababab" />
							</view>
							<view class="sj_name">接单{{item.ordersCount ? item.ordersCount : 1}}次</view>
						</view>
					</view>
				</view>

				<u-line color="#E6E6E6" />
				<view class="padding">
					<view class="flex align-center" style="margin-bottom: 4rpx;margin-left: 6rpx;">
						<view class="green"></view>
						<view class="item_addName">{{item.shipAddress}}</view>
						<view class="item_juli" v-if="item.startDistance">{{item.startDistance}}km</view>
					</view>
					<image v-if="globalImages" :src="globalImages + 'images/static/upload/up.png'" style="width: 6rpx;height: 24rpx;margin-left: 12rpx;"></image>
					<view class="flex align-center" style="margin-left: 6rpx;">
						<view class="orgin"></view>
						<view class="item_addName">{{item.deliveryAddress}}</view>
						<view class="item_juli" v-if="item.endDistance">{{item.endDistance}}km</view>
					</view>
					<view class="flex align-center margin-top-sm" v-if="item.seatNum">
						<image v-if="globalImages" :src="globalImages + 'images/static/upload/person.png'" style="width: 24rpx;height: 30rpx;"></image>
						<view style="margin-left: 16rpx;" class="add_name">
							{{item.seatNum}}人乘车·{{item.isFriends === '1' ? '有亲友' : '无亲友'}} 
							<text v-if="item.isHighSpeedPrice && item.isHighSpeedPrice == 1">·司机承担</text>
							<text v-if="item.isHighSpeedPrice && item.isHighSpeedPrice == 2">·乘客承担</text>
							<text v-if="item.isHighSpeedPrice && item.isHighSpeedPrice == 3">·费用AA</text>
						</view>
					</view>
				</view>
				<u-line color="#E6E6E6" />
				<view class="flex justify-between padding">
					<view class="item_xunzhao" style="font-size: 28rpx;">正在寻找顺路乘客...</view>
					<view class="item_btns" v-if="item.messageCount && item.messageCount == 1">已邀请</view>
					<view class="item_btn" v-else @tap="yqSave(item)">邀请接单</view>
				</view>
			</view>

			<view class="empty" v-if="list.length == 0">
				<view style="width: 100%;margin: 0 auto;text-align: center;">
					<image v-if="globalImages" :src="globalImages + 'images/static/image/emety.png'" style="width: 300rpx;height: 300rpx;"></image>
					<view style="color: #CCCCCC;">暂无顺路内容</view>
				</view>
			</view>
		</view>

		<u-popup v-model="showpay" mode="bottom">
			<view class="popup_pay">
				<view class=" margin-top padding-lr radius">
					<view style="padding: 0 20upx;margin-top: 36rpx;">
						<view
							style="display: flex;height: 100upx;align-items: center;padding: 20upx 0;justify-content: center;"
							v-for="(item,index) in openLists" :key='index'>
							<image :src="item.image" style="width: 55upx;height: 55upx;border-radius: 50upx;">
							</image>
							<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">
								{{item.name}} <text @click="goconz" class="margin-left text-sm" style="color:#3699FF;"
									v-if="item.id==3">去充值</text>
							</view>
							<radio-group name="openWay" style="margin-left: 45rpx;" @tap='selectWay(item)'>
								<label class="tui-radio">
									<radio color="#3699FF" :checked="openWay == item.id ? true : false" />
								</label>
							</radio-group>
						</view>
					</view>
				</view>
				<view class="pay_btns" @click="pay()">确认支付</view>
			</view>
		</u-popup>
		<view class="sos" @click="goJinji()">
			<image v-if="globalImages" :src="globalImages + 'images/static/image/my/jjqz.png'" mode=""></image>
		</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 {
				list: [],
				indentNumber: '',
				order: [],
				showpay: false,
				openWay: 1,
				openLists: [],
				creditScore: 0,
				AllcreditScore: 0,
				zxMsg: '是',
				myPhone: '',
				timer: null, //订单详情定时器
				qqmapsdk: {}, // 腾讯地图小程序的SDK
				latitude: '',
				longitude: '',
				covers: [], // 地图上面的标记点
				to: { // 目的地坐标
					latitude: '',
					longitude: '',
				},
				polyline: [], //路线
				polylines: '',
				globalImages: ''
			}
		},
		onLoad(option) {
			waitForGlobalImages().then((path) => {
			    console.log('✅ 全局图片路径:', path)
			    this.globalImages = path
			  })
			this.getInitMap()
			this.zxMsg = this.$queue.getData('zxMsg');
			if (option.indentNumber) {
				this.indentNumber = option.indentNumber
				this.getDetail()
			}
			this.getUserInfo();
			// #ifdef MP-WEIXIN
			this.openLists = [{
				id: 1,
				image: '../../static/image/icon_weixin.png',
				name: '微信'
			}, {
				id: 3,
				image: '../../static/image/lingian.png',
				name: '余额'
			}]
			// #endif
			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.indexOf('micromessenger') !== -1) {
				//公众号是否自动登录  443
				this.$Request.get('/app/common/type/443').then(res => {
					if (res.data && res.data.value && res.data.value == '是') {
						this.openLists = [{
							id: 1,
							image: '../../static/image/icon_weixin.png',
							name: '微信'
						}, {
							id: 3,
							image: '../../static/image/lingian.png',
							name: '余额'
						}];
						this.openWay = 1;
					} else {
						this.openLists = [{
							id: 3,
							image: '../../static/image/lingian.png',
							name: '余额'
						}];
						this.openWay = 3;
					}
				})
			} else {
				this.openLists = [{
					id: 2,
					image: '../../static/image/zhifubao.png',
					name: '支付宝'
				}, {
					id: 3,
					image: '../../static/image/lingian.png',
					name: '余额'
				}];
				this.openWay = 3;
			}
			// #endif
			// #ifdef APP-PLUS
			this.openLists = [{
					id: 1,
					image: '../../static/image/icon_weixin.png',
					name: '微信'
				},
				{
					id: 2,
					image: '../../static/image/zhifubao.png',
					name: '支付宝'
				}, {
					id: 3,
					image: '../../static/image/lingian.png',
					name: '余额'
				}
			]
			this.openWay = 3;
			// #endif
			let that = this
			that.$Request.getT('/app/common/type/364').then(res => { // 每次取消扣除的信用分数量 364
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.creditScore = res.data.value
					}
				}
			})
			that.$Request.getT('/app/common/type/365').then(res => { // 低于多少不能接单和下单 365
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.AllcreditScore = res.data.value
					}
				}
			})
		},
		onShow() {
			if (this.indentNumber) {
				this.timer = setInterval(() => {
					this.getDetail()
				}, 5000)
			}
		},
		onHide() {
			clearInterval(this.timer)
			this.timer = null
		},
		onUnload() {
			clearInterval(this.timer)
			this.timer = null
		},
		methods: {
			getUserInfo(){
				this.$Request.getT('/app/user/selectUserById').then(res => {
					console.log(res)
					if (res.code == 0) {
						this.myPhone = res.data.phone
						this.$queue.setData("userId", res.data.userId);
						this.$queue.setData("mobile", res.data.phone);
						this.$queue.setData("invitationCode", res.data.invitationCode ? res.data.invitationCode :
							'0');
						this.$queue.setData("status", res.data.status);
						this.$queue.setData("nickName", res.data.nickName ? res.data.nickName : res
							.data.userName);
						this.$queue.setData("image_url", this.image_url);
					}
				});
			},
			goMsg() {
				let userId = this.$queue.getData('userId');
				let data = {
					userId: userId,
					focusedUserId: this.order.driver.userId,
					ordersId: this.indentNumber,
					userType: 1
				}
				this.$Request.postJson('/app/chat/insertChatConversation', data).then(res => {
					if (res.code == 0) {
						let id = userId == res.data.userId ? res.data.focusedUserId : res.data.userId
						uni.navigateTo({
							url: '/my/kefu/im?chatConversationId=' + res.data.chatConversationId +
								'&byUserId=' + id + '&ordersId=' + res.data.ordersId
						})
					}
				})
			},
			//初始化地图
			getInitMap() {
				this.$Request.getT('/app/common/type/128').then(res => { //用户端腾讯地图key
					if (res.code === 0) {
						this.qqmapsdk = new QQMapWX({
							key: res.data.value // 自己申请的key值
						})
					}
				});
			},
			goJinji() {
				uni.navigateTo({
					url: '/my/setting/jinji'
				})
			},
			yqSave(item) {
				uni.showModal({
					title: '温馨提示',
					content: '确认邀请当前司机接单吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.$Request.postT('/app/driverRoute/insertMessageByDriver?ordersId=' + this
									.indentNumber + '&driverRouteId=' + item.driverRouteId)
								.then(res => {
									if (res.code == 0) {
										uni.showToast({
											title: '邀请成功，等待车主同意！'
										});
										setTimeout(d => {
											this.getDetail()
										}, 1500)
									} else {
										uni.hideLoading();
										uni.showModal({
											showCancel: false,
											title: '订单邀请失败',
											content: res.msg
										});
									}
								});
						}
					}
				});
			},
			goconz() {
				uni.navigateTo({
					url: '/my/wallet/Txmoney'
				})
			},
			copyClick(copy) {
				uni.setClipboardData({
					data: copy,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: "复制成功",
									icon: 'none',
								});
							},
						});
					},
				});
			},
			// 一键导航
			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)
					}
				});
			},
			goriderMap() { //查看司机位置
				uni.navigateTo({
					url: '/my/order/orderMap?indentNumber=' + this.order.indentNumber
				})
			},
			// 去评价
			bindcomment(e) {
				uni.navigateTo({
					url: '/my/order/comments?indentNumber=' + this.order.indentNumber + '&riderUserId=' + this
						.order.riderUserId
				})
			},
			bindtousu(e) { //投诉
				uni.navigateTo({
					url: '/my/order/complaint?indentNumber=' + this.order.indentNumber + '&riderUserId=' + this
						.order.riderUserId
				})
			},
			selectWay: function(item) {
				this.openWay = item.id;
			},
			orderpay() {
				this.showpay = true
			},
			bindPhone() {
				let ysPhone = this.$queue.getData('ysPhone');
				if (ysPhone === '是') {
					this.$Request.getT('/app/user/insertVirtualPhone?phoneA=' + this.order.driver.phone + '&phoneB=' + this.myPhone).then(
						res => {
							if (res.code == 0) {
								if (res.data) {
									uni.makePhoneCall({
										phoneNumber: res.data //仅为示例
									});
								} else {
									this.$queue.showToast('手机号获取失败！');
								}
							} else {
								this.$queue.showToast(res.msg);
							}
						});
				} else {
					uni.makePhoneCall({
						phoneNumber: this.order.driver.phone //仅为示例
					});
				}
				// uni.makePhoneCall({
				// 	phoneNumber: this.order.driver.phone //仅为示例
				// });
			},
			getsjList() {
				this.$Request.getT('/app/driverRoute/selectDriverRouteList?page=1&limit=40&status=1&ordersId=' + this
						.indentNumber + '&shipCity=' + this.order.shipCity)
					.then(res => {
						if (res.code === 0 && res.data) {
							this.list = res.data.list
						}
						uni.hideLoading()
					});
			},
			getDetail() {
				this.$Request.getT('/app/orders/selectOrdersDetails?ordersId=' + this.indentNumber).then(res => {
					if (res.code === 0) {
						this.order = res.data
						this.getsjList();
						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.order.shipAddressLatitude,
							longitude: this.order.shipAddressLongitude,
							iconPath: '../../static/image/qi.png',
							width: 32,
							height: 44,
							callout: { //自定义标记点上方的气泡窗口 点击有效
								content: this.order.shipAddress, //文本
								color: '#333333', //文字颜色
								fontSize: 10, //文本大小
								padding: 10, //附近留白
								borderRadius: 6, //边框圆角
								bgColor: '#FFFFFF', //背景颜色
								display: 'ALWAYS', //常显
							},
						}, {
							id: 2,
							latitude: this.order.deliveryAddressLatitude,
							longitude: this.order.deliveryAddressLongitude,
							iconPath: '../../static/image/zd.png',
							width: 32,
							height: 44,
							callout: { //自定义标记点上方的气泡窗口 点击有效
								content: this.order.deliveryAddress, //文本
								color: '#333333', //文字颜色
								fontSize: 10, //文本大小
								padding: 10, //附近留白
								borderRadius: 6, //边框圆角
								bgColor: '#FFFFFF', //背景颜色
								display: 'ALWAYS', //常显
							},
						}]
						this.polylines = this.order.polyline
						// #ifdef MP-WEIXIN
						this.routePlanning()
						// #endif
					}
					uni.hideLoading()

				});
			},
			//规划路线
			routePlanning() {
				let that = this
				that.qqmapsdk.direction({
					mode: 'driving', // 驾车
					from: { // 起始位置(当前位置)坐标
						latitude: that.latitude,
						longitude: that.longitude
					},
					to: that.to, // 目的地位置坐标
					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
						}]
					}
				})
			},
			backindex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 取消订单
			bindorderOff() {
				let content = ''
				uni.showModal({
					title: '温馨提示',
					content: '确认取消行程吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.$Request.postT('/app/orders/cancelOrders?ordersId=' + this.indentNumber + '&isDriver=0')
								.then(res => {
									if (res.code == 0) {
										uni.showToast({
											title: '订单取消成功'
										});
										this.getDetail()
									} else {
										uni.hideLoading();
										uni.showModal({
											showCancel: false,
											title: '订单失败',
											content: res.msg
										});
									}
								});
						}
					}
				});
			},
			pay() {
				if (this.openWay == 0) {
					this.$queue.showToast('请选择支付方式!')
					return;
				}
				this.showpay = false;
				if (this.openWay == 1) {
					// #ifdef APP-PLUS
					let data = {
						ordersId: this.indentNumber,
						type: 1
					}
					// 微信APP支付 根据订单id获取支付信息
					this.$Request.postT("/app/wxPay/payOrders", data).then(res => {
						console.log(JSON.stringify(res), '微信支付信息')
						this.isCheckPay(res.code, 'wxpay', JSON.stringify(res.data));
					});
					// #endif
					// #ifdef MP-WEIXIN
					let data = {
						ordersId: this.indentNumber,
						type: 3
					}
					let that = this
					that.$Request.postT("/app/wxPay/payOrders", data).then(res => {
						if (res.code == 0) {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.timestamp,
								nonceStr: res.data.noncestr,
								package: res.data.package,
								signType: res.data.signType,
								paySign: res.data.sign,
								success: function(res) {
									console.log(res)
									uni.hideLoading();
									uni.showToast({
										title: '支付成功',
										icon: 'none'
									});
									setTimeout(function() {
										uni.switchTab({
											url: '/pages/order/order'
										})
									}, 1000)
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
									uni.hideLoading();
									that.$queue.showToast('支付失败');
								}
							});
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					});
					// #endif
					// #ifdef H5
					let ua = navigator.userAgent.toLowerCase();
					if (ua.indexOf('micromessenger') !== -1) {
						let data = {
							ordersId: this.indentNumber,
							type: 2
						}
						this.$Request.postT("/app/wxPay/payOrders", data).then(res => {
							if (res.code == 0) {
								this.callPay(res.data);
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						});
					}
					// #endif
				} else if (this.openWay == 2) {
					// APP支付宝支付
					// #ifdef H5
					let data = {
						ordersId: this.indentNumber,
						type: 1
					}
					this.$Request.postT("/app/aliPay/payOrders", data).then(res => {
						if (res.code == 0) {
							const div = document.createElement('div')
							div.innerHTML = res.data //此处form就是后台返回接收到的数据
							document.body.appendChild(div)
							document.forms[0].submit()
						} else {
							uni.showToast({
								icon: 'none',
								title: '支付失败!'
							});
						}
					});
					// #endif

					// #ifdef APP
					let data = {
						ordersId: this.indentNumber,
						type: 2
					}
					this.$Request.postT("/app/aliPay/payOrders", data).then(res => {
						console.log(JSON.stringify(res), '支付宝支付信息')
						this.isCheckPay(res.code, 'alipay', res.data)
					});
					// #endif
				} else if (this.openWay == 3) {
					let data = {
						ordersId: this.indentNumber
					}
					let that = this
					that.$Request.postT("/app/orders/payOrders", data).then(res => {
						if (res.code == 0) {
							uni.hideLoading();
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							});
							setTimeout(function() {
								that.getDetail();
							}, 1000)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					});
				}
			},
			callPay: function(response) {
				if (typeof WeixinJSBridge === "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
					}
				} else {
					this.onBridgeReady(response);
				}
			},
			onBridgeReady: function(response) {
				let that = this;
				// if (!response.package) {
				// 	return;
				// }
				console.log(response, 111111)
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": response.appid, //公众号名称，由商户传入
						"timeStamp": response.timestamp, //时间戳，自1970年以来的秒数
						"nonceStr": response.noncestr, //随机串
						"package": response.package,
						"signType": response.signType, //微信签名方式：
						"paySign": response.sign //微信签名
					},
					function(res) {
						console.log(res, '/*-/*-/*-')
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							uni.showLoading({
								title: '支付成功'
							});
							setTimeout(function() {
								uni.hideLoading();
								that.getDetail();
							}, 1000);
						} else {
							uni.hideLoading();
						}
						WeixinJSBridge.log(response.err_msg);
					}
				);
			},
			isCheckPay(status, name, order) {
				if (status == 0) {
					this.setPayment(name, order);
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '支付信息有误',
						icon: 'none'
					});
				}
			},
			setPayment(name, order) {
				console.log(name, '*-*-*', order)
				uni.requestPayment({
					provider: name,
					orderInfo: order, //微信、支付宝订单数据
					success: function(res) {
						console.log(res)
						uni.hideLoading();
						uni.showLoading({
							title: '支付成功'
						});
						setTimeout(function() {
							that.getDetail();
						}, 1000);
					},
					fail: function(err) {
						console.log(err)
						uni.hideLoading();
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
		}
	}
</script>

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

	.orderMap {
		width: 100%;
		height: 230rpx;
		border-radius: 14rpx;
	}

	.sos {
		width: 70rpx;
		height: 70rpx;
		position: fixed;
		bottom: 290rpx;
		left: 32rpx;
		z-index: 99;
		
		image {
			width: 70rpx;
			height: 70rpx;
		}
	}

	.bg {
		background: #FFFFFF;
	}

	.order_money {
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 38rpx;
		color: #FF4B36;
	}

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

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

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

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

	.sj_name {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}

	.top_box {
		width: 686rpx;
		// height: 370rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 30rpx;
		padding: 30rpx;
		position: relative;
		margin-top: -230rpx;
		z-index: 99;

		.cph_item {
			width: 624rpx;
			height: 220rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			// align-items: center;

			image {
				width: 250rpx;
				height: 110rpx;
				margin-top: 30rpx;
			}

			.cphitem_name {
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 38rpx;
				color: #1A1A1A;
			}

			.blackdian {
				width: 6rpx;
				height: 6rpx;
				background: #333333;
				border-radius: 50%;
				margin-right: 10rpx;
				margin-left: 10rpx;
			}

			.sj_sg {
				width: 1rpx;
				height: 20rpx;
				border: 1rpx solid #A0A0A0;
				margin: 0rpx 20rpx;
			}
		}


		.topbox_addview {
			width: 624rpx;
			min-height: 100rpx;
			background: #EFF4FF;
			border-radius: 16rpx;
			border: 1px solid #346EF6;
			margin: 0 auto;
			// display: flex;
			align-items: center;
			padding: 20rpx 30rpx;

			image {
				width: 6rpx;
				height: 24rpx;
				margin-left: 6rpx;
			}


			.topbox_title {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #151515;
			}
		}
	}

	.topbox_addName {
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 28rpx;
		color: #1A1A1A;
		width: 520rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.top_view {
		width: 750rpx;
		height: 325rpx;
		background: linear-gradient(to bottom, #346EF6 0%, #8EB0FF 70%, #F5F5F5 90%);
		padding: 40rpx;
		position: relative;

		.top_title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 38rpx;
			color: #FFFFFF;
		}
	}

	.list_item {
		width: 686rpx;
		// height: 366rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-top: 20rpx;

		.item_time {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #242424;
		}

		.item_addName {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #1A1A1A;
			width: 520rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.item_juli {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #999999;
			width: 100rpx;
			text-align: right;
		}

		.item_xunzhao {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #999999;
		}

		.item_btn {
			width: 150rpx;
			height: 58rpx;
			background: #346EF6;
			border-radius: 29rpx;
			text-align: center;
			line-height: 58rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
		}

		.item_btns {
			width: 150rpx;
			height: 58rpx;
			border: 2px solid #232323;
			border-radius: 29rpx;
			text-align: center;
			line-height: 52rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #232323;
		}

		.item_shunlu {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #346EF6;
			margin-left: 20rpx;
		}

		image {
			width: 68rpx;
			height: 68rpx;
		}
	}

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

	.titls {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	
	.titls2 {
		font-size: 32rpx;
		font-family: PingFang SC;
		color: #333333;
	}

	.bb {
		width: 110rpx;
		height: 38rpx;
		// background: #49A5FF;
		// opacity: 0.32;
		background-color: rgba(73, 165, 255, 0.3);
		border-radius: 4rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #359CFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
	}

	.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;

	}

	.empty {
		width: 100%;
		background: #ffffff;
		height: 800rpx;
		margin-top: 20rpx;
		padding-top: 200rpx;
	}

	.order_btn {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 30rpx;

		.btn3 {
			width: 150rpx;
			height: 60rpx;
			border: 1px solid #CCCCCC;
			border-radius: 50rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.btn2 {
			width: 150rpx;
			height: 60rpx;
			background: #EFF4FF;
			border: 1px solid #346EF6;
			border-radius: 50rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			line-height: 60rpx;
			font-weight: 500;
			color: #346EF6;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.btn1 {
			width: 150rpx;
			height: 60rpx;
			border: 1px solid #999999;
			border-radius: 50rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 60rpx;
			color: #999999;
			display: flex;
			align-items: center;
			justify-content: center;

		}
	}

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

	.bg {
		background: #F5F5F5;
	}

	.bgs {
		background: #F5F8FF;

	}


	.tabber {
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9;
		display: flex;
		align-items: center;
		justify-content: end;
		padding: 10rpx 30rpx;

		.btn {
			flex: 1;
			// width: 330rpx;
			height: 78rpx;
			border: 1px solid #A0A0A0;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #9C9C9C;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.btn1 {
			// width: 330rpx;
			flex: 1;
			height: 78rpx;
			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;
		}

		.btn2 {
			flex: 1;
			// width: 330rpx;
			height: 78rpx;
			background: #3699FF;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	/* 支付弹框 */
	.popup_pay {
		width: 100%;
	}

	.pay_btns {
		width: 90%;
		margin: 0 auto 40rpx;
		text-align: center;
		background: #3699FF;
		height: 80rpx;
		border-radius: 16rpx;
		color: #ffffff;
		line-height: 80rpx;
		margin-top: 20rpx;
	}
</style>