秋香代驾对接

api/trip.js

@@ -0,0 +1,60 @@
+import {request} from '@/utils/request.js'
+
+// ​/qx​/addOrder
+// 下单
+export function addOrder(data) {
+	return request({
+		url: '/springbatchservice/qx/addOrder',
+		method: 'post',
+		data
+	})
+}
+
+// /qx/cancelOrder
+// 取消订单
+export function cancelOrder(data) {
+	return request({
+		url: '/springbatchservice/qx/cancelOrder',
+		method: 'post',
+		data
+	})
+}
+
+// /qx/driverLocation
+// 司机位置
+export function driverLocation(data) {
+	return request({
+		url: '/springbatchservice/qx/driverLocation',
+		method: 'post',
+		data
+	})
+}
+
+// /qx/driverLocationLog
+// 司机位置日志
+export function driverLocationLog(data) {
+	return request({
+		url: '/springbatchservice/qx/driverLocationLog',
+		method: 'post',
+		data
+	})
+}
+
+// /qx/orderDelit/{orderId}
+// 订单详情
+export function orderDelit(data) {
+	return request({
+		url: '/springbatchservice/qx/orderDelit/'+data,
+		method:'get'
+	})
+}
+
+// /qx/orderList
+// 订单列表
+export function orderList(data) {
+	return request({
+		url: '/springbatchservice/qx/orderList',
+		method: 'post',
+		data
+	})
+}

my/order/index.vue

@@ -137,6 +137,10 @@
 					uni.navigateTo({
 						url: '/my/order/signUp/signUpDetail?id='+item.orderNo
 					})
