moxuan_takeaway_qishou_1/pages/index/buyOrder/buyOrder.vue

<template>
	<view class="content">
		<view class="list_box1">
			<view class="part2" v-if="orderDelites.indentType == 1 || orderDelites.indentType == 2">
				<view class="box_add">
					<!-- <view class="distance">
						<view v-if="orderDelites.distancess>1000">{{(Number(orderDelites.distancess) / 1000).toFixed(2)}}</view>
						<view v-else>{{Number(orderDelites.distancess?(orderDelites.distancess).toFixed(2):0)}}</view>
						<view class="a" v-if="orderDelites.distancess>1000">km</view>
						<view class="a" v-else>m</view>
						<view>{{orderDelites.distancess}}</view>
					</view> -->
					<view class="add_name" @click="goStart()">
						<view class="flex align-center">
							<view class="buy">
								<image src="../../../static/rider/icon-buy.png"></image>
							</view>
							<view class="sh_name">
								{{orderDelites.shopAddressDetail}}({{orderDelites.shopProvince?orderDelites.shopProvince:''}}{{orderDelites.shopCity?orderDelites.shopCity:''}}{{orderDelites.shopDistrict?orderDelites.shopDistrict:''}})
								<u-icon name="map"></u-icon>
							</view>
						</view>
						<!-- 	<view class="xs_add">
							{{orderDelites.shopProvince?orderDelites.shopProvince:''}}{{orderDelites.shopCity?orderDelites.shopCity:''}}
							{{orderDelites.shopDistrict?orderDelites.shopDistrict:''}}
						</view> -->
					</view>
				</view>
				<!-- <view class="jiantou">
					<image src="../../../static/rider/jiantou.png"></image>
					<view>{{orderDelites.distance}}</view>
				</view> -->
				<view class="box_add">
					<!-- <view class="distance">
						<view v-if="orderDelites.distance>1000">{{(Number(orderDelites.distance)/ 1000).toFixed(2)}}</view>
						<view v-else>{{Number(orderDelites.distance?(orderDelites.distance).toFixed(2):0)}}</view>
						<view class="a" v-if="orderDelites.distance>1000">km</view>
						<view class="a" v-else>m</view>
						<view>{{orderDelites.distancessd}}</view>
					</view> -->
					<view class="add_name" @click="goEnd()">
						<view class="flex align-center">
							<view class="send">
								<image src="../../../static/rider/icon-send.png"></image>
							</view>
							<view class="sh_name">
								{{orderDelites.userAddressDetail}}({{orderDelites.userProvince?orderDelites.userProvince:''}}{{orderDelites.userCity?orderDelites.userCity:''}}{{orderDelites.userDistrict?orderDelites.userDistrict:''}})
								<u-icon name="map"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="part2" v-if="orderDelites.indentType == 3 && orderDelites.buyType==0">
				<view class="box_add">
					<!-- <view class="distance">
						<view v-if="orderDelites.distance>1000">{{(Number(orderDelites.distance)/ 1000).toFixed(2)}}</view>
						<view v-else>{{Number(orderDelites.distance?(orderDelites.distance).toFixed(2):0)}}</view>
						<view class="a" v-if="orderDelites.distance>1000">km</view>
						<view class="a" v-else>m</view>
						<view>{{orderDelites.distancessd}}</view>
					</view> -->
					<view class="add_name flex align-center" @click="goEnd()">
						<view class="send">
							<image src="../../../static/rider/icon-send.png"></image>
						</view>
						<view class="sh_name">
							{{orderDelites.userAddressDetail}}({{orderDelites.userProvince?orderDelites.userProvince:''}}{{orderDelites.userCity?orderDelites.userCity:''}}{{orderDelites.userDistrict?orderDelites.userDistrict:''}})
							<u-icon name="map"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="part2" v-if="orderDelites.indentType == 3 && orderDelites.buyType==1">
				<view class="box_add">
					<!-- <view class="distance">
						<view v-if="orderDelites.distancess>1000">{{(Number(orderDelites.distancess) / 1000).toFixed(2)}}</view>
						<view v-else>{{Number(orderDelites.distancess?(orderDelites.distancess).toFixed(2):0)}}</view>
						<view class="a" v-if="orderDelites.distancess>1000">km</view>
						<view class="a" v-else>m</view>
						<view>{{orderDelites.distancess}}</view>
					</view> -->
					<view class="add_name flex" @click="goStart()">
						<view class="buy">
							<image src="../../../static/rider/icon-buy.png"></image>
						</view>
						<view class="sh_name">
							{{orderDelites.shopAddressDetail}}({{orderDelites.shopProvince?orderDelites.shopProvince:''}}{{orderDelites.shopCity?orderDelites.shopCity:''}}{{orderDelites.shopDistrict?orderDelites.shopDistrict:''}})
							<u-icon name="map"></u-icon>
						</view>
						<!-- <view class="xs_add">
							{{orderDelites.shopProvince?orderDelites.shopProvince:''}}{{orderDelites.shopCity?orderDelites.shopCity:''}}
								{{orderDelites.shopDistrict?orderDelites.shopDistrict:''}}
						</view> -->
					</view>
				</view>
				<!-- <view class="jiantou">
					<image src="../../../static/rider/jiantou.png"></image>
					<view>{{orderDelites.distance}}</view>
				</view> -->
				<view class="box_add">
					<!-- <view class="distance">
						<view v-if="orderDelites.distance>1000">{{(Number(orderDelites.distance)/ 1000).toFixed(2)}}</view>
						<view v-else>{{Number(item.distance?(item.distance).toFixed(2):0)}}</view>
						<view class="a" v-if="orderDelites.distance>1000">km</view>
						<view class="a" v-else>m</view>
						<view>{{orderDelites.distancessd}}</view>
					</view> -->
					<view class="add_name" @click="goEnd()">
						<view class="flex align-center">
							<view class="send">
								<image src="../../../static/rider/icon-send.png"></image>
							</view>
							<view class="sh_name">
								{{orderDelites.userAddressDetail}}({{orderDelites.userProvince?orderDelites.userProvince:''}}{{orderDelites.userCity?orderDelites.userCity:''}}{{orderDelites.userDistrict?orderDelites.userDistrict:''}})
								<u-icon name="map"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="part2" v-if="orderDelites.indentType == 4">
				<view class="box_add">
					<view class="distance">
						<!-- <view v-if="orderDelites.distancessd>1000">{{(Number(orderDelites.distancessd)/ 1000).toFixed(2)}}</view>
						<view v-else>{{Number(orderDelites.distancessd?(orderDelites.distancessd).toFixed(2):0)}}</view>
						<view class="a" v-if="orderDelites.distancessd>1000">km</view>
						<view class="a" v-else>m</view> -->
						<!-- <view>{{orderDelites.distancessd}}</view> -->
					</view>
					<view class="add_name" @click="goEnd()">
						<view class="send">
							<image src="../../../static/rider/icon-send.png"></image>
						</view>
						<view class="sh_name">
							{{orderDelites.userAddressDetail}}({{orderDelites.userProvince?orderDelites.userProvince:''}}{{orderDelites.userCity?orderDelites.userCity:''}}{{orderDelites.userDistrict?orderDelites.userDistrict:''}})
							<u-icon name="map"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<view class="part2" v-if="orderDelites.indentType == 5">
				<view class="box_add">
					<view class="distance">
						<!-- <view v-if="orderDelites.distancess>1000">{{(Number(orderDelites.distancess) / 1000).toFixed(2)}}</view>
						<view v-else>{{Number(orderDelites.distancess?(orderDelites.distancess).toFixed(2):0)}}</view>
						<view class="a" v-if="orderDelites.distancess>1000">km</view>
						<view class="a" v-else>m</view> -->
						<view>{{orderDelites.distancess}}</view>
					</view>
					<view class="add_name" @click="goStart()">
						<view class="flex align-center">
							<view class="buy">
								<image src="../../../static/rider/icon-buy.png"></image>
							</view>
							<view class="sh_name">
								{{orderDelites.shopAddressDetail}}
								<u-icon name="map"></u-icon>
							</view>
						</view>
						<view class="xs_add">
							{{orderDelites.shopProvince?orderDelites.shopProvince:''}}{{orderDelites.shopCity?orderDelites.shopCity:''}}
							{{orderDelites.shopDistrict?orderDelites.shopDistrict:''}}
						</view>
					</view>
				</view>
				<view class="jiantou">
					<image src="../../../static/rider/jiantou.png"></image>
					<!-- <view>{{orderDelites.distance}}</view> -->
				</view>
				<view class="box_add">
					<view class="distance">
						<!-- <view v-if="orderDelites.distance>1000">{{(Number(orderDelites.distance)/ 1000).toFixed(2)}}</view>
						<view v-else>{{Number(item.distance?(item.distance).toFixed(2):0)}}</view>
						<view class="a" v-if="orderDelites.distance>1000">km</view>
						<view class="a" v-else>m</view> -->
						<view>{{orderDelites.distancessd}}</view>
					</view>
					<view class="add_name" @click="goEnd()">
						<view class="flex align-center">
							<view class="send">
								<image src="../../../static/rider/icon-send.png"></image>
							</view>
							<view class="sh_name">
								{{orderDelites.userAddressDetail}}({{orderDelites.userProvince?orderDelites.userProvince:''}}{{orderDelites.userCity?orderDelites.userCity:''}}{{orderDelites.userDistrict?orderDelites.userDistrict:''}})
								<u-icon name="map"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- tip -->
		<view class="tip_box" v-if="orderDelites.indentType != 5">
			<view class="tip_part1">
				<view class="tip_title" v-if="orderDelites.indentType == 1">帮送清单</view>
				<view class="tip_title" v-if="orderDelites.indentType == 2">帮取清单</view>
				<view class="tip_title" v-if="orderDelites.indentType == 3">帮买清单</view>
				<view class="tip_title" v-if="orderDelites.indentType == 4">服务内容</view>
				<view class="tip_rider" v-if="orderDelites.prepayMoney">
					用户预付:￥<text>{{orderDelites.prepayMoney}}</text>
				</view>

				<view class="box_two1" v-if="orderDelites.itemType">{{orderDelites.itemType}}</view>
				<view class="box_two1" v-if="orderDelites.itemValue">{{orderDelites.itemValue}}</view>
				<view class="box_two1" v-if="orderDelites.itemWeight">{{orderDelites.itemWeight}}</view>
			</view>
			<u-line color="#F2F2F2" />
			<view class="tip_content" v-if="orderDelites.indentType == 3">
				{{orderDelites.productDetails?orderDelites.productDetails:''}}
			</view>
			<view class="tip_content"
				v-if="orderDelites.indentType == 1 || orderDelites.indentType == 2&&orderDelites.remarks">
				备注：{{orderDelites.remarks?orderDelites.remarks:''}}</view>
			<view class="tip_content" v-if="orderDelites.indentType == 4">
				{{orderDelites.serviceDetails?orderDelites.serviceDetails:''}}
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order_box">
			<view class="order_title">订单信息</view>
			<view style="padding:0 30rpx;font-size: 20px;" v-if="orderDelites.orderPaySequence">#{{orderDelites.orderPaySequence}}</view>
			<view style="padding:0 30rpx;color:#FF7F00">{{orderDelites.shopName}}</view>
			<view class="order_list">
				<view class="order_name">订单号码</view>
				<view class="order_numbers" @click="copyOrder(orderDelites.indentNumber)">{{orderDelites.indentNumber}}
					<u-icon name="order"></u-icon>
				</view>
			</view>
			<view class="order_list">
				<view class="order_name">送达时间</view>
				<view class="order_numbers">
					{{orderDelites.sendOutTime?orderDelites.sendOutTime:'立即配送'}}
				</view>
			</view>
			<view class="order_list" v-if="orderDelites.remarks">
				<view class="order_name">订单备注</view>
				<view class="order_numbers">
					{{orderDelites.remarks}}
				</view>
			</view>
			<!-- <view class="order_list">
				<view class="order_name">发票抬头</view>
				<view class="order_numbers">无(不需要发票)</view>
			</view> -->
		</view>
		<!-- 费用明细 -->
		<view class="order_box">
			<view class="order_title">费用明细</view>
			<view class="order_list">
				<view class="income_name">跑腿费</view>
				<view class="income_numbers">¥<text>{{orderDelites.errandMoney}}</text></view>
			</view>
			<view class="order_list" v-if="orderDelites.tip">
				<view class="income_name">小费奖励</view>
				<view class="income_numbers">¥<text>{{orderDelites.tip?orderDelites.tip:0}}</text></view>
			</view>
			<view class="order_list" v-if="orderDelites.prepayMoney">
				<view class="income_name">商品费用</view>
				<view class="income_numbers1">¥<text>{{orderDelites.prepayMoney}}</text></view>
			</view>
		</view>
		<!-- 接单按钮 -->
		<view class="tabbar_btn">
			<view class="btn" @click="bindorder">
				接单
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				orderDelites: {},
				longitude: '', //骑手起点经度
				latitude: '', //骑手起点纬度
				qiJuli: '', //骑手距离
				dianJuli: '', //店家之间距离
				checkCertification: '',
				userId: '',
				arr: [],
				showModal: false
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中......',
				mask: true, // 是否显示透明蒙层，防止触摸穿透
				icon: 'none'
			})
			console.log(options)
			this.indentNumber = options.id
			var that = this
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					that.longitude = res.longitude
					that.latitude = res.latitude
					that.taskData()
				}
			});
			that.userId = that.$queue.getData("userId");
		},
		onShow() {
			this.checkCertification = this.$queue.getData("checkCertification");
			//用户端骑手转单订单通知 335
			this.$Request.getT('/app/common/type/335').then(res => {
				if (res.code === 0) {
					this.arr = [];
					this.arr.push(res.data.value)
				}
			});
			// #ifdef MP-WEIXIN
			//订阅
			if (this.userId) {
				if (this.showModal) {
					this.openMsg()
				}
			}
			// #endif
		},
		methods: {
			openMsg() {
				console.log('订阅消息')
				var that = this
				uni.getSetting({
					withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
					success(ret) {
						console.log(ret.subscriptionsSetting, '------------------')
						// if (ret.subscriptionsSetting.itemSettings && Object.keys(ret.subscriptionsSetting.itemSettings).length == 2) {
						if (ret.subscriptionsSetting.itemSettings) {
							uni.setStorageSync('sendOrderMsg', true)
							uni.openSetting({ // 打开设置页 
								success(rea) {
									console.log(rea.authSetting)
								}
							});
						} else { // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
							uni.setStorageSync('sendOrderMsg', false)
							uni.showModal({
								title: '提示',
								content: '为了更好的体验,请绑定消息推送',
								confirmText: '确定',
								cancelText: '取消',
								success: function(res) {
									if (res.confirm) {
										wx.requestSubscribeMessage({
											tmplIds: that.arr,
											success(re) {
												var datas = JSON.stringify(re);
												if (datas.indexOf("accept") != -1) {
													console.log(re)
													// uni.setStorageSync('sendMsg', true)
												}
											},
											fail: (res) => {
												console.log(res)
											}
										})
										// uni.setStorageSync('sendMsg', true)

										that.showModal = false
									} else if (res.cancel) {
										console.log('取消')
										// uni.setStorageSync('sendMsg', false)
										// that.showModal = true
									}
								}
							})
						}
					}
				})
			},
			copyOrder(value) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendOrderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			// 获取任务数据
			taskData() {
				this.$Request.postT('/app/tbindent/indentMessage', {
					indentNumber: this.indentNumber,
					ol: this.longitude,
					od: this.latitude
				}).then(res => {
					if (res.code == 0) {
						uni.hideLoading()
						if (res.data.distancess > 1000) {
							res.data.distancess = Number((res.data.distancess / 1000)).toFixed(2) + "km"
						} else {
							if (res.data.distancess == 0) {
								res.data.distancess = "0m";
							} else {
								res.data.distancess = Number(res.data.distancess).toFixed(1) + "m";
							}
						}

						if (res.data.distance > 1000) {
							res.data.distance = Number((res.data.distance / 1000)).toFixed(2) + "km"
						} else {
							res.data
							if (res.data.distance == 0) {
								res.data.distance = "0m";
							} else {
								res.data.distance = Number(res.data.distance).toFixed(1) + "m";
							}
						}

						if (res.data.distancessd > 1000) {
							res.data.distancessd = Number((res.data.distancessd / 1000)).toFixed(2) + "km"
						} else {
							if (res.data.distancessd == 0) {
								res.data.distancessd = "0m";
							} else {
								res.data.distancessd = Number(res.data.distancessd).toFixed(1) + "m";
							}
						}

						this.orderDelites = res.data
					} else {
						console.log('失败：', res.data)
					}

				});
			},
			bindorder() {
				let that = this
				if (!that.userId) {
					uni.showModal({
						title: '提示',
						content: '请先登录后再接单',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url: '/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendOrderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				if (that.checkCertification == null) {
					uni.showModal({
						title: '提示',
						content: '请先实名认证后再接单',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url: '/pages/riderMy/approve/approve'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
				if (that.checkCertification == 0) {
					uni.showToast({
						title: '实名认证审核中,无法接单',
						icon: 'none'
					});
					return;
				}
				if (that.checkCertification == 2) {
					uni.showToast({
						title: '实名认证未通过,无法接单',
						icon: 'none'
					});
					return;
				}
				uni.showModal({
					title: '提示',
					content: '确认接单吗',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.$Request.postT('/app/tbindent/indentReceiving', {
								indentNumber: that.indentNumber
							}).then(res => {
								if (res.code == 0) {
									uni.navigateTo({
										url: '/pages/index/orderdetail/orderdetail?id=' + that
											.indentNumber
									})
								} else {
									console.log('失败：', res.data)
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 1500
									});
									setTimeout(()=>{
										uni.reLaunch({
											url:'/pages/index/index'
										})
									},1500)
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});


			},
			// 计算两点之间的距离
			jsjl(qj, qw, jj, jw) {
				this.$Request.postT('/app/indent/findNewIndent', {
					ol: qj,
					od: qw,
					dl: jj,
					dd: jw
				}).then(res => {
					// if(){

					// }
				});
			},
			goStart() {
				// let obj = {
				// 	name: this.orderDelites.shopAddressDetail,
				// 	lat: this.orderDelites.shopLat,
				// 	long: this.orderDelites.shopLng,
				// }
				// this.navgate(obj)
				// 一键导航
				let latitude = this.orderDelites.shopLat
				let longitude = this.orderDelites.shopLng
				let name = this.orderDelites.shopAddressDetail
				uni.openLocation({
					latitude: Number(latitude), //要去的纬度-地址       
					longitude: Number(longitude), //要去的经度-地址
					name: name, //地址名称
					address: name, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				})
			},
			goEnd() {
				// let obj = {
				// 	name: this.orderDelites.userAddressDetail,
				// 	lat: this.orderDelites.userLat,
				// 	long: this.orderDelites.userLng,
				// }
				// this.navgate(obj)

				let latitude = this.orderDelites.userLat
				let longitude = this.orderDelites.userLng
				let name = this.orderDelites.userAddressDetail
				uni.openLocation({
					latitude: Number(latitude), //要去的纬度-地址       
					longitude: Number(longitude), //要去的经度-地址
					name: name, //地址名称
					address: name, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				})
			},
			navgate(e) {

				let plugin = requirePlugin('routePlan');
				let key = this.$queue.getData('mapKey'); //使用在腾讯位置服务申请的key
				let referer = this.$queue.getData('mapName'); //调用插件的app的名称

				let endPoint = JSON.stringify({ //终点
					'name': e.name,
					'latitude': e.lat,
					'longitude': e.long
				});
				wx.navigateTo({
					url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
				});
			}
		}
	}
</script>

<style>
	body {
		background: #F5F5F5;
	}

	.content {
		width: 100%;
		margin-bottom: 159rpx;
	}

	.list_box1 {

		width: 90%;
		margin: 0 auto;
		/* height: 320rpx; */
		background: #FFFFFF;
		border-radius: 23rpx;
		box-shadow: 0rpx 5rpx 5rpx 0rpx rgba(198, 186, 181, 0.20);
		margin-top: 20rpx;
	}

	.part2 {
		width: 92%;
		margin: 0 auto;
		padding: 25rpx 0;
	}

	.box_add {
		display: flex;
	}

	.box_two1 {
		background: #c4e2ff;
		color: #359CFF;
		width: 72px;
		height: 45rpx;
		font-size: 22rpx;
		text-align: center;
		line-height: 45rpx;
		border-radius: 5rpx;
		margin-top: 20rpx;
		margin-left: 10rpx;
	}

	.distance {
		flex: 1;
		/* text-align: center; */
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: left;
	}

	.a {
		font-size: 16rpx;
	}

	.add_name {
		flex: 8;
		position: relative;
		padding-bottom: 20px;
	}

	.buy {
		/* position: absolute;
		top: 0rpx; */
	}

	.buy image {
		width: 20px;
		height: 20px;
	}

	.send {
		/* position: absolute;
		top: 0rpx; */
	}

	.send image {
		width: 20px;
		height: 20px;
	}

	.sh_name {
		font-size: 30rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
		/* text-indent: 15rpx; */
		margin-left: 8upx;
	}

	.xs_add {
		color: #999999;
		font-size: 24rpx;
		margin-top: 10rpx;
		margin-left: 30px;
	}

	.jiantou {
		margin-left: 23rpx;
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
	}

	.jiantou image {
		width: 20rpx;
		height: 40rpx;
	}

	.jiantou>view {
		margin-left: 10rpx;
	}

	.part3 {
		width: 90%;
		margin: 0 auto;
		display: flex;
	}

	.three_left {
		flex: 1;
		height: 100rpx;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.three_left image {
		width: 36rpx;
		height: 37rpx;
	}

	.three_left text {
		color: #333333;
		font-size: 25rpx;
		margin-left: 10rpx;
	}

	.three_right {
		flex: 1;
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		color: #FF412D;
		font-size: 32rpx;
		font-weight: bold;
	}

	/* tip */
	.tip_box {
		width: 90%;
		margin: 0 auto;
		/* height: 180rpx; */
		background: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 22rpx;
	}

	.tip_part1 {
		display: flex;
	}

	.tip_title {
		/* flex: 1; */
		height: 80rpx;
		display: flex;
		justify-content: left;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 30rpx;
	}

	.tip_rider {
		/* flex: 1; */
		font-size: 20rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-left: 30rpx;
	}

	.tip_rider text {
		font-size: 30rpx;
	}

	.tip_content {
		width: 90%;
		margin: 0 auto;
		font-size: 27rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
		margin-top: 15rpx;
		padding-bottom: 15rpx;
	}

	.u-line {
		border-bottom-width: 3px !important;
	}

	/* 订单信息 */
	.order_box {
		width: 90%;
		margin: 0 auto;
		/* height: 300rpx; */
		background: #ffffff;
		margin-top: 20rpx;
		border-radius: 22rpx;
	}

	.order_title {
		width: 90%;
		margin: 0 auto;
		font-size: 32rpx;
		font-weight: 600;
		line-height: 67rpx;
		letter-spacing: 3rpx;
	}

	.order_list {
		display: flex;
	}

	.order_name {
		flex: 1;
		margin-left: 35rpx;
		color: #999999;
		font-size: 25rpx;
		height: 75rpx;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.order_numbers {
		flex: 1;
		color: #333333;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 26rpx;
		margin-right: 35rpx;
	}

	/* 费用明细 */
	.income_name {
		flex: 1;
		margin-left: 35rpx;
		color: #999999;
		font-size: 26rpx;
		height: 75rpx;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.income_numbers {
		flex: 1;
		color: #333333;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 26rpx;
		margin-right: 35rpx;
	}

	.income_numbers1 {
		flex: 1;
		color: #FF2400;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 26rpx;
		margin-right: 35rpx;
	}

	/* 接单按钮 */
	.tabbar_btn {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn {
		width: 90%;
		height: 80rpx;
		background: #FF7F00;
		border-radius: 21rpx;
		color: white;
		text-align: center;
		line-height: 80rpx;
		font-size: 26rpx;
	}
</style>