moxuan_takeaway_qishou_1/pages/index/orderdetail/orderdetail.vue

<template>
	<view class="content">
		<view class="part_one u-skeleton-fillet" v-if="orderDelites.indentState=='3' || orderDelites.indentState=='4'">
			<view class="pickup" v-if="orderDelites.indentState=='3'">待取货...</view>
			<view class="pickup" v-if="orderDelites.indentState=='4'">配送中...</view>
			<view class="pickup_tit" v-if="orderDelites.indentState=='3'">抢单成功请及时取货送达</view>
			<view class="pickup_tit" v-if="orderDelites.indentState=='4'">取货成功请及时送达</view>
		</view>

		<view class="part_one u-skeleton-fillet" v-else>

			<view class="pickup" v-if="orderDelites.indentState=='5'">已完成...</view>
			<view class="pickup" v-if="orderDelites.indentState=='6'">已完成...</view>
			<view class="pickup" v-if="orderDelites.indentState=='7'">已完成...</view>
			<view class="pickup" v-if="orderDelites.indentState=='9'">已取消...</view>
			<view class="pickup" v-if="orderDelites.indentState=='10'">已取消...</view>
			<view class="pickup_tit">加油明天会更好！</view>

		</view>
		<view class="part_one u-skeleton-fillet" style="height: auto;"
			v-if="orderDelites.indentState=='3'|| orderDelites.indentState=='4' && orderDelites.indentType=='5'&& orderDelites.indentType!='3'">
			<view class="pickup">取货码</view>
			<view class="pickup_tit quhuoma">{{orderDelites.orderCode}}</view>
		</view>
		<view class="list_box1 u-skeleton-fillet">
			<view class="part2">
				<view class="box_add" style="padding-bottom: 12px;"
					v-if="orderDelites.indentType == 5||orderDelites.indentType == 1 || orderDelites.indentType == 2 || (orderDelites.indentType==3 &&orderDelites.buyType==1)">
					<view class="add_name">
						<view class="flex">
							<view class="buy">
								<image src="../../../static/rider/icon-buy.png"></image>
							</view>
							<view class="sh_name" @click="goStart()">
								{{orderDelites.shopAddressDetail}}
								<u-icon name="map"></u-icon>
							</view>
						</view>
						<view class="xs_add" @click="coll(orderDelites.shopPhone)">
							{{orderDelites.shopName?orderDelites.shopName:''}}<text
								style="margin-left: 10upx;">{{orderDelites.shopPhone?orderDelites.shopPhone:''}}</text>
							<u-icon name="phone"></u-icon>
						</view>
					</view>
				</view>
				<view class="box_add">
					<view class="add_name">
						<view class="flex">
							<view class="send">
								<image src="../../../static/rider/icon-send.png"></image>
							</view>
							<view class="sh_name" @click="goEnd()">
								{{orderDelites.userAddressDetail}}({{orderDelites.userProvince?orderDelites.userProvince:''}}
								{{orderDelites.userCity?orderDelites.userCity:''}}{{orderDelites.userDistrict?orderDelites.userDistrict:''}})
								<u-icon name="map"></u-icon>
							</view>
						</view>

						<view class="xs_add" @click="coll(orderDelites.userPhone)">
							{{orderDelites.userName?orderDelites.userName:''}}<text
								style="margin-left: 10upx;">{{orderDelites.userPhone?orderDelites.userPhone:''}}</text>
							<u-icon name="phone"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view v-if="orderDelites.indentType == 5" style="padding-bottom: 15px;"></view>
			<view class="part3" v-if="orderDelites.indentType != 5">
				<view class="three_left" v-if="orderDelites.predictTime">
					<image src="../../../static/rider/icon_data.png"></image>
					<text>{{orderDelites.predictTime}}分钟内送达</text>
				</view>
				<view class="three_right">{{orderDelites.errandMoney}}元</view>
			</view>
		</view>

		<!-- tip -->
		<view class="tip_box u-skeleton-fillet" 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" style="margin-right: 16upx;">
					商品预付:￥<text>{{orderDelites.prepayMoney}}</text>
				</view>
				<view class="box_two1" v-if="orderDelites.itemType">{{orderDelites.itemType}}</view>
				<view class="box_two1" v-if="orderDelites.serviceType">{{orderDelites.serviceType}}</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:''}}
			</view>
			<view class="tip_content" v-if="orderDelites.indentType == 4">
				{{orderDelites.serviceDetails?orderDelites.serviceDetails:''}}
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order_box u-skeleton-fillet">
			<view class="order_title">订单信息</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.createTime}}

				</view>
			</view>
			<view class="order_list">
				<view class="order_name">接单时间</view>
				<view class="order_numbers">{{orderDelites.receivingTime}}

				</view>
			</view>
			<view class="order_list" v-if="orderDelites.finishTime">
				<view class="order_name">完成时间</view>
				<view class="order_numbers">{{orderDelites.finishTime}}

				</view>
			</view>
			<view class="order_list padding-bottom-sm" 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 u-skeleton-fillet">
			<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 class="order_list">
				<view class="income_name">合计</view>
				<view class="income_numbers1">¥<text>{{orderDelites.riderMoney}}</text></view>
			</view>
		</view>
		<!-- 接单按钮 -->
		<view class="tabbar_btn"
			v-if="orderDelites.indentState=='3'||orderDelites.indentState=='4'||orderDelites.indentState=='5'">
			<!-- <view class="btn_left">
				联系TA
			</view>
			<view class="btn_right" @click="onshow">
				确定送达
			</view> -->
			<view class="btn_right" @click="quhuo(orderDelites.indentId)" v-if="orderDelites.indentState=='3'">确认取货
			</view>
			<view class="btn_left" @click="zhuanOrder(orderDelites.indentId)" v-if="orderDelites.indentState=='3'">
				转单
			</view>
			<view class="btn_left" v-if="orderDelites.indentState=='4'" @click="coll(orderDelites.userPhone)">
				联系TA</view>
			<view class="btn_right" v-if="orderDelites.indentState=='4'" @click.stop="shouhuo(orderDelites)">确认送达</view>
			<view class="btn_right" v-if="orderDelites.indentState=='5'">客户待确认</view>
		</view>
		<!-- 聊天室 -->
		<view style="position: fixed;bottom: 150rpx;right: 50rpx;">
			<image @tap="goChat(orderDelites.indentId,orderDelites.orderId)" src="../../../static/image/chats.png"
				style="width: 100rpx;height: 100rpx;border-radius: 50rpx;">
			</image>
			<view class="shopxiaoix" v-if="RiderUnreadCount">{{RiderUnreadCount}}</view>
		</view>

		<!-- 转单 -->
		<u-popup v-model="showOrder" mode="center" border-radius="18" :closeable="closeable" close-icon="close-circle"
			close-icon-size="45" width="580rpx" height="400rpx">
			<view class="receipt_code">
				<view class="code_title">填写手机号码</view>
				<u-input v-model="phone" type="number" placeholder="填写转单人手机号码" :border="border" />
				<view class="sure" style="margin-top: 40rpx;" @click="zhuandan">确定</view>
			</view>
		</u-popup>

		<!-- 收货码弹框 -->
		<u-popup v-model="show" mode="center" border-radius="18" :closeable="closeable" close-icon="close-circle"
			close-icon-size="45" width="580rpx" height="400rpx">
			<view class="receipt_code">
				<view class="code_title">填写收货码</view>
				<u-input v-model="shouhuoma" :type="type" placeholder="请输入收货码" :border="border" />
				<view class="sure" @click="querenSh">确定</view>
			</view>
		</u-popup>
		<!-- <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton> -->
		<!-- 确认收货拍照弹出框 -->
		<u-popup v-model="alertPhone" mode="center" border-radius="18" :closeable="closeable" close-icon="close-circle"
			close-icon-size="45" width="680rpx" height="900rpx" @close="onclose">
			<view class="receipt_code">
				<view class="phone_title">图片凭证</view>
				<view class="phone_title2">请在确认外卖送达后、通过拍照，进行现场还原</view>
				<view>
					<view class="flex" style="overflow: hidden;flex-wrap: wrap;">
						<view v-if="goodsPicture.length">
							<view class="margin-top flex margin-right-sm flex-wrap">
								<view class="flex"
									style="width: 200rpx;height: 200rpx;margin-right: 2rpx;position: relative;"
									v-for="(image,index) in goodsPicture" :key="index">
									<image :src="image" style="width: 100%;height: 100%;"></image>
									<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
										@click="removeImg(index,'lb')">
										<u-icon name="close-circle-fill" color="#FCD202" size="50rpx"></u-icon>
									</view>
				
								</view>
							</view>
						</view>
						<view class="margin-top" @click="addImages(1)" v-if="goodsPicture.length<=1">
							<view style="width: 200rpx;height: 200rpx;background: #f4f5f6;"
								class="flex justify-center align-center">
								<view>
									<view class="text-center">
										<image src="../../../static/addimg.png" style="width: 65rpx;height: 55rpx;">
										</image>
									</view>
									<view class="text-center text-black">添加图片</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="receipt_code" v-if="alertduan">
					<view class="code_title">是否确认送达</view>
					<view class="code_title2">已选订单：1单</view>
					<view class="code_title2">通知形式：短信</view>
					<view class="code_title2">通知内容：{{duanxin[0].templateContent.substring(0, 21)}}{{qiPhone}}</view>
					<view class="sure" @click="querenSh">确认送达</view>
				</view>
				<!-- <view class="sure" @click="querenduanxin">确认拍照</view> -->
			</view>
		</u-popup>
		<!-- 确认收货选择短信框 -->
		<!-- <u-popup v-model="alertduan" mode="center" border-radius="18" :closeable="closeable" close-icon="close-circle"
			close-icon-size="45" width="680rpx" height="600rpx">
			<view class="receipt_code">
				<view class="code_title">是否确认送达</view>
				<view class="code_title2">已选订单：1单</view>
				<view class="code_title2">通知形式：短信</view>
				<view class="code_title2">通知内容：{{duanxin[0].templateContent.substring(0, 21)}}{{qiPhone}}</view>
				<view class="sure" @click="querenSh">确认送达</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import configdata from '@/common/config.js';
	export default {
		data() {
			return {
				show: false,
				closeable: true,
				value: '',
				type: 'text',
				border: true,
				indentNumber: '',
				orderId: '',
				orderDelites: {},
				latitude: '', //骑手起点经度
				longitude: '', //骑手起点纬度
				qiJuli: '', //骑手距离
				shouhuoma: '',
				loading: true, // 是否显示骨架屏组件
				RiderUnreadCount: 0,
				indentId: '',
				showOrder: false,
				phone: '',
				alertPhone:false,//确认收货拍照弹出框
				alertduan:false,//确认收货选择短信框
				goodsPicture: [],
				count: 3,
				duanxin:[],//发送的短信
				qiPhone:'',//骑手电话
			}
		},
		onLoad(options) {
			this.qiPhone=uni.getStorageSync('phone')
			var that = this
			console.error(options)
			// uni.showLoading({
			// 	title: '加载中......',
			// 	icon: 'none'
			// })
			that.indentNumber = options.id
			that.orderId = options.orderId


			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()
				}

			});



			setInterval(function() {
				that.getRiderUnreadCount()
			}, 10000)

		},
		methods: {
			zhuanOrder(indentId) {
				this.phone = ''
				this.indentId = indentId
				this.showOrder = true
			},
			zhuandan() {
				this.$Request.postT('/app/tbindent/transferOfOrder', {
					indentId: this.indentId,
					phone: this.phone
				}).then(res => {
					if (res.code == 0) {
						this.phone = ''
						this.$queue.setData('zhuandan', this.indentId);
						uni.showToast({
							title: '转单成功',
							icon: "none"
						});
						setTimeout(d => {
							uni.navigateBack()
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				});
			},
			goChat(indentId, orderId) {
				uni.navigateTo({
					url: '/pages/riderMy/kefu/liaotianshi?indentId=' + indentId + '&orderId=' + orderId
				});
			},
			copyOrder(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			onshow() {
				this.show = true
			},
			coll(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			taskData() {
				if (this.indentNumber) {
					if (!this.longitude) {
						uni.showModal({
							title: '温馨提示',
							content: '未开启定位权限，无法获取数据，请开启一下',
							showCancel: false,
							cancelText: '',
							confirmText: '我知道了',
							success: res => {
								uni.navigateBack({

								})
							},
							fail: () => {},
							complete: () => {}
						});
						return;
					}
					this.$Request.postT('/app/tbindent/indentMessage', {
						indentNumber: this.indentNumber,
						ol: this.longitude,
						od: this.latitude
					}).then(res => {
						this.loading = false
						uni.hideLoading()
						if (res.code == 0 && res.data) {
							// this.jsjl(this.longitude,this.latitude,res.data.deliveryAddressLatitude, res.data.deliveryAddressLongitude)
							// this.jsjl(res.data.shipAddressLatitude, res.data.shipAddressLongitude,res.data.deliveryAddressLatitude, res.data.deliveryAddressLongitude)
							// if (res.data.distanceInitial > 1000) {
							// 	res.data.distanceInitials = (Number(res.data.distanceInitial) / 1000).toFixed(2)
							// }
							if (res.data.distance > 1000) {
								res.data.distances = (Number(res.data.distance) / 1000).toFixed(2)
							}
							this.orderDelites = res.data
							this.orderDelites.orderCode = res.data.orderCode.substring(res.data.orderCode.length -
								3)


							console.log('````', res.data)
						} else {
							console.log('失败：', res.data)
							uni.navigateBack({

							})
						}
						this.loading = false;
					});
				} else {
					this.$Request.postT('/app/tbindent/indentMessageByOrderId', {
						orderId: this.orderId,
						ol: this.longitude,
						od: this.latitude
					}).then(res => {
						this.loading = false
						uni.hideLoading()
						if (res.code == 0) {
							// this.jsjl(this.longitude,this.latitude,res.data.deliveryAddressLatitude, res.data.deliveryAddressLongitude)
							// this.jsjl(res.data.shipAddressLatitude, res.data.shipAddressLongitude,res.data.deliveryAddressLatitude, res.data.deliveryAddressLongitude)
							if (res.data.distanceInitial > 1000) {
								res.data.distanceInitials = (Number(res.data.distanceInitial) / 1000).toFixed(2)
							}
							if (res.data.distance > 1000) {
								res.data.distances = (Number(res.data.distance) / 1000).toFixed(2)
							}
							this.orderDelites = res.data
							this.orderDelites.orderCode = res.data.orderCode.substring(res.data.orderCode.length -
								3)


							console.log('````', res.data)
						} else {
							console.log('失败：', res.data)
						}
						this.loading = false;
					});
				}

			},
			quhuo(indentId) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认取到货吗',
					success: function(res) {
						if (res.confirm) {
							that.$Request.postJson('/app/tbindent/riderBuyGoods', {

								indentId: indentId,
								indentState: "4"
							}).then(res => {
								if (res.code == 0) {
									that.taskData()
									uni.showToast({
										title: '确认取货成功',
										icon: "none"
									});
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
								}
							});
						}
					}
				})

			},
			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: latitude - 0, //要去的纬度-地址       
					longitude: longitude - 0, //要去的经度-地址
					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) {
				console.log(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
				});
			},
			shouhuo(e) {
				console.log(e)
				this.indentNumber = e.indentNumber
				if (e.itemCodeFlag == 0 && e.indentType != 5) {
					this.show = true

				} else {
					//需拍照的弹出框
					this.alertPhone=true
					// this.querenSh()
				}

			},
			// 图片上传
			addImages(e) {
				if (e == 1) {
					var num = this.goodsPicture.length
					this.count = 2 - num
				}
			
				let that = this
				uni.chooseImage({
					count: this.count,
					sourceType: [ 'camera'],
					success: res => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							that.$queue.showLoading("上传中...");
							uni.uploadFile({ // 上传接口
								// url: that.config("APIHOST1") + '/alioss/upload', //真实的接口地址
								url: that.config("APIHOST1") + '/alioss/upload',
								// url: 'https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									if (e == 1) {
										if (that.goodsPicture.length < 2) {
											that.goodsPicture.push(JSON.parse(uploadFileRes.data)
												.data)
										}
									}
									uni.hideLoading();
									this.querenduanxin()
								}
							});
						}
					}
				})
			},
			// 图片删除
			removeImg(index, texts) {
				if (texts == 'lb') {
					this.goodsPicture.splice(index, 1)
				}
			},
			config: function(name) {
				var info = null;
				if (name) {
					var name2 = name.split("."); //字符分割
					if (name2.length > 1) {
						info = configdata[name2[0]][name2[1]] || null;
					} else {
						info = configdata[name] || null;
					}
					if (info == null) {
						let web_config = cache.get("web_config");
						if (web_config) {
							if (name2.length > 1) {
								info = web_config[name2[0]][name2[1]] || null;
							} else {
								info = web_config[name] || null;
							}
						}
					}
				}
				return info;
			},
			// 监听拍照框关闭
			onclose(){
				console.log('关闭')
				this.alertPhone=false
				this.alertduan = false
				this.goodsPicture=[]
			},
			// 获取确认送达短信模板
			querenduanxin() {
				// this.$Request.postT('/app/tb-indent-sms/template', {
				this.$Request.getT2('/app/tb-indent-sms/template', {
					// indentNumber: this.indentNumber,
					// itemCode: this.shouhuoma
				}).then(res => {
					console.log(res)
					this.duanxin=res.data.list
					if (res.code == 0) {
						this.page = 1;
						// this.alertPhone = false
						this.alertduan = true
			
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				});
			},
			querenSh() {
				var tupian=this.goodsPicture.toString()
				let that = this

				that.$Request.postJson2('/app/tbindent/riderDelivery', {
					imgs:tupian,
					smsTemplateId:this.duanxin[0].id,
					indentNumber: that.indentNumber,
					itemCode: that.shouhuoma
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.alertPhone = false
						// this.alertduan = false
						this.shows = false

						uni.showToast({
							title: '订单完成',
							icon: "none"
						});
						setTimeout(function() {
							uni.navigateBack()
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				});
			},
			getRiderUnreadCount() {
				let that = this
				let data = {
					ordersId: that.orderId
				}
				that.$Request.getT("/app/ordersChat/selectRiderUnreadCount", data).then(res => {
					if (res.code == 0) {
						if (res.data > 0) {
							if (that.RiderUnreadCount != res.data) {
								that.RiderUnreadCount = res.data
								that.aplayAudio()
								uni.showModal({
									title: '消息',
									content: '有' + res.data + '条消息，请前往聊天列表处理。',
									success: (ret) => {
										if (ret.confirm) {
											uni.navigateTo({
												url: '/pages/riderMy/kefu/liaotian'
											})

										} else {
											console.log('else', ret)
											that.defineCallBack()
										}
									}
								});
							}

						}

					}
				});
			},
			//消息提示
			aplayAudio() {
				// console.log('语音提示')
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src =
					'https://pw.xianmxkj.com/file/uploadPath/2022/01/19/0753211f78d718d44ee6372e33eae9ee.mp3';
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
				innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
			},
		}
	}
</script>

<style>
	body {
		background: #F5F5F5;
	}

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

	.part_one {
		width: 90%;
		margin: 0 auto;
		height: 120rpx;
		background: #ffffff;
		margin-top: 20rpx;
		border-radius: 23rpx;
		padding-top: 10rpx;
	}

	.pickup {
		width: 90%;
		margin: 0 auto;
		font-size: 29rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
		line-height: 60rpx;
	}

	.pickup_tit {
		color: #999999;
		font-size: 22rpx;
		width: 90%;
		margin: 0 auto;
	}

	.quhuoma {
		font-size: 50rpx;
		text-align: center;
		font-weight: 600;
		margin: 50rpx 0;
		height: 100rpx;
	}

	.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: 90%;
		margin: 0 auto;
		padding-top: 25rpx;
	}

	.box_add {
		display: flex;
	}

	.distance {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
	}

	.a {
		font-size: 16rpx;
	}

	.add_name {
		flex: 8;
		position: relative;
	}

	.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;
		margin-left: 10px;
	}

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

	.jiantou {
		margin-left: 23rpx;
	}

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

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

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

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

	.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_left {
		flex: 1;
		height: 80rpx;
		color: white;
		background: #33D442;
		text-align: center;
		line-height: 80rpx;
		border-radius: 16rpx;
		margin-left: 35rpx;
		margin-right: 20rpx;
		font-size: 26rpx;
		letter-spacing: 3rpx;
	}

	.btn_right {
		flex: 1;
		height: 80rpx;
		color: white;
		background: #FF7F00;
		text-align: center;
		line-height: 80rpx;
		border-radius: 16rpx;
		margin-left: 20rpx;
		margin-right: 35rpx;
		font-size: 26rpx;
		letter-spacing: 3rpx;
	}

	/* 收货码弹框 */
	.receipt_code {
		width: 90%;
		margin: 0 auto;
	}

	.code_title {
		width: 100%;
		line-height: 100rpx;
		font-size: 31rpx;
		font-weight: bold;
		text-align: center;
		letter-spacing: 2rpx;
		margin-top: 21rpx;
		margin-bottom: 25rpx;
	}

	.u-input--border {
		border: 1px solid #F2F2F2 !important;
		background: #F2F2F2 !important;
		color: #999999 !important;
		font-weight: 500 !important;
		letter-spacing: 2rpx !important;
	}

	.u-input__input {
		font-size: 30rpx;
		font-weight: bold;
		flex: 1;
		color: #999999 !important;
		min-height: 85rpx !important;
		margin-top: 7rpx;
	}

	.sure {
		width: 100%;
		height: 80rpx;
		background: #FF7F00;
		color: white;
		border-radius: 46rpx;
		text-align: center;
		line-height: 80rpx;
		margin-top: 30rpx;
		letter-spacing: 2rpx;
	}

	.shopxiaoix {
		background: red;
		color: #ffffff;
		width: 40rpx;
		height: auto;
		text-align: center;
		border-radius: 30rpx;
		position: relative;
		top: -66px;
		left: 35px;
	}
	/* 确认送达拍照框 */
	.phone_title{
		margin-top: 10px;
		width: 100%;
		height: 40px;
		/* background-color: #FF7F00; */
		text-align: center;
		line-height: 40px;
		/* color:#FFFFFF; */
	}
	.phone_title2{
		margin-top: 10px;
		text-align: center;
		color:#9d9d9d;
	}
	.code_title2 {
	    width: 100%;
	    line-height: 50rpx;
	    text-align: center;
	    letter-spacing: 2rpx;
	    margin-top: 21rpx;
	    margin-bottom: 25rpx;
	}
</style>