discounts-minapp/trip/index/index.vue

<template>
	<view class="trip">
		<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 || 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="start">
							<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')">
						<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-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>
					<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-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>

			<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 { 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
			},
			includePoints: [],
			form: {
				adcode: '',
				start: '',
				startLocation: {
					lat: 0,
					lng: 0
				},
				end: '',
				endLocation: {
					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
					},
					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)
					},
					fail(e) {
						console.log('错误', e);
					}
				})

			}
		},
		// 选择地址
		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()
				}
			})
		},
		//绘制路线
		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'
							}
						},
						{
							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))
				}
			});
		},
		//绘制出行路线
		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;
					}
					//将解压后的坐标放入点串数组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: [
								{
									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: "41px",
									height: "47px",
									iconPath: "/static/start.png",
									callout: {
										content: _this.form.start,
										bgColor: "#fff",
										color: "#222",
										borderRadius: "50%",
										fontSize: "14px",
										padding: "8px",
										display: "ALWAYS",
									},
								},
							],
							clear: true,
						});
					} else {
						_this.map.translateMarker(
							{
								markerId: 100,
								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);
				},
			});
		},
		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]
						})
					}

					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);
				}
			});
		}
	},
	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: 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 {
				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;
			}
		}

		.call-operation {
			width: 100%;
			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-size: 36rpx;
				color: #222222;
				font-weight: bold;
				margin-bottom: 10rpx;
				// text-align: left;
			}

			.call-btn {
				width: 344rpx;
				margin: 0 auto;
			}
		}

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

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

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

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


			}
		}

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

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

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

		.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: #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>