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 style="padding: 0 30rpx; font-size: 20px" v-if="orderDelites.orderPaySequence">#{{ orderDelites.orderPaySequence }}</view>
				<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 class="flex"
				v-if="item.indentState=='4'||item.indentState=='7'">
				<view class="btn_pai" @click.stop="paiOrder(item)">拍照</view>
			</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="600rpx">
			<view class="receipt_code">
				<view class="code_title">填写转单信息（二选一即可）</view>
				<u-input v-model="phone" type="number" placeholder="填写转单人手机号码" :border="border" />
				<u-input v-model="zhuanName" type="text" 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>

		<!-- 用于图片压缩的canvas画布 -->
		<canvas
			:style="{
				width: cw + 'px',
				height: cw + 'px',
				position: 'absolute',
				zIndex: -1,
				left: '-10000rpx',
				top: '-10000rpx'
			}"
			canvas-id="zipCanvas"
		></canvas>
		<!--画布结束-->
	</view>
</template>

<script>
import configdata from '@/common/config.js'
import getLessLimitSizeImage from '@/utils/imageCompress.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: '',
			zhuanName: '', //转单人姓名
			alertPhone: false, //确认收货拍照弹出框
			alertduan: false, //确认收货选择短信框
			goodsPicture: [],
			count: 3,
			duanxin: [], //发送的短信
			qiPhone: '', //骑手电话
			//画板边长默认是屏幕宽度，正方形画布
			cw: uni.getSystemInfoSync().windowWidth
		}
	},
	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.zhuanName = ''
			this.indentId = indentId
			this.showOrder = true
		},
		zhuandan() {
			this.$Request
				.postT('/app/tbindent/transferOfOrder', {
					indentId: this.indentId,
					phone: this.phone,
					realName: this.zhuanName
				})
				.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.orderId = e.orderId
				this.querenduanxin()
				//需拍照的弹出框
				this.alertduan = 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.tempFiles.length; i++) {
						//这里的id和页面中写的html代码的canvas的id要一致
						let canvasId = 'zipCanvas'
						//原图的路径
						let imagePath = res.tempFiles[i].path
						//大小限制
						let limitSize = 1024 * 2
						//初始绘画区域是画布自身的宽度也就是屏幕宽度
						let drawWidth = uni.getSystemInfoSync().windowWidth
						let that = this
						getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, that, (resPath) => {
							uni.showLoading({
								title: '上传中'
							})
							uni.uploadFile({
								url: that.config('APIHOST1') + '/alioss/upload',
								filePath: resPath,
								name: 'file',
								success: (uploadFileRes) => {
									if (e == 1) {
										if (that.goodsPicture.length < 2) {
											that.goodsPicture.push(JSON.parse(uploadFileRes.data).data)
										}
									}
									uni.hideLoading()
									this.querenduanxin()
								},
								fail: () => {
									uni.showToast({
										title: '上传失败',
										icon: 'error'
									})
								}
							})
						})
					}
				}
			})
		},
		// 图片删除
		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
				.getT('/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
				.postJson('/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>