+				}else if(item.goodsModelList[0].jobFlowMap == 'QiuXiang'){
+					uni.navigateTo({
+						url: '/my/order/trip/detail?id='+item.orderNo
+					})
 				}else{
 					uni.navigateTo({
 						url: './detail?id='+item.orderNo

my/order/trip/detail.vue

@@ -0,0 +1,341 @@
+<template>
+	<view class="order-detail">
+		<zs-skeleton type="orderDetail" :loading="pageLoading"></zs-skeleton>
+		<view class="status-box">
+			<view class="text-box">
+				<view class="status">
+					{{ info.goodsList[0] | filterType }}
+				</view>
+			</view>
+		</view>
+		<view class="content">
+			<view class="title">
+				行程信息
+			</view>
+
+			<view class="item">
+				<view class="label">
+					下单时间
+				</view>
+				<view class="value">
+					{{ info.goodsList[0].extend.createTime }}
+				</view>
+			</view>
+
+
+			<view class="item">
+				<view class="label">
+					出发地点
+				</view>
+				<view class="value">
+					{{ info.goodsList[0].goodsInfo.originName }}
+				</view>
+			</view>
+			<view class="item">
+				<view class="label">
+					到达地点
+				</view>
+				<view class="value ">
+					{{ info.goodsList[0].goodsInfo.destinationName }}
+				</view>
+			</view>
+
+			<view class="price-box">
+				<view class="price">
+					{{ info.goodsList[0].payAmount }} 元
+				</view>
+				<view class="text" @click="clickDetail">
+					<view>收费明细</view>
+					<image class="img" :class="show ? 'deg90' : '-deg90'" src="@/static/jiantou-icon.png"></image>
+				</view>
+			</view>
+
+			<template v-if="show">
+				<view class="item" :key="index" v-for="(item, index) in info.goodsList[0].extend.priceItems">
+					<view class="label">
+						{{ item.title }}
+					</view>
+					<view class="value">
+						{{ item.value }}元
+					</view>
+				</view>
+			</template>
+
+			<view class="title" style="	margin-top: 28rpx;">
+				全程{{ distance / 1000 }}公里，{{ isNaN(minutes) ? 0 : minutes }}分钟
+			</view>
+		</view>
+
+
+
+		<view class="content">
+			<view class="title">
+				订单信息
+			</view>
+			<view class="item">
+				<view class="label">
+					订单编号
+				</view>
+				<view class="value">
+					{{ info.orderNo }}
+				</view>
+			</view>
+
+			<view class="item" v-if="info.goodsList[0].goodsState == 'USED'">
+				<view class="label">
+					付款方式
+				</view>
+				<view class="value">
+					线下支付
+				</view>
+			</view>
+		</view>
+
+		<button type="default" :loading="btnLoading" class="pay-btn" v-if="info.goodsList[0].goodsState == 'WAIT_PAYMENT'"
+			@click="toTrip">前往订单</button>
+
+	</view>
+</template>
+
+<script>
+var QQMapWX = require('@/libs/qqmap-wx-jssdk.min.js');
+var qqmapsdk = new QQMapWX({
+	key: 'KX5BZ-B64RC-RO62W-AMWAZ-VVTC3-YAFXF'
+});
+import { payDetails } from '@/api/payment.js';
+export default {
+	data() {
+		return {
+			isVisual: false,//是否是虚拟商品
+			codeData: '123',
+			show: false,
+			loading: false,
+			pageLoading: true,
+			info: {
+				goodsList: [{
+					goodsState: 'CLOSE', serviceFee: 0, extend: {
+
+					}
+				}]
+			},
+			distance: 0,
+			minutes: 0
+		}
+	},
+	watch: {
+		// isNotTime(val) {
+		// 	if(this.isNotTime){
+		// 		this.payDetails(this.info.orderNo)
+		// 	}
+		// }
+	},
+	filters: {
+		filterType: function (val) {
+			if (val.refundLog && val.refundLog.refund == 'REFUSAL_REFUND' && !val.change) {
+				return '拒绝退款'
+			}
+			else if (val.goodsState == 'APPLY_REFUND') {
+				return '退款审核中'
+			} else if (val.goodsState == 'CLOSE') {
+				return '关闭订单'
+			} else if (val.goodsState == 'REFUNDED') {
+				return '已退款'
+			} else if (val.goodsState == 'REFUSAL_REFUND') {
+				return '拒绝退款'
+			} else if (val.goodsState == 'APPLY_REFUNDING') {
+				return '退款中'
+			} else if (val.goodsState == 'USED') {
+				return '已结束'
+			} else if (val.goodsState == 'WAIT_PAYMENT') {
+				return '进行中'
+			} else if (val.goodsState == 'WAIT_USE') {
+				return '待使用'
+			} else {
+				return ''
+			}
+		},
+
+	},
+
+	methods: {
+		toTrip() {
+			uni.redirectTo({
+				url: '/trip/index/index'
+			});
+		},
+		close() {
+			this.show = false
+		},
+		// 获取订单详情
+		payDetails(orderNo) {
+			payDetails(orderNo).then(res => {
+				this.pageLoading = false
+				this.info = res.content
+
+				// 计算开始和结束的距离
+				const destinationLongitude = this.info.goodsList[0].extend.destinationLongitude
+				const destinationLatitude = this.info.goodsList[0].extend.destinationLatitude
+				const originLongitude = this.info.goodsList[0].extend.originLongitude
+				const originLatitude = this.info.goodsList[0].extend.originLatitude
+
+				qqmapsdk.calculateDistance({
+					mode: 'driving',
+					from: {
+						latitude: originLatitude,
+						longitude: originLongitude
+					},
+					to: [{
+						latitude: destinationLatitude,
+						longitude: destinationLongitude
+					}],
+					success: (res) => {
+						console.log(res)
+						if (res.message === 'Success') {
+							this.distance = res.result.elements[0].distance.toFixed(2)
+						}
+					}
+				})
+				// 计算订单开始到结束的耗时
+				// driverEndTime
+				// startTime
+
+				const driverEndTime = new Date(this.info.goodsList[0].extend.driverEndTime).getTime()
+				const startTime = new Date(this.info.goodsList[0].extend.startTime).getTime()
+				const time = driverEndTime - startTime
+				// 转换为分钟数
+				this.minutes = (time / 1000 / 60).toFixed(2)
+
+			})
+		},
+		clickDetail() {
+			this.show = !this.show
+		}
+
+
+	},
+	onReady() {
+
+	},
+	onLoad(options) {
+		this.info.orderNo = options.id
+	},
+	onShow() {
+		this.pageLoading = true
+		this.payDetails(this.info.orderNo)
+	},
+	created() {
+		// this.info = JSON.parse(uni.getStorageSync('order'))
+	}
+}
+</script>
+
+<style lang="scss">
+.order-detail {
+	background: #F9F9F9;
+	min-height: 100vh;
+	padding-bottom: 100rpx;
+
+	.status-box {
+		padding: 24rpx 24rpx 4rpx;
+		display: flex;
+		justify-content: space-between;
+
+		.text-box {
+			color: #181818;
+
+			.status {
+				font-weight: bold;
+				font-size: 32rpx;
+				display: flex;
+
+				.u-count-down__text {
+					color: $uni-color-primary !important;
+				}
+			}
+
+			.notice {
+				font-size: 24rpx;
+				margin-top: 20rpx;
+			}
+		}
+	}
+
+	.pay-btn {
+		background: $uni-color-primary;
+		width: 688rpx;
+		height: 80rpx;
+		line-height: 80rpx;
+		border-radius: 46rpx;
+		color: #fff;
+		margin-top: 50rpx;
+	}
+
+	.content {
+		margin: 20rpx 30rpx;
+		padding: 28rpx 24rpx;
+		border-radius: 16rpx;
+		background: #fff;
+
+		.title {
+			font-weight: 600;
+			font-size: 28rpx;
+			color: #222222;
+		}
+
+		.item {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-top: 28rpx;
+
+			.label {
+				font-size: 28rpx;
+				color: #AAAAAA;
+			}
+
+			.value {
+				font-size: 28rpx;
+				color: #222222;
+			}
+		}
+
+		.price-box {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-top: 28rpx;
+
+			.price {
+				font-size: 36rpx;
+				font-weight: bold;
+				color: #222222;
+			}
+
+			.text {
+				font-size: 24rpx;
+				color: #AAAAAA;
+				display: flex;
+				align-items: center;
+
+				.img {
+					margin-left: 16rpx;
+					width: 24rpx;
+					height: 24rpx;
+
+				}
+
+				.deg90 {
+					rotate: 90deg;
+				}
+
+				.-deg90 {
+					rotate: -90deg;
+				}
+			}
+		}
+
+
+
+	}
+}
+</style>

pages.json

@@ -4,7 +4,7 @@
 		"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
 	},
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
+	{
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": "慧研学惠生活",
@@ -260,6 +260,12 @@
 						"navigationBarTitleText": "订单详情"
 					}
 				},
+				{
+					"path": "order/trip/detail",
+					"style": {
+						"navigationBarTitleText": "订单详情"
+					}
+				},
 				{
 					"path": "order/webView",
 					"style": {

trip/expense/index.vue

@@ -1,69 +1,24 @@
 <template>
 	<view class="expense">
 		<view class="block">
-			<view class="item title">
-				<view class="label">
-					起步价
-				</view>
-				<view class="value">
-					30元
-				</view>
-			</view>
-			<view class="item title">
+			<view class="item title" v-for="(item, i) in priceItems" :key="i"
+				:class="i == priceItems.length - 1 ? 'border' : ''">
 				<view class="label">
-					里程费（共30公里）
+					{{ item.title }}
 				</view>
 				<view class="value">
-					42元
+					{{ item.value }}元
 				</view>
 			</view>
-			<view class="item">
-				<view class="label">
-					起步里程（含5.0公里）
-				</view>
-				<view class="value">
-					0元
-				</view>
-			</view>
-			<view class="item">
-				<view class="label">
-					收费里程（含6.0公里）
-				</view>
-				<view class="value">
-					10.05元
-				</view>
-			</view>
-			<view class="item title border">
-				<view class="label">
-					远途费
-				</view>
-				<view class="value">
-					10.05元
-				</view>
-			</view>
-			<view class="item">
-				<view class="label">
-					合计
-				</view>
-				<view class="value">
-					72.05元
-				</view>
-			</view>
-			
-			
 			<view class="total">
-				预估金额 <text class="num">72.15</text>   元
+				预估金额 <text class="num">{{ getPrice }}</text> 元
 			</view>
 			<view class="notice">
 				预付费用是根据实时交通情况、预估行驶里程、时间等因素计算
 				得出，存在波动，仅供参考。（行程调整、路线修改、高速费等
 				将影响最终价格）
 			</view>
-			
-			
-			
 		</view>
-		
 		<view class="block">
 			<view class="item title">
 				<view class="label">
@@ -71,7 +26,7 @@
 				</view>
 				<image class="jiantou" src="../../static/jiantou-icon.png" mode=""></image>
 			</view>
-			
+
 			<view class="item title">
 				<view class="label">
 					常见问题
@@ -79,68 +34,87 @@
 				<image class="jiantou" src="../../static/jiantou-icon.png" mode=""></image>
 			</view>
 		</view>
-		
+
 	</view>
 </template>
 
 <script>
-	export default {
-
+export default {
+	data() {
+		return {
+			priceItems: []
+		}
+	},
+	onLoad({ priceItems }) {
+		if (priceItems) {
+			this.priceItems = JSON.parse(priceItems)
+		}
+	},
+	computed:{
+		getPrice(){
+			return this.priceItems.reduce((total, item) => total + item.value, 0);
+		}
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.expense {
-		background: #f5f5f5;
-		height: 100vh;
-		padding-top: 20rpx;
-		.block {
-			margin-bottom: 20rpx;
-			background: #fff;
-			padding: 28rpx 34rpx;
-		}
+.expense {
+	background: #f5f5f5;
+	height: 100vh;
+	padding-top: 20rpx;
 
-		.item {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			color: #AAAAAA;
-			font-size: 28rpx;
-			line-height: 70rpx;
-			position: relative;
-			.jiantou{
-				position: absolute;
-				top: 50%;
-				right: 0%;
-				transform: translateY(-50%);
-				width: 20rpx;
-				height: 20rpx;
-			}
-		}
+	.block {
+		margin-bottom: 20rpx;
+		background: #fff;
+		padding: 28rpx 34rpx;
+	}
 
-		.item.title {
-			color: #222222;
-		}
-		.item.border {
-			border-bottom: 2rpx solid #F0F0F0;
-			padding-bottom: 20rpx;
-			margin-bottom: 20rpx;
-		}
-		
-		.total{
-			text-align: right;
-			color: #222222;
-			font-size: 28rpx;
-			margin: 28rpx 0;
-			.num{
-				font-weight: bold;
-				font-size: 36rpx;
-			}
+	.item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		color: #AAAAAA;
+		font-size: 28rpx;
+		line-height: 70rpx;
+		position: relative;
+
+		.jiantou {
+			position: absolute;
+			top: 50%;
+			right: 0%;
+			transform: translateY(-50%);
+			width: 20rpx;
+			height: 20rpx;
 		}
-		.notice{
-			color: #AAAAAA;
-			font-size: 24rpx;
+	}
+
+	.item.title {
+		color: #222222;
+	}
+
+	.item.border {
+		border-bottom: 2rpx solid #F0F0F0;
+		padding-bottom: 20rpx;
+		margin-bottom: 20rpx;
+	}
+
+	.total {
+		text-align: right;
+		color: #222222;
+		font-size: 28rpx;
+		margin: 28rpx 0;
+
+		.num {
+			font-weight: bold;
+			font-size: 36rpx;
 		}
-		
 	}
+
+	.notice {
+		color: #AAAAAA;
+		font-size: 24rpx;
+	}
+
+}
 </style>

trip/index/index.vue

@@ -1,528 +1,1428 @@
 <template>
 	<view class="trip">
-		<zs-header title="出行" color="#000" ></zs-header>
-		<map id="Map" class="map" style="width: 100%;" :longitude="longitude" :latitude="latitude" 
+		<zs-header title="出行" :backCall="backCall" color="#000"></zs-header>
+		<map id="Map" class="map" style="width: 100%;" :scale="scale" :longitude="longitude" :latitude="latitude"
 			:includePoints="includePoints" enable-poi :polyline="polyline" show-location :markers="markers"
 			@regionchange="mapChange">
 			<image class="current" v-show="step == 1" src="../../static/current.png" mode=""></image>
 			<image class="btn" src="../../static/map-position.png" mode="" @click="myPosition"></image>
 		</map>
 		<view class="content">
-			<template v-if="step == 1">
-				<image class="bg" src="http://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/4wLUSMH6JJgI8c0598e7a5597db70d809806a0f0541f.png/1.png" mode=""></image>
-				<view class="title" @click="go">
-					专业代驾·安全无忧
-				</view>
-				<view class="desc">
-					首次体验领66代驾券
-				</view>
 
+			<!-- 选择地址 -->
+			<template v-if="step == 1 || step == 2">
+				<image class="img"
+					src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/65fe8e5874d67a7dbd842c5a/ext/GOODS_INFO/j.png/1.png">
+				</image>
 				<view class="operation">
 					<view class="start-box" @click="chooseAddress('start')">
-						<view class="point"></view>
 						<view class="start">
-							您将从 <text class="green">{{form.start}}</text> 出发
+							<view class="point"></view>
+							您将从 <text class="green">{{ form.start }}</text> 出发
 						</view>
+						<image class="jiantou" src="../../static/jiantou-icon.png" mode=""></image>
 					</view>
 					<view class="end" @click="chooseAddress('end')">
-						{{form.end||'您想去哪里'}}
+						<view class="point"></view>
+						{{ form.end || '您想去哪里' }}
+					</view>
+					<u-button @click="call()" color="#FF4A39" shape="circle" :loading="loading">
+						呼叫秋香代驾
+					</u-button>
+				</view>
+			</template>
+
+			<!-- 呼叫订单 -->
+			<template v-if="step == 3">
+				<view class="call-operation">
+					<view class="title">正在全力为您寻找司机 {{ formatTimer }}</view>
+					<view class="call-img">
+						<image
+							src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/65fe8e5874d67a7dbd842c5a/ext/GOODS_INFO/路径 7911@2x.png/2.png">
+						</image>
+					</view>
+					<view class="call-btn">
+						<u-button type="info" @click="hangup()" shape="circle">
+							取消订单
+						</u-button>
 					</view>
 				</view>
 			</template>
-			<template v-else>
-				<view class="charging-box">
-					<view class="box">
-						<view class="item"  @click="chooseAddress('start')">
-							{{form.start}}
-							<image class="jiantou" src="../../static/jiantou-icon.png" mode=""></image>
+
+			<!-- 代驾到位 -->
+			<template v-if="step == 4">
+				<view class="driver-operation">
+					<view class="desc">
+						<viwe class="title">
+							<view class="desc-title">
+								司机正在赶来，请耐心等待
+							</view>
+							<view class="desc-subtitle">
+								如需取消订单，请联系司机或客服人员
+							</view>
+						</viwe>
+						<view class="car-img">
+							<image
+								src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/65fe8e5874d67a7dbd842c5a/ext/GOODS_INFO/微信截图_20240815144439-removebg-preview@2x.png/1.png">
+
+							</image>
 						</view>
-						<view class="item"  @click="chooseAddress('end')">
-							{{form.end}}
-							<image class="jiantou" src="../../static/jiantou-icon.png" mode=""></image>
+					</view>
+					<view class="driver-card">
+						<view class="driver">
+							<view class="driver-avatar">
+								<u-avatar shape="circle" size="100" :src="`https://file.qxtech.top/${driver.driverAvatar}-200.jpg`">
+								</u-avatar>
+							</view>
+							<view class="driver-info">
+								<view class="driver-name">{{ driver.driverName + ' ' + driver.driverId || '' }}</view>
+								<view class="driver-car">秋香代驾</view>
+							</view>
+							<view class="driver-option">
+								<view class="customer">
+									<image
+										src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/65fe8e5874d67a7dbd842c5a/ext/GOODS_INFO/组 8090@2x.png/1.png"
+										mode=""></image>
+								</view>
+								<view class="call">
+									<image
+										src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/65fe8e5874d67a7dbd842c5a/ext/GOODS_INFO/组 8089@2x.png/1.png"
+										mode=""></image>
+								</view>
+
+							</view>
 						</view>
-						<view class="price" @click="jump('../expense/index')">
-							预计 <text class="num">{{form.taxi_fare}}</text>元
-							<image class="jiantou" src="../../static/jiantou-icon.png" mode=""></image>
+						<view class="price-box" @click="jump('../expense/index?priceItems='+JSON.stringify(priceItems))">
+							<view class="price">预估<text>{{ driver.payPrice }}</text>元</view>
+							<view class="jiantou">
+								<image src="../../static/jiantou-icon.png" mode=""></image>
+							</view>
 						</view>
 					</view>
-				<view class="btn">
-					呼叫秋香代驾
 				</view>
+			</template>
+
+			<template v-if="step == 5">
+				<view class="await-operation">
+					<view class="desc">
+						<viwe class="title">
+							<view class="desc-title">
+								等待中...
+							</view>
+							<view class="desc-subtitle">
+								司机已到达，为避免额外费用，请尽快联系
+							</view>
+						</viwe>
+						<view class="car-img">
+							<image
+								src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/65fe8e5874d67a7dbd842c5a/ext/GOODS_INFO/微信截图_20240815144439-removebg-preview@2x.png/1.png">
+							</image>
+						</view>
+					</view>
+					<view class="driver-card">
+						<view class="driver">
+							<view class="driver-avatar">
+								<u-avatar shape="circle" size="100" :src="`https://file.qxtech.top/${driver.driverAvatar}-200.jpg`">
+								</u-avatar>
+							</view>
+							<view class="driver-info">
+								<view class="driver-name">{{ driver.driverName || '王师傅 编号D1002' }}</view>
+								<view class="driver-car">秋香代驾</view>
+							</view>
+							<view class="driver-option">
+								<view class="customer">
+									<image
+										src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/65fe8e5874d67a7dbd842c5a/ext/GOODS_INFO/组 8090@2x.png/1.png"
+										mode=""></image>
+								</view>
+								<view class="call">
+									<image
+										src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/65fe8e5874d67a7dbd842c5a/ext/GOODS_INFO/组 8089@2x.png/1.png"
+										mode=""></image>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</template>
+
+
+			<!-- 开始订单 -->
+			<template v-if="step == 6">
+				<view class="drivering-operation">
+					<view class="desc">
+						<viwe class="title">
+							<view class="desc-title">
+								行驶中
+							</view>
+							<view class="desc-subtitle">
+								如需取消订单，请联系司机或客服人员
+							</view>
+						</viwe>
+						<view class="car-img">
+							<image
+								src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/65fe8e5874d67a7dbd842c5a/ext/GOODS_INFO/微信截图_20240815144439-removebg-preview@2x.png/1.png">
+							</image>
+						</view>
+					</view>
+					<view class="driver-card">
+						<view class="driver">
+							<view class="driver-avatar">
+								<u-avatar shape="circle" size="100" :src="`https://file.qxtech.top/${driver.driverAvatar}-200.jpg`">
+								</u-avatar>
+							</view>
+							<view class="driver-info">
+								<view class="driver-name">{{ driver.driverName || '王师傅 编号D1002' }}</view>
+								<view class="driver-car">秋香代驾</view>
+							</view>
+							<view class="driver-option">
+								<view class="customer">
+									<image
+										src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/65fe8e5874d67a7dbd842c5a/ext/GOODS_INFO/组 8090@2x.png/1.png"
+										mode=""></image>
+								</view>
+								<view class="call">
+									<image
+										src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/65fe8e5874d67a7dbd842c5a/ext/GOODS_INFO/组 8089@2x.png/1.png"
+										mode=""></image>
+								</view>
+							</view>
+						</view>
+					</view>
 				</view>
 			</template>
 
+			<!-- 订单完成 -->
+			<template v-if="step == 7">
+				<view class="order-operation">
+					<view class="desc">
+						<viwe class="title">
+							<view class="desc-title">
+								订单完成
+							</view>
+							<view class="desc-subtitle">
+								请使用微信扫码完成支付，如对价格有疑问，请联系客服人员
+							</view>
+						</viwe>
+						<view class="car-img">
+							<image
+								src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/65fe8e5874d67a7dbd842c5a/ext/GOODS_INFO/微信截图_20240815144439-removebg-preview@2x.png/1.png">
+							</image>
+						</view>
+					</view>
+					<view class="driver-card">
+						<view class="driver">
+							<view class="driver-avatar">
+								<u-avatar shape="circle" size="100" :src="`https://file.qxtech.top/${driver.driverAvatar}-200.jpg`">
+								</u-avatar>
+							</view>
+							<view class="driver-info">
+								<view class="driver-name">{{ driver.driverName || '王师傅 编号D1002' }}</view>
+								<view class="driver-car">秋香代驾</view>
+							</view>
+							<view class="driver-option">
+								<view class="customer">
+									<image
+										src="http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/65fe8e5874d67a7dbd842c5a/ext/GOODS_INFO/组 8090@2x.png/1.png"
+										mode=""></image>
+								</view>
+							</view>
+
+						</view>
+						<view class="price-box" @click="jump('../expense/index?priceItems='+JSON.stringify(priceItems))">
+							<view class="price">需支付<text>{{ driver.payPrice }}</text>元</view>
+							<view class="jiantou">
+								<image src="../../static/jiantou-icon.png" mode=""></image>
+							</view>
+						</view>
+					</view>
+
+				</view>
+			</template>
 
 		</view>
+		<u-action-sheet :actions="optionList" :closeOnClickOverlay="true" :closeOnClickAction="true"
+			@close="hangupShow = false" @select="selectClick" title="取消原因" cancelText="取消" :safeAreaInsetBottom="true"
+			:show="hangupShow">
+		</u-action-sheet>
 	</view>
 </template>
 
 <script>
-	// 高德地图
-	var amapFile = require('../../libs/amap-wx.130.js');
-	var AMap = new amapFile.AMapWX({
-		key: '0ebb337dd2e77cb84e40525a5b80d640'
-	});
-	// 腾讯地图
-	var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
-	var qqmapsdk = new QQMapWX({
-		key: 'KX5BZ-B64RC-RO62W-AMWAZ-VVTC3-YAFXF'
-	});
-	import {earthDistance} from '@/utils/tool.js'
-	export default {
-		data() {
-			return {
-				step: 1, //
-				map: null,
+// 高德地图
+// var amapFile = require('../../libs/amap-wx.130.js');
+// var AMap = new amapFile.AMapWX({
+// 	key: '0ebb337dd2e77cb84e40525a5b80d640'
+// });
+// 腾讯地图
+var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
+var qqmapsdk = new QQMapWX({
+	key: 'KX5BZ-B64RC-RO62W-AMWAZ-VVTC3-YAFXF'
+});
+import { mixin } from './mixin/index.js';
+export default {
+	data() {
+		return {
+			step: 1,
+			map: null,
+			longitude: 0,
+			latitude: 0,
+			polyline: 0,
+			scale: 17,
+			flag: false, //
+			markers: [],
+			mapCenter: {
 				longitude: 0,
-				latitude: 0,
-				polyline: 0,
-				scale: 19,
-				flag: false, //
-				markers: [],
-				mapCenter: {
-					longitude: 0,
-					latitude: 0
+				latitude: 0
+			},
+			includePoints: [],
+			form: {
+				adcode: '',
+				start: '',
+				startLocation: {
+					lat: 0,
+					lng: 0
+				},
+				end: '',
+				endLocation: {
+					lat: 0,
+					lng: 0
 				},
-				includePoints: [],
-				form: {
-					start: '',
-					startLocation: {
-						lat: 0,
-						lng: 0
+				taxi_fare: 0
+			},
+			isDraw: false,
+			isCarDraw: false
+		}
+	},
+	mixins: [mixin],
+	methods: {
+		backCall(step) {
+		},
+		// 跳转
+		jump(url) {
+			uni.navigateTo({
+				url
+			})
+		},
+		// 回到我的位置
+		myPosition() {
+			let that = this
+			uni.getLocation({
+				type: 'gcj02',
+				success(res) {
+					that.map.moveToLocation({
+						longitude: res.longitude,
+						latitude: res.latitude
+					})
+				}
+			})
+		},
+		// 地图拖动
+		mapChange(val) {
+			// 绘制出路线后 就不能拖动地图选择起点
+			console.log(val)
+			console.log(this.map.getScale().then(res => { console.log(res) }))
+			if (this.step != 1) return
+			let that = this
+			if (val.type == 'end') {
+				this.mapCenter = val.target.centerLocation
+
+				qqmapsdk.reverseGeocoder({
+					location: {
+						longitude: val.target.centerLocation.longitude,
+						latitude: val.target.centerLocation.latitude
 					},
-					end: '',
-					endLocation: {
-						lat: 0,
-						lng: 0
+					poi_options: 'policy=3&address_format=short&radius=30',
+					get_poi: 1,
+					success(r) {
+						console.log('地图拖动', r);
+						if (r.result.address_reference.landmark_l2._dir_desc == '内') {
+
+						}
+
+						// 获取最近的店铺
+						// let arr = r.result.pois.sort((a, b) => { return a._distance - b._distance })
+						that.form.adcode = r.result.pois[0].ad_info.adcode
+						that.form.start = r.result.pois[0].title
+						that.form.startLocation = r.result.pois[0].location
+						uni.setStorageSync('city', r.result.address_component.city)
 					},
-					taxi_fare:0
-				}
+					fail(e) {
+						console.log('错误', e);
+					}
+				})
+
 			}
 		},
-		methods: {
-			// 跳转
-			jump(url){
-				uni.navigateTo({
-					url
-				})
-			},
-			// 回到我的位置
-			myPosition() {
-				let that = this
-				uni.getLocation({
-					type: 'gcj02',
-					success(res) {
-						that.map.moveToLocation({
-							longitude: res.longitude,
-							latitude: res.latitude
-						})
+		// 选择地址
+		chooseAddress(type) {
+			uni.setStorageSync('form', JSON.stringify(this.form))
+			uni.navigateTo({
+				url: '../chooseAddress/index?type=' + type
+			})
 
+		},
+		// 获取当前经纬度
+		initPosition() {
+			let that = this
+			uni.getLocation({
+				type: 'gcj02',
+				success(res) {
+					console.log(res);
+					that.longitude = res.longitude
+					that.latitude = res.latitude
+					that.mapCenter = {
+						longitude: res.longitude,
+						latitude: res.latitude
 					}
-				})
-			},
-			// 地图拖动
-			mapChange(val) {
-				// 绘制出路线后 就不能拖动地图选择起点
-				if(this.step == 2) return
-				let that = this
-				if (val.type == 'end') {
-					this.mapCenter = val.target.centerLocation
-					// 高德
-					// AMap.getPoiAround({
-					// 	location:`${val.target.centerLocation.latitude},${val.target.centerLocation.longitude}`,
-					// 	success(res){
-					// 		console.log(111111111,res)
-					// 	}
-					// })
-				
-					qqmapsdk.reverseGeocoder({
-						location: {
-							longitude: val.target.centerLocation.longitude,
-							latitude: val.target.centerLocation.latitude
-						},
-						poi_options: 'policy=3&address_format=short&radius=30',
-						get_poi: 1,
-						success(r) {
-							console.log('地图拖动',r);
-							if (r.result.address_reference.landmark_l2._dir_desc == '内') {
-							
+					that.myPosition()
+				}
+			})
+		},
+		//绘制路线
+		go(unset = false) {
+			if (!unset) {
+				this.step = 2
+			}
+			var _this = this;
+			//调用距离计算接口
+			qqmapsdk.direction({
+				mode: 'driving', //可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
+				//from参数不填默认当前地址
+				from: `${_this.form.startLocation.lat},${_this.form.startLocation.lng}`,
+				to: `${_this.form.endLocation.lat},${_this.form.endLocation.lng}`,
+				success: function (res) {
+					console.log('地图绘制', res);
+					_this.form.taxi_fare = res.result.routes[0].taxi_fare.fare
+					var ret = res;
+					var coors = ret.result.routes[0].polyline,
+						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属性，将路线显示出来,将解压坐标第一个数据作为起点
+					_this.latitude = pl[0].latitude
+					_this.longitude = pl[0].longitude
+
+					_this.map.addMarkers({
+						markers: [{
+							id: 101,
+							latitude: _this.form.startLocation.lat,
+							longitude: _this.form.startLocation.lng,
+							width: '41px',
+							height: '47px',
+							iconPath: '/static/start.png',
+							callout: {
+								content: _this.form.start,
+								bgColor: '#fff',
+								color: '#222',
+								borderRadius: '50%',
+								fontSize: '14px',
+								padding: '8px',
+								display: 'ALWAYS'
 							}
-							
-							// 获取最近的店铺
-							let arr = r.result.pois.sort((a,b)=>{return a._distance - b._distance})
-							that.form.start = r.result.pois[0].title
-							that.form.startLocation =  r.result.pois[0].location
-							uni.setStorageSync('city', r.result.address_component.city)
 						},
-						fail(e) {
-							console.log('错误', e);
+						{
+							id: 102,
+							latitude: _this.form.endLocation.lat,
+							longitude: _this.form.endLocation.lng,
+							width: '41px',
+							height: '47px',
+							iconPath: '/static/end.png',
+							callout: {
+								content: _this.form.end,
+								bgColor: '#fff',
+								color: '#222',
+								borderRadius: '50%',
+								fontSize: '14px',
+								padding: '8px',
+								display: 'ALWAYS'
+							}
 						}
+						],
+						clear: true
 					})
-
+					_this.polyline = [{
+						points: pl,
+						color: '#39B0FF',
+						borderColor: '#0071BC',
+						arrowLine: true,
+						width: 4
+					}]
+					setTimeout(() => {
+						let includePoints = []
+						includePoints.push({
+							latitude: pl[0].latitude + 0.01,
+							longitude: pl[0].longitude + 0.01
+						})
+						includePoints.push({
+							latitude: pl[pl.length - 1].latitude - 0.01,
+							longitude: pl[pl.length - 1].longitude - 0.01
+						})
+						_this.includePoints = includePoints
+					}, 500)
+				},
+				fail: function (error) {
+					console.error(error);
+				},
+				complete: function (res) {
+					uni.setStorageSync('form', JSON.stringify(_this.form))
 				}
-			},
-			// 选择地址
-			chooseAddress(type) {
-				uni.setStorageSync('form', JSON.stringify(this.form))
-				uni.navigateTo({
-					url: '../chooseAddress/index?type=' + type
-				})
-
-			},
-			// 获取当前经纬度
-			initPosition() {
-				let that = this
-				uni.getLocation({
-					type: 'gcj02',
-					success(res) {
-						console.log(res);
-						that.longitude = res.longitude
-						that.latitude = res.latitude
-						that.mapCenter = {
-							longitude: res.longitude,
-							latitude: res.latitude
-						}
-						that.myPosition()
+			});
+		},
+		//绘制出行路线
+		goToUser() {
+			var _this = this;
+			//调用距离计算接口
+			qqmapsdk.direction({
+				mode: "bicycling", //可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
+				//from参数不填默认当前地址
+				from: `${_this.location.latitude},${_this.location.longitude}`,
+				to: `${_this.form.startLocation.lat},${_this.form.startLocation.lng}`,
+				success: function (res) {
+					console.log("地图绘制", res);
+					// _this.form.taxi_fare = res.result.routes[0].taxi_fare.fare
+					var ret = res;
+					var coors = ret.result.routes[0].polyline,
+						pl = [];
+					//坐标解压（返回的点串坐标，通过前向差分进行压缩）
+					var kr = 1000000;
+					for (var i = 2; i < coors.length; i++) {
+						coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
 					}
-				})
-			},
-			//绘制路线
-			go() {
-				this.step = 2
-				var _this = this;
-				//调用距离计算接口
-				qqmapsdk.direction({
-					mode: 'driving', //可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
-					//from参数不填默认当前地址
-
-					from: `${_this.form.startLocation.lat},${_this.form.startLocation.lng}`,
-					to: `${_this.form.endLocation.lat},${_this.form.endLocation.lng}`,
-					success: function(res) {
-						console.log('地图绘制',res);
-						_this.form.taxi_fare = res.result.routes[0].taxi_fare.fare
-						var ret = res;
-						var coors = ret.result.routes[0].polyline,
-							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属性，将路线显示出来,将解压坐标第一个数据作为起点
-						_this.latitude = pl[0].latitude
-						_this.longitude = pl[0].longitude
-
+					//将解压后的坐标放入点串数组pl中
+					for (var i = 0; i < coors.length; i += 2) {
+						pl.push({
+							latitude: coors[i],
+							longitude: coors[i + 1],
+						});
+					}
+					// 是否绘制过车辆 没有则绘制
+					if (!_this.isDraw) {
+						_this.isDraw = true;
 						_this.map.addMarkers({
-							markers: [{
+							markers: [
+								{
+									id: 100,
+									latitude: _this.location.latitude,
+									longitude: _this.location.longitude,
+									width: "98rpx",
+									height: "46rpx",
+									iconPath: "/static/car.png",
+									callout: {
+										content: "正在路上",
+										bgColor: "#fff",
+										color: "#222",
+										borderRadius: "50%",
+										fontSize: "14px",
+										padding: "8px",
+										display: "ALWAYS",
+									},
+								},
+								{
+									id: 103,
 									latitude: _this.form.startLocation.lat,
 									longitude: _this.form.startLocation.lng,
-									width: '82rpx',
-									height: '95rpx',
-									iconPath: '/static/start.png',
-									callout:{
-										content:_this.form.start,
-										bgColor:'#fff',
-										color:'#222',
-										borderRadius:'50%',
-										fontSize: '28rpx',
-										padding:'16rpx',
-										display:'ALWAYS'
-									}
+									width: "41px",
+									height: "47px",
+									iconPath: "/static/start.png",
+									callout: {
+										content: _this.form.start,
+										bgColor: "#fff",
+										color: "#222",
+										borderRadius: "50%",
+										fontSize: "14px",
+										padding: "8px",
+										display: "ALWAYS",
+									},
 								},
-								{
-									latitude: _this.form.endLocation.lat,
-									longitude: _this.form.endLocation.lng,
-									width: '82rpx',
-									height: '95rpx',
-									iconPath: '/static/end.png',
-									callout:{
-										content:_this.form.end,
-										bgColor:'#fff',
-										color:'#222',
-										borderRadius:'50%',
-										fontSize: '28rpx',
-										padding:'16rpx',
-										display:'ALWAYS'
-									}
+							],
+							clear: true,
+						});
+					} else {
+						_this.map.translateMarker(
+							{
+								markerId: 100,
+								autoRotate: true,
+								destination: {
+									latitude: _this.location.latitude,
+									longitude: _this.location.longitude
+								},
+								animationEnd() {
 								}
-							]
-						})
-						_this.polyline = [{
-							points: pl,
-							color: '#39B0FF',
-							borderColor: '#0071BC',
-							arrowLine:true,
-							width: 4
-						}]
-						setTimeout(() => {
-							let includePoints = []
-							includePoints.push({
-								latitude: pl[0].latitude+0.01,
-								longitude: pl[0].longitude+0.01
-							})
-							includePoints.push({
-								latitude: pl[pl.length - 1].latitude - 0.01,
-								longitude: pl[pl.length - 1].longitude- 0.01
-							})
-							_this.includePoints = includePoints
-						}, 500)
-
-
-					},
-					fail: function(error) {
-						console.error(error);
-					},
-					complete: function(res) {
-						console.log(res);
+								,
+								success(res) {
+									console.log(res)
+								}
+							}
+						)
 					}
-				});
-			}
+					_this.polyline = [
+						{
+							points: pl,
+							color: "#39B0FF",
+							borderColor: "#0071BC",
+							arrowLine: true,
+							width: 4,
+						},
+					];
+				},
+				fail: function (error) {
+					console.error(error);
+				},
+				complete: function (res) {
+					console.log(res);
+				},
+			});
 		},
-		onReady() {
-			this.map = uni.createMapContext('Map', this)
-			this.initPosition()
+		goToEnd() {
+			var _this = this;
+			//调用距离计算接口
+			qqmapsdk.direction({
+				mode: 'driving', //可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
+				//from参数不填默认当前地址
+				from: `${_this.location.latitude},${_this.location.longitude}`,
+				to: `${_this.form.endLocation.lat},${_this.form.endLocation.lng}`,
+				success: function (res) {
+					console.log('地图绘制', res);
+					_this.form.taxi_fare = res.result.routes[0].taxi_fare.fare
+					var ret = res;
+					var coors = ret.result.routes[0].polyline,
+						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]
+						})
+					}
 
-		},
-		onLoad(option) {
-			let that = this
-			// 获取地址选择页面传来的数据
-			const eventChannel = this.getOpenerEventChannel();
-			if(JSON.stringify(eventChannel) !=='{}'){
-				eventChannel.on('address', function(data) {
-					if(uni.getStorageSync('form')){
-						that.form = JSON.parse(uni.getStorageSync('form'))
-					}
-					that.form[option.type] = data.address
-					that.latitude = data.latitude
-					that.longitude = data.longitude
-					that.form[option.type + 'Location'].lat = data.latitude
-					that.form[option.type + 'Location'].lng = data.longitude
-
-					// 如果起点和终点都设置，绘制出路线
-					if(that.form.start&& that.form.end){
-						that.go()
+					if (!_this.isCarDraw) {
+						_this.isCarDraw = true;
+						_this.map.addMarkers({
+							markers: [{
+								id: 104,
+								latitude: _this.location.latitude,
+								longitude: _this.location.longitude,
+								width: "98rpx",
+								height: "46rpx",
+								iconPath: "/static/car.png",
+								callout: {
+									content: "订单进行中",
+									bgColor: "#fff",
+									color: "#222",
+									borderRadius: "50%",
+									fontSize: "14px",
+									padding: "8px",
+									display: "ALWAYS",
+								},
+							},
+							{
+								id: 105,
+								latitude: _this.form.endLocation.lat,
+								longitude: _this.form.endLocation.lng,
+								width: '41px',
+								height: '47px',
+								iconPath: '/static/end.png',
+								callout: {
+									content: _this.form.end,
+									bgColor: '#fff',
+									color: '#222',
+									borderRadius: '50%',
+									fontSize: '14px',
+									padding: '8px',
+									display: 'ALWAYS'
+								}
+							}
+							],
+							clear: true
+						})
+					} else {
+						_this.map.translateMarker({
+							markerId: 104,
+							autoRotate: true,
+							destination: {
+								latitude: _this.location.latitude,
+								longitude: _this.location.longitude
+							},
+							animationEnd() {
+							},
+							success(res) {
+								console.log(res)
+							}
+						})
 					}
-				})
+					_this.polyline = [{
+						points: pl,
+						color: '#39B0FF',
+						borderColor: '#0071BC',
+						arrowLine: true,
+						width: 4
+					}]
+				},
+				fail: function (error) {
+					console.error(error);
+				},
+				complete: function (res) {
+					console.log(res);
 				}
-					
-		},
-		created() {
+			});
+		}
+	},
+	computed: {
+		formatTimer() {
+			return `${this.minutes.toString().padStart(2, '0')}:${this.seconds.toString().padStart(2, '0')}`;
+		}
+	},
+	onReady() {
+		this.map = uni.createMapContext('Map', this)
+		// 如果start 有值则不进行初始化
+	},
+	onLoad(option) {
+		let that = this
+		// 获取地址选择页面传来的数据
+		const eventChannel = this.getOpenerEventChannel();
+
+		if (JSON.stringify(eventChannel) !== '{}') {
+			eventChannel.on('address', function (data) {
+				if (uni.getStorageSync('form')) {
+					that.form = JSON.parse(uni.getStorageSync('form'))
+				}
+				that.form[option.type] = data.address
+				that.latitude = data.latitude
+				that.longitude = data.longitude
+				that.form[option.type + 'Location'].lat = data.latitude
+				that.form[option.type + 'Location'].lng = data.longitude
+
+				// 如果起点和终点都设置，绘制出路线
+				if (that.form.start && that.form.end) {
+					that.go()
+				}
+			})
+		}
 
+		if (option.type !== 'start') {
+			this.initPosition()
+		}
+
+		// 读取是否存在进行中的订单
+		const tripId = uni.getStorageSync('tripId');
+		if (tripId.length > 1) {
+			uni.showLoading({
+				title: '加载订单中...'
+			});
+			this.hangupObj.queryId = tripId;
+			if (uni.getStorageSync('form')) {
+				that.form = JSON.parse(uni.getStorageSync('form'))
+			}
+			uni.hideLoading();
+			this.startTimer();
 		}
+
+	},
+	created() {
+
 	}
+}
 </script>
 
 <style lang="scss" scoped>
-	.trip {
-		display: flex;
-		flex-direction: column;
-		height: 100vh;
-
-		.map {
-			height: 600rpx;
-			flex: 1;
-			position: relative;
-
-			.current {
-				position: absolute;
-				left: 50%;
-				top: 50%;
-				transform: translate(-50%, calc(-50% - 40rpx));
-				width: 40rpx;
-				height: 68rpx;
+.trip {
+	display: flex;
+	flex-direction: column;
+	height: 78vh;
+
+	.map {
+		height: 70vh;
+		flex: 1;
+		position: relative;
+
+		.current {
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, calc(-50% - 40rpx));
+			width: 40rpx;
+			height: 68rpx;
+		}
+
+		.btn {
+			position: absolute;
+			bottom: 20%;
+			right: 20rpx;
+			width: 60rpx;
+			height: 60rpx;
+		}
+	}
+
+	.content {
+		width: 100%;
+		height: 530rpx;
+		border-radius: 16rpx 16rpx 0 0;
+		background-color: transparent;
+		position: absolute;
+		bottom: 0;
+
+		.img {
+			height: 180rpx;
+			width: 100%;
+			margin-top: -60rpx;
+		}
+
+		.operation {
+			width: 100%;
+			height: 424rpx;
+			padding: 28rpx 24rpx;
+			background: #FFFFFF;
+			border-radius: 20rpx 20rpx 20rpx 20rpx;
+			position: absolute;
+			bottom: 0rpx;
+			left: 50%;
+			transform: translateX(-50%);
+			box-sizing: border-box;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			.start-box {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				margin: 0 52rpx;
+				width: 100%;
+
+				.start {
+					font-weight: bold;
+					color: #222222;
+					font-size: 28rpx;
+					display: flex;
+					align-items: center;
+
+					.point {
+						width: 16rpx;
+						height: 16rpx;
+						background: #07AC82;
+						margin-left: 24rpx;
+						margin-right: 20rpx;
+						border-radius: 50%;
+					}
+
+					.green {
+						color: #07AC82;
+						max-width: 424rpx;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						display: inline-block;
+					}
+
+
+				}
+
+				.jiantou {
+					float: right;
+					width: 20rpx;
+					height: 20rpx;
+				}
+			}
+
+			.end {
+				display: flex;
+				align-items: center;
+				width: 100%;
+				height: 116rpx;
+				line-height: 116rpx;
+				text-indent: 36rpx;
+				background: #F0F0F0;
+				border-radius: 16rpx 16rpx 16rpx 16rpx;
+				font-weight: bold;
+				color: #222222;
+				font-size: 40rpx;
+				margin-top: 28rpx;
+				margin-bottom: 24rpx;
+
+				.point {
+					margin: 0 20rpx 0 24rpx;
+					width: 16rpx;
+					height: 16rpx;
+					background: #FF4A39;
+					border-radius: 50%;
+				}
+
 			}
 
 			.btn {
-				position: absolute;
-				bottom: 20rpx;
-				right: 20rpx;
-				width: 60rpx;
-				height: 60rpx;
+				width: 100%;
+				line-height: 80rpx;
+				text-align: center;
+				// background: #;
+				border-radius: 40rpx 40rpx 40rpx 40rpx;
+				margin-top: 28rpx;
+				font-weight: bold;
+				color: #FFFFFF;
+				font-size: 28rpx;
 			}
 		}
 
-		.content {
+		.call-operation {
 			width: 100%;
-			height: 476rpx;
-			border-radius: 16rpx 16rpx 0 0;
-			position: relative;
+			height: 538rpx;
+			padding: 28rpx 24rpx;
+			background: #FFFFFF;
+			border-radius: 20rpx;
+			position: absolute;
+			bottom: 0rpx;
+			left: 50%;
+			transform: translateX(-50%);
+			box-sizing: border-box;
+
+
+			.call-img {
+				width: 266rpx;
+				height: 266rpx;
+				margin: 0 auto;
+
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
 
 			.title {
-				font-weight: 400;
-				color: #FFFFFF;
-				font-size: 40rpx;
-				position: absolute;
+				font-size: 36rpx;
+				color: #222222;
 				font-weight: bold;
-				top: 32rpx;
-				left: 32rpx;
+				margin-bottom: 10rpx;
+				// text-align: left;
 			}
 
-			.desc {
-				color: #FFFFFF;
-				font-size: 28rpx;
-				position: absolute;
-				top: 104rpx;
-				left: 32rpx;
+			.call-btn {
+				width: 344rpx;
+				margin: 0 auto;
 			}
+		}
 
-			.bg {
-				width: 100%;
-				height: 476rpx;
-				border-radius: 16rpx 16rpx 0 0;
+		.driver-operation {
+			background: #F9F9F9;
+			border-radius: 20rpx;
+			height: 526rpx;
+			padding: 28rpx 24rpx;
+
+			.desc {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.title {
+					display: flex;
+					flex-direction: column;
+
+					.desc-title {
+						font-size: 36rpx;
+						color: #222222;
+						font-weight: bold;
+					}
+
+					.desc-subtitle {
+						font-size: 24rpx;
+						color: #222222;
+						margin-top: 24rpx;
+					}
+				}
+
+				.car-img {
+					width: 234rpx;
+					height: 122rpx;
+
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
 			}
 
-			.operation {
-				width: 686rpx;
-				height: 240rpx;
+			.driver-card {
 				background: #FFFFFF;
-				border-radius: 20rpx 20rpx 20rpx 20rpx;
-				position: absolute;
-				bottom: 40rpx;
-				left: 50%;
-				transform: translateX(-50%);
-				box-sizing: border-box;
+				margin-top: 22rpx;
+				padding: 28rpx 22rpx;
+				border-radius: 20rpx;
+
+				.driver {
+					display: flex;
+
+					.driver-avatar {
+						height: 100rpx;
+						width: 100rpx;
+					}
+
+					.driver-info {
+						flex: 1;
+						margin-left: 20rpx;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+
+						.driver-name {
+							font-size: 32rpx;
+							color: #222222;
+							font-weight: bold;
+						}
+
+						.driver-car {
+							font-size: 24rpx;
+							color: #999999;
+						}
+					}
+
+					.driver-option {
+						display: flex;
+
+						.call,
+						.customer {
+							width: 60rpx;
+							height: 60rpx;
+							margin-left: 20rpx;
+
+							image {
+								height: 100%;
+								width: 100%;
+							}
+						}
+					}
+				}
+
+				.price-box {
+					display: flex;
+					justify-content: flex-end;
+					margin-top: 20rpx;
+					padding-top: 28rpx;
+					border-top: 1px solid #F0F0F0;
+
+					.price {
+						font-size: 32rpx;
+						color: #FF4A39;
+						font-weight: bold;
+						margin-right: 40%;
+					}
+
+					.jiantou {
+						width: 20rpx;
+						height: 20rpx;
+
+						image {
+							height: 100%;
+							width: 100%;
+						}
+					}
+				}
+			}
+		}
+
+		.drivering-operation {
+			background: #F9F9F9;
+			border-radius: 20rpx;
+			height: 416rpx;
+			padding: 28rpx 24rpx;
+
+			.desc {
 				display: flex;
-				flex-direction: column;
+				justify-content: space-between;
 				align-items: center;
 
-				.start-box {
+				.title {
 					display: flex;
-					align-items: center;
-					width: 630rpx;
-					height: 80rpx;
-					line-height: 80rpx;
-					margin-top: 30rpx;
+					flex-direction: column;
 
-					.point {
-						width: 16rpx;
-						height: 16rpx;
-						background: #07AC82;
-						border-radius: 50%;
+					.desc-title {
+						font-size: 36rpx;
+						color: #222222;
+						font-weight: bold;
 					}
 
-					.start {
-						font-weight: bold;
+					.desc-subtitle {
+						font-size: 24rpx;
 						color: #222222;
-						font-size: 28rpx;
+						margin-top: 24rpx;
+					}
+				}
+
+				.car-img {
+					width: 234rpx;
+					height: 122rpx;
+
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+
+			.driver-card {
+				background: #FFFFFF;
+				margin-top: 22rpx;
+				padding: 28rpx 22rpx;
+				border-radius: 20rpx;
+
+				.driver {
+					display: flex;
+
+					.driver-avatar {
+						height: 100rpx;
+						width: 100rpx;
+					}
+
+					.driver-info {
+						flex: 1;
 						margin-left: 20rpx;
 						display: flex;
-						.green {
-							color: #07AC82;
-							max-width: 400rpx;
-							white-space: nowrap;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							display: inline-block;
+						flex-direction: column;
+						justify-content: space-between;
+
+						.driver-name {
+							font-size: 32rpx;
+							color: #222222;
+							font-weight: bold;
+						}
+
+						.driver-car {
+							font-size: 24rpx;
+							color: #999999;
+						}
+					}
+
+					.driver-option {
+						display: flex;
+
+						.call,
+						.customer {
+							width: 60rpx;
+							height: 60rpx;
+							margin-left: 20rpx;
+
+							image {
+								height: 100%;
+								width: 100%;
+							}
 						}
 					}
 				}
 
-				.end {
-					width: 630rpx;
-					height: 80rpx;
-					line-height: 80rpx;
-					text-indent: 36rpx;
-					background: #F0F0F0;
-					border-radius: 16rpx 16rpx 16rpx 16rpx;
-					font-weight: bold;
-					color: #222222;
-					font-size: 36rpx;
-					margin-top: 20rpx;
+
+			}
+		}
+
+		.await-operation {
+			background: #F9F9F9;
+			border-radius: 20rpx;
+			height: 424rpx;
+			padding: 28rpx 24rpx;
+
+			.desc {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.title {
+					display: flex;
+					flex-direction: column;
+
+					.desc-title {
+						font-size: 36rpx;
+						color: #222222;
+						font-weight: bold;
+					}
+
+					.desc-subtitle {
+						font-size: 24rpx;
+						color: #222222;
+						margin-top: 24rpx;
+					}
+				}
+
+				.car-img {
+					width: 234rpx;
+					height: 122rpx;
+
+					image {
+						width: 100%;
+						height: 100%;
+					}
 				}
 			}
 
-			.charging-box {
-				width: 100%;
-				height: 100%;
-				background: linear-gradient(180deg, #FF7365 0%, #F9F9F9 70%,#FFF 100%);
-				border-radius: 40rpx 40rpx 0rpx 0rpx;
-				box-sizing: border-box;
-				padding: 40rpx 32rpx;
-
-				.box {
-					padding: 30rpx;
-					background: #fff;
-					border-radius: 20rpx 20rpx 20rpx 20rpx;
-
-					.item {
+			.driver-card {
+				background: #FFFFFF;
+				margin-top: 22rpx;
+				padding: 28rpx 22rpx;
+				border-radius: 20rpx;
+
+				.driver {
+					display: flex;
+
+					.driver-avatar {
+						height: 100rpx;
+						width: 100rpx;
+					}
+
+					.driver-info {
+						flex: 1;
+						margin-left: 20rpx;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+
+						.driver-name {
+							font-size: 32rpx;
+							color: #222222;
+							font-weight: bold;
+						}
+
+						.driver-car {
+							font-size: 24rpx;
+							color: #999999;
+						}
+					}
+
+					.driver-option {
+						display: flex;
+
+						.call,
+						.customer {
+							width: 60rpx;
+							height: 60rpx;
+							margin-left: 20rpx;
+
+							image {
+								height: 100%;
+								width: 100%;
+							}
+						}
+					}
+				}
+
+
+			}
+		}
+
+		.order-operation {
+			background: #F9F9F9;
+			border-radius: 20rpx;
+			height: 424rpx;
+			padding: 28rpx 24rpx;
+
+			.desc {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.title {
+					display: flex;
+					flex-direction: column;
+
+					.desc-title {
+						font-size: 36rpx;
+						color: #222222;
 						font-weight: bold;
+					}
+
+					.desc-subtitle {
+						font-size: 24rpx;
 						color: #222222;
-						font-size: 28rpx;
-						position: relative;
-						// padding: 14rpx 0;
-						line-height: 70rpx;
-						height: 70rpx;
-						padding-left: 32rpx;
-						.jiantou{
-							width: 20rpx;
-							height: 20rpx;
-							position: absolute;
-							top: 50%;
-							right: 0%;
-							transform: translateY(-50%);
+						margin-top: 24rpx;
+					}
+				}
+
+				.car-img {
+					width: 234rpx;
+					height: 122rpx;
+
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+
+			.driver-card {
+				background: #FFFFFF;
+				margin-top: 22rpx;
+				padding: 28rpx 22rpx;
+				border-radius: 20rpx;
+
+				.driver {
+					display: flex;
+
+					.driver-avatar {
+						height: 100rpx;
+						width: 100rpx;
+					}
+
+					.driver-info {
+						flex: 1;
+						margin-left: 20rpx;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+
+						.driver-name {
+							font-size: 32rpx;
+							color: #222222;
+							font-weight: bold;
 						}
-						&::before {
-							content: '';
-							position: absolute;
-							top: 50%;
-							left: 0;
-							transform: translateY(-50%);
-							width: 16rpx;
-							height: 16rpx;
-							border-radius: 50%;
-							background: #07AC82;
+
+						.driver-car {
+							font-size: 24rpx;
+							color: #999999;
 						}
 					}
 
-					.end.item {
-						border-bottom: 2rpx solid #F0F0F0;
+					.driver-option {
+						display: flex;
+
+						.call,
+						.customer {
+							width: 60rpx;
+							height: 60rpx;
+							margin-left: 20rpx;
 
-						&::before {
-							background: #FF4A39;
+							image {
+								height: 100%;
+								width: 100%;
+							}
 						}
 					}
+				}
+
+				.price-box {
+					display: flex;
+					justify-content: flex-end;
+					margin-top: 20rpx;
+					padding-top: 28rpx;
+					border-top: 1px solid #F0F0F0;
 
 					.price {
-						font-size: 28rpx;
+						font-size: 32rpx;
 						color: #FF4A39;
-						margin: 22rpx auto 0;
-						text-align: center;
-						position: relative;
-						.num {
-							font-weight: bold;
-							font-size: 30rpx;
-						}
-						.jiantou{
-							width: 20rpx;
-							height: 20rpx;
-							position: absolute;
-							top: 50%;
-							right: 0%;
-							transform: translateY(-50%);
+						font-weight: bold;
+						margin-right: 40%;
+					}
+
+					.jiantou {
+						width: 20rpx;
+						height: 20rpx;
+
+						image {
+							height: 100%;
+							width: 100%;
 						}
 					}
 				}
+			}
+		}
 
-				.btn {
-					width: 100%;
-					line-height: 80rpx;
-					text-align: center;
-					background: #FF4A39;
-					border-radius: 40rpx 40rpx 40rpx 40rpx;
-					margin-top: 28rpx;
+		.charging-box {
+			width: 100%;
+			height: 100%;
+			background: linear-gradient(180deg, #FF7365 0%, #F9F9F9 70%, #FFF 100%);
+			border-radius: 40rpx 40rpx 0rpx 0rpx;
+			box-sizing: border-box;
+			padding: 40rpx 32rpx;
+
+			.box {
+				padding: 30rpx;
+				background: #fff;
+				border-radius: 20rpx 20rpx 20rpx 20rpx;
+
+				.item {
 					font-weight: bold;
-					color: #FFFFFF;
+					color: #222222;
+					font-size: 28rpx;
+					position: relative;
+					// padding: 14rpx 0;
+					line-height: 70rpx;
+					height: 70rpx;
+					padding-left: 32rpx;
 
+					.jiantou {
+						width: 20rpx;
+						height: 20rpx;
+						position: absolute;
+						top: 50%;
+						right: 0%;
+						transform: translateY(-50%);
+					}
+
+					&::before {
+						content: '';
+						position: absolute;
+						top: 50%;
+						left: 0;
+						transform: translateY(-50%);
+						width: 16rpx;
+						height: 16rpx;
+						border-radius: 50%;
+						background: #07AC82;
+					}
+				}
+
+				.end.item {
+					border-bottom: 2rpx solid #F0F0F0;
+
+					&::before {
+						background: #FF4A39;
+					}
+				}
+
+				.price {
 					font-size: 28rpx;
+					color: #FF4A39;
+					margin: 22rpx auto 0;
+					text-align: center;
+					position: relative;
+
+					.num {
+						font-weight: bold;
+						font-size: 30rpx;
+					}
+
+					.jiantou {
+						width: 20rpx;
+						height: 20rpx;
+						position: absolute;
+						top: 50%;
+						right: 0%;
+						transform: translateY(-50%);
+					}
 				}
 			}
+
+			.btn {
+				width: 100%;
+				line-height: 80rpx;
+				text-align: center;
+				background: #FF4A39;
+				border-radius: 40rpx 40rpx 40rpx 40rpx;
+				margin-top: 28rpx;
+				font-weight: bold;
+				color: #FFFFFF;
+
+				font-size: 28rpx;
+			}
 		}
 	}
+}
 </style>

trip/index/mixin/index.js

@@ -0,0 +1,255 @@
+import {
+  addOrder,
+  cancelOrder,
+  orderDelit,
+  driverLocation,
+  driverLocationLog,
+} from "@/api/trip.js";
+export const mixin = {
+  data() {
+    return {
+      seconds: 0,
+      minutes: 0,
+      timer: null,
+      loading: false,
+      hangupObj: {
+        orderId: "",
+        orderNo: "",
+        queryId: "",
+        reason: "",
+      },
+      hangupShow: false,
+      optionList: [
+        {
+          name: "地址选错了",
+        },
+        {
+          name: "不需要用车了",
+        },
+        {
+          name: "司机太远了",
+        },
+        {
+          name: "计划有变",
+        },
+        {
+          name: "其他原因",
+        },
+      ],
+      driver: {
+        driverId: "",
+        driverName: "",
+        driverPhone: "",
+        driverAvatar: "",
+        driverStatus: "",
+        driverReceivedTime: "",
+        payPrice: "", // 预估价格
+      },
+      location: {
+        driverId: "", // 司机ID
+        longitude: 0, // 司机当前位置  gcj-02坐标系
+        latitude: 0, // 司机当前位置  gcj-02坐标系
+        createTime: "", // 司机定位时间
+        gpsAccuracyStatus: 1, // 司机定位信号强度， 1：GPS定位信号好；其他：定位信号不好
+        accuracy: 0, // 定位进度，单位米
+      },
+      path: [],
+      priceItems: [],
+    };
+  },
+  methods: {
+    // 呼叫司机
+    call() {
+      // this.markers = [];
+      // console.log(this.markers)
+      // console.log(this.map)
+      // this.map.removeMarkers()
+      this.loading = true;
+      if (this.step !== 2) {
+        uni.showToast({
+          title: "请先选择目的地",
+          icon: "none",
+        });
+        setTimeout(() => {
+          this.chooseAddress("end");
+          this.loading = false;
+        }, 1000);
+        return;
+      }
+      uni.showLoading({
+        title: "加载中",
+      });
+      // adcode	string(11)	Y	下单地区的行政区划代码，六位数字，精确到省市区（县）
+      // originName	string(40)	Y	起点名称，如 XXX大厦，XXX小区XX栋，XXX工业园
+      // originLocation	string(200)	Y	地点详细全称，XXX省XX市XX区XX街道XXXX小区XXX栋X单元
+      // originLongitude	double	Y	起点经度，gcj-02坐标系
+      // originLatitude	double	Y	起点纬度，gcj-02坐标系
+      // destinationName	string(40)	N	终点地名，选填，关于终点的四个参数，要么都不传入，要么都要传入。
+      // destinationLocation	string(200)	N	终点全名
+      // destinationLongitude	double	N	终点终点经度，gcj-02坐标系
+      // destinationLatitude	double	N	终点纬度，gcj-02坐标系
+      addOrder({
+        channel: "ZhongShu",
+        adcode: this.form.adcode,
+        originName: this.form.start,
+        originLocation: this.form.start,
+        originLongitude: Math.floor(this.form.startLocation.lng * 100) / 100,
+        originLatitude: Math.floor(this.form.startLocation.lat * 100) / 100,
+        destinationName: this.form.end,
+        destinationLocation: this.form.end,
+        destinationLongitude: Math.floor(this.form.endLocation.lng * 100) / 100,
+        destinationLatitude: Math.floor(this.form.endLocation.lat * 100) / 100,
+      }).then((res) => {
+        this.loading = false;
+        if (res.state === "Success") {
+          this.hangupObj.orderNo = res.content.orderNo;
+          this.hangupObj.queryId = res.content.goodsList[0].id;
+          uni.setStorageSync("tripId", this.hangupObj.queryId);
+          this.step = 3;
+          this.startTimer();
+        } else {
+          uni.showToast({
+            title: res.message,
+            icon: "none",
+          });
+        }
+        uni.hideLoading({
+          noConflict: true,
+        });
+      });
+    },
+    // 取消
+    hangup() {
+      this.hangupShow = true;
+    },
+    // 取消订单
+    cancelOrder() {
+      uni.showLoading({
+        title: "取消中...",
+      });
+      cancelOrder({
+        orderId: this.hangupObj.queryId,
+        reason: this.hangupObj.reason,
+      }).then((res) => {
+        console.log(res);
+        uni.hideLoading();
+        if (res.state === "Success") {
+          uni.showToast({
+            title: "取消成功",
+            icon: "success",
+          });
+          this.state = 2;
+          this.loading = false;
+          clearInterval(this.timer);
+          this.timer = null;
+          this.seconds = 0;
+          this.minutes = 0;
+        } else {
+          uni.showToast({
+            title: res.message,
+            icon: "none",
+          });
+        }
+      });
+    },
+    startTimer() {
+      // 保证只存在一个实例
+      if (this.timer) {
+        return;
+      } else {
+        this.timer = setInterval(() => {
+          this.seconds++;
+          // 每隔5秒请求一次
+          if (this.seconds % 5 == 0) {
+            // 获取订单状态
+            orderDelit(this.hangupObj.queryId).then((res) => {
+              if (res.state === "Success") {
+                // 可能取消了可能接单了
+                const id = res.content.orderStatus;
+                const driverStatus = res.content.driverStatus;
+                // 更新司机数据
+                this.driver.driverId = res.content.driverId;
+                this.driver.driverName = res.content.driverName;
+                this.driver.driverPhone = res.content.driverPhone;
+                this.driver.driverAvatar = res.content.driverAvatar;
+                this.driver.driverStatus = res.content.driverStatus;
+                this.driver.payPrice = res.content.payPrice;
+                this.priceItems = res.content.priceItems;
+                if (id == 1) {
+                  // 获取司机位置
+                  driverLocation({
+                    orderId: this.hangupObj.queryId,
+                  }).then((res) => {
+                    if (res.state == "Success") {
+                      const { content } = res.content;
+                      this.location.driverId = content.driverId;
+                      this.location.longitude = content.longitude;
+                      this.location.latitude = content.latitude;
+                      this.location.createTime = content.createTime;
+                      this.location.gpsAccuracyStatus =
+                        content.gpsAccuracyStatus;
+                      this.location.accuracy = content.accuracy;
+
+                      // 订单进行中
+                      if (driverStatus == 1) {
+                        // 有人接单了
+                        this.step = 4;
+                        // 绘制司机的行驶轨迹
+                        this.goToUser();
+                      } else if (driverStatus == 2) {
+                        // 到达了目的地开始了等待
+                        this.step = 5;
+                      } else if (driverStatus == 3) {
+                        // 乘客已经上车
+                        this.step = 6;
+                        this.goToEnd();
+                      } else if (driverStatus == 4) {
+                        // 订单完成
+                        this.step = 7;
+                      }
+                    }
+                  });
+                } else if (id == 2) {
+                  // 订单已经完成
+                  this.step = 7;
+                  this.loading = false;
+                  clearInterval(this.timer);
+                  this.timer = null;
+                  uni.removeStorageSync("tripId");
+                  this.seconds = 0;
+                  this.minutes = 0;
+                  this.go(true);
+                } else if (id == -1) {
+                  this.step = 2;
+                  this.loading = false;
+                  clearInterval(this.timer);
+                  this.timer = null;
+                  this.seconds = 0;
+                  this.minutes = 0;
+                  uni.removeStorageSync("tripId");
+                  // 重置地图
+                  uni.showToast({
+                    title: "订单已经取消！",
+                    icon: "none",
+                    duration: 2000,
+                  });
+                  this.go();
+                }
+              }
+            });
+          }
+          if (this.seconds == 60) {
+            this.minutes++;
+            this.seconds = 0;
+          }
+        }, 1000);
+      }
+    },
+    selectClick(e) {
+      console.log(e);
+      this.hangupObj.reason = e.name;
+      this.hangupShow = false;
+      this.cancelOrder();
+    },
+  },
+};