moxuan_takeaway_shanghu/pages/order/orderDet.vue

<template>
	<view class="pages">
		<!-- 余额 -->
		<view class="tosend">
			<view class="tosend_text" v-if="dataDet.status == 6">制作中...</view>
			<view class="tosend_text" v-if="dataDet.status == 3 && dataDet.orderType == 1">待取餐</view>
			<view class="tosend_text" v-if="dataDet.status == 3 && dataDet.orderType == 2 && dataDet.riderUserId">配送中
			</view>
			<view class="tosend_text" v-if="dataDet.status == 3 && dataDet.orderType == 2 && dataDet.riderUserId==null">
				待配送</view>
			<view class="tosend_text" v-if="dataDet.status == 4">已完成</view>
			<view class="tosend_text" v-if="dataDet.status == 5">已取消</view>
			<view class="tosend_text" v-if="dataDet.status == 7">待接单</view>
			<!-- <view class="btnCm" v-if="item.riderUserId">配送中</view>
									<view class="btnCm" v-else>待派送</view> -->

			<view class="tosend_cont" style="position: relative;margin-top: 20upx;" v-if="dataDet.orderType==2">
				<image src="../../static/images/order/dizhi.png"
					style="position: absolute;width: 32rpx;height: 40rpx;top: 50rpx;left: 32rpx;"></image>
				<view class="tosend_header_text" style="margin-left: 64rpx;"
					@tap="bindGps(address.lat,address.lng,address.addressDetail)">{{address.province}}{{address.city}}{{address.district}}{{address.addressDetail}}
				</view>
				<view class="tosend_cont_infor" style="margin-top: 0;margin-left: 64rpx;">
					<view class="tosend_cont_infor_le" @click="bindphone(address.userPhone)">
						{{address.userName}}&nbsp;&nbsp;{{address.userPhone}}
					</view>
					<!-- <view class="tosend_cont_infor_ri">{{dataDet.orderCode}}</view> -->
				</view>
			</view>
			<view class="tosend_header" style="margin-top: 20upx;">
				<!-- 排序 -->
				<view class="cont_two_top">
					<view class="cont_two_top_le" v-if="dataDet.status == 3">取餐号码</view>
					<!-- <view class="cont_two_top_ri" v-if="dataDet.status == 6">制作中</view> -->
				</view>
				<view v-if="dataDet.status == 3 && dataDet.orderType == 1" class="cont_two_text">{{dataDet.orderCode}}
				</view>
				<view v-if="dataDet.status == 3 && dataDet.orderType == 1" class="cont_two_text2">
					前面还有<text>{{dataDet.countOrder?dataDet.countOrder:0}}</text>个人排队
				</view>
				<view v-if="dataDet.status != 3">
					<view class="flex justify-between">
						<view>取餐号码</view>
						<!-- <view class="cont_two_top_ri">制作中</view> -->
					</view>
					<view style="font-size:58upx;" class="text-center text-bold padding-tb">{{dataDet.orderCode}}</view>
				</view>
				<!-- 商品列表 -->
				<view class="tosend_header_food" v-for="(item,index) in dataDet.orderGoodsList" :key='index'>
					<view class="tosend_header_food_le">
						<image :src="item.goodsPicture" alt="加载失败" style="border-radius: 10rpx;"></image>
					</view>
					<view class="tosend_header_food_ce justify-between">
						<view class="tosend_header_food_text">{{item.goodsName}}</view>
						<view class="tosend_header_food_text2" v-if="item.skuMessage">{{item.skuMessage}}</view>
						<view class="tosend_header_food_text2">打包费</view>
					</view>
					<view class="tosend_header_food_ri">
						<view class="tosend_header_food_text"><text>¥</text>{{item.goodsPrice}}</view>
						<view class="tosend_header_food_text2">×{{item.goodsNum}}</view>
						<view class="tosend_header_food_text2"><text>¥</text>{{item.goodsPack}}/份</view>
					</view>
				</view>
				<view class="tosend_header_do do_top" v-if="dataDet.errandMoney>0&& dataDet.orderType == 2">
					<view>配送费</view>
					<view class="tosend_header_do_ri">￥{{dataDet.errandMoney}}</view>
				</view>
				<!-- <view class="tosend_header_do" v-if="dataDet.packMoney>0&& dataDet.orderType == 2">
					<view>打包费</view>
					<view class="tosend_header_do_ri">￥{{dataDet.packMoney}}</view>
				</view> -->
				<view class="tosend_header_do do_bot" v-if="dataDet.couponMoney>0">
					<view>优惠券</view>
					<view class="tosend_header_do_ri">-￥{{dataDet.couponMoney}}</view>
				</view>
				<view class="tosend_header_do margin-top">
					<view class="tosend_header_do_le2">实付</view>
					<view class="tosend_header_do_ri2"><text>￥</text>{{dataDet.payMoney}}</view>
				</view>
			</view>

			<!-- #ifdef APP -->
			<map v-if="dataDet.riderUserId != null && latitude && longitude&& dataDet.status == 3" id="map" @tap="goMap"
				style="width: 95%; height: 300rpx;margin-top: 20rpx;margin-left: 20rpx;" :markers="markers"
				:latitude="latitude" :longitude="longitude"></map>
			<!-- #endif -->

			<!-- #ifndef APP -->
			<map v-if="dataDet.riderUserId != null && latitude && longitude&& dataDet.status == 3" id="map" @tap="goMap"
				style="width: 95%; height: 300rpx;margin: 20rpx auto 0;" :markers="markers" :latitude="latitude"
				:longitude="longitude"></map>
			<!-- #endif -->
			<!-- 联系骑手 -->
			<view class="rider_box" v-if="dataDet.riderUserId!= null">
				<view class="flex justify-between align-center padding">
					<view style="font-size: 31rpx;color: black;">联系骑手...</view>
					<image @click="gotousu()" src="../../static/images/my/tousu.png" style="width: 43rpx;height: 39rpx;"
						mode=""></image>
				</view>
				<view>
					<u-line color="#F2F2F2" />
				</view>
				<view style="padding: 20rpx 25rpx;display: flex;justify-content: space-between;align-items: center;">
					<view style="display: flex;">
						<view class="rider_left">
							<image :src="dataDet.riderAvatar"></image>
						</view>
						<view style="margin-left: 10rpx;color: #333333;">
							<view>{{dataDet.riderUserName}}</view>
							<view>{{riderPhone}}</view>
						</view>
					</view>
					<view class="phone" @click="bindphone(dataDet.riderPhone)">联系TA</view>
				</view>
			</view>
			<!-- 评论信息 -->
			<view class="tosend_cont" v-if="dataDet.evaluateMessage">
				<view class="tosend_header_text">评论信息</view>
				<view>
					<view class="flex align-center">
						<image :src="dataDet.avatar?dataDet.avatar:'../../static/logo.png'"
							style="width: 40px;height: 40px;border-radius: 50%;"></image>
						<view class="flex justify-between align-center" style="width: 100%;margin-left: 5upx;">
							<view class="text-bold text-df">{{dataDet.userNickName}}</view>
							<view style="color: #999999;font-size: 24rpx;" v-if="dataDet.ecreateTime">
								{{dataDet.ecreateTime}}
							</view>
						</view>
					</view>
					<view class=" padding-left margin-left-xl" style="font-size: 30upx;">{{dataDet.evaluateMessage}}
					</view>
					<view class="flex justify-end padding-top-sm margin-right" @click="show = true"
						v-if="!dataDet.shopReplyMessage">
						<image src="../../static/images/order/pinglun.png" style="width: 20px;height: 20px;"></image>
					</view>
					<view class="padding-left margin-left-xl margin-top-sm" v-else>
						<view class="flex align-center">
							<view class=" flex align-center text-df" style="color: #999999;">
								<view class="text-df">商家回复:</view>{{dataDet.shopReplyMessage}}
							</view>
						</view>
						<!-- <view class="text-lg padding-left margin-left-xl">{{dataDet.shopReplyMessage}}</view> -->
					</view>
				</view>
			</view>
			<!-- 其他信息 -->
			<view class="tosend_cont ">
				<view class="tosend_header_text">其他信息</view>
				<view class="tosend_cont_infor" v-if="dataDet.remark">
					<view class="tosend_cont_infor_le">订单备注</view>
					<view class="tosend_cont_infor_ri">{{dataDet.remark}}</view>
				</view>
				<view class="tosend_cont_infor">
					<view class="tosend_cont_infor_le">取餐号码</view>
					<view class="tosend_cont_infor_ri">{{dataDet.orderCode}}</view>
				</view>
				<view class="tosend_cont_infor" v-if="dataDet.phone" @tap="call(dataDet.phone)">
					<view class="tosend_cont_infor_le">取餐电话</view>
					<image src="../../static/images/my/phone.png" style="width: 40upx;height: 40upx;"></image>
					<!-- <view class="tosend_cont_infor_ri">{{dataDet.phone}}</view> -->
				</view>
				<view class="tosend_cont_infor">
					<view class="tosend_cont_infor_le">下单时间</view>
					<view class="tosend_cont_infor_ri">{{dataDet.payTime}}</view>
				</view>
				<view class="flex justify-between align-center" style="margin-top: 3%;">
					<view class="tosend_cont_infor_le">订单编号</view>
					<view class="tosend_cont_infor_ri">{{dataDet.orderNumber}}</view>
					<view class="text-orange margin-left-lg" @click="copy(dataDet.orderNumber)">复制</view>
				</view>
				<view class="tosend_cont_infor padding-bottom-sm">
					<view class="tosend_cont_infor_le">支付方式</view>
					<view class="tosend_cont_infor_ri" v-if="dataDet.payType==1">微信支付</view>
					<view class="tosend_cont_infor_ri" v-if="dataDet.payType==2">余额支付</view>
				</view>
			</view>

			<view class="addgood" @click="refund()" v-if="dataDet.status == 6">退款</view>
			<view class="addgood" @click="finish()" v-if="dataDet.status == 6">制作完成</view>
			<view class="addgood" @click.stop="xiaoPiao()"
				v-if="dataDet.status == 6||dataDet.status == 3||dataDet.status == 4">补打小票</view>

			<view class="addgood" @click="refund()" v-if="dataDet.status == 3&&dataDet.orderType==2">退款</view>
			<view class="addgood" @click="peisong()" v-if="dataDet.status == 3&&dataDet.orderType==1">制作已完成</view>
			<view class="addgood" v-if="dataDet.status == 3&&dataDet.orderType==2&&dataDet.autoSendOrder == 1"
				@click.stop="succOrder(dataDet)">完成送达</view>
			<!-- <view class="addgood" @click="peisong()" v-if="dataDet.status == 3&&dataDet.orderType==2">餐品已完成,等待配送</view> -->
			<!-- 聊天室 -->
			<view class="chats" @click.stop="chat(dataDet)">
				<image src="../../static/images/img/chats.png"></image>
				<view class="shopxiaoix" v-if="ShopUnreadCount">{{ShopUnreadCount}}</view>
			</view>
		</view>

		<!-- 评论弹框 -->
		<u-popup v-model="show" mode="bottom" border-radius="14" :closeable="closeable">
			<view>
				<view class="margin padding-tb">
					<u-input v-model="pinglun" type="textarea" height="200" placeholder="请填写回复的内容" maxlengt="200"
						:clearable="false" style="background:#F5F5F5;" />
				</view>
				<view class="btn" @click="bindEvaluate()">提交</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderNumber: '',
				dataDet: {},
				orderType: '',
				latitude: '',
				longitude: '',
				markers: [], //标记点
				orderId: '',
				address: {},
				riderPhone: '',
				ShopUnreadCount: 0,
				pinglun: '',
				show: false,
				closeable: true,
				first: false
			}
		},
		onLoad(option) {
			uni.showLoading({
				title: '加载中...'
			})
			console.log(option)
			this.orderNumber = option.orderNumber
			this.orderId = option.orderId
			this.first = false
			this.getDataDet()
			let that = this
			setInterval(function() {
				that.getShopUnreadCount()
			}, 10000)

		},
		onShow() {
			this.first = false
		},
		methods: {
			//评论
			bindEvaluate() {
				let data = {
					shopReplyMessage: this.pinglun,
					orderNumber: this.orderNumber
				}
				this.$Request.postT("/admin/order/shopReplyEvaluate", data).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						this.show = false
						this.getDataDet()
					}
				});
			},
			goMap() {
				uni.navigateTo({
					url: '/pages/order/orderMap?indentNumber=' + this.orderNumber+'&orderId='+this.orderId
				})
			},
			//投诉
			gotousu() {
				console.log(this.orderNumber)
				uni.navigateTo({
					url: '/pages/my/comments?indentNumber=' + this.orderNumber
				})
			},
			// 拨打电话
			bindphone(e) {
				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			// 一键导航
			bindGps(latitude, longitude, name, detailsadd) {
				console.log(latitude, longitude, name, detailsadd)
				uni.openLocation({
					latitude: latitude - 0, //要去的纬度-地址       
					longitude: longitude - 0, //要去的经度-地址
					name: name, //地址名称
					address: detailsadd, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			//聊天室
			chat(e) {
				// console.log(e)
				uni.navigateTo({
					url: '/pages/my/im?orderId=' + e.orderId
				})
			},
			//获取骑手位置
			getaddress(addressId, riderUserId) {
				console.log(addressId)
				let data = {
					addressId: addressId
				}
				this.$Request.getA("/app/address/selectAddressById", data).then(res => {
					// uni.hideLoading()
					console.log(res)
					if (res.code == 0) {
						this.address = res.data
						this.getRider(res.data.lat, res.data.lng, riderUserId)
					}
				});
			},
			//获取骑手信息
			getRider(lat, lng, riderUserId) {
				console.log(lat, lng, riderUserId, '111111')
				let data = {
					lat: lat,
					lng: lng,
					riderUserId: riderUserId
				}
				this.$Request.getA("/timedtask/selectRiderLocation", data).then(res => {

					if (res.code == 0) {
						console.log(res.data, '经纬度')
						this.latitude = res.data.riderLocation.lat;
						this.longitude = res.data.riderLocation.lng;

						this.markers = [{
							id: 1,
							latitude: res.data.riderLocation.lat,
							longitude: res.data.riderLocation.lng,
							iconPath: '../../static/images/order/rider.png',
							width: '40',
							height: '40'
						}]
						uni.hideLoading()
					}
				});
			},
			getDataDet() {
				let data = {
					// page: 1,
					// limit: 10,
					orderId: this.orderId
				}
				this.$Request.getA("/app/order/selectOrderById", data).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						this.dataDet = res.data

						let start = res.data.orderCode.length - 3;
						this.dataDet.orderCode = res.data.orderCode.substring(start, res.data.orderCode.length)
						this.getaddress(res.data.addressId, res.data.riderUserId)
						this.dataDet.orderGoodsList.forEach(res => {
							res.goodsPicture = res.goodsPicture.split(',')
						})
						this.dataDet.address = JSON.parse(this.dataDet.address)
						this.riderPhone = this.dataDet.riderPhone
						this.riderPhone = this.riderPhone.replace(this.dataDet.riderPhone.substr(3, 4), "****")
						// console.log(this.dataDet);
						// let phone = this.dataDet.riderPhone;
						// let result = phone.substring(0, 3) + "****" + phone.substring(7, 11);
						// // console.log(this.dataDet.riderPhone,result);
						// this.dataDet.riderPhone = result
						this.orderType = res.data.orderType
						console.log(this.dataDet, '2222222')
					}
				});
			},
			copy(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			// 打电话
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			// 打开地图
			openMap(e) {
				let latitude = e.latitude;
				let longitude = e.longitude;
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					name: e.address,
					success: function() {
						console.log('success');
					}
				});
			},
			// 完成送达
			succOrder(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认完成送达吗?',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							let data = {
								orderId: e.orderId,
								// orderNumber: e.orderNumber,
								// shopId: that.shopId,
								// addressId: e.addressId,
								// status: 3
							}
							that.$Request.postT("/admin/order/accomplishOrder", data).then(res => {
								if (res.code == 0) {
									uni.navigateBack()
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			refund() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认退款吗?',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							let data = {
								orderId: that.dataDet.orderId
							}
							that.$Request.postA("/admin/order/adminCancelOrder", data).then(res => {
								if (res.code == 0) {
									let pages = getCurrentPages(); // 当前页面
									let beforePage = pages[pages.length - 2]; // 上一页
									uni.navigateBack({
										success: function() {
											beforePage.onLoad(); // 执行上一页的onLoad方法
										}
									});
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 补打小票
			xiaoPiao() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认补打小票吗?',
					success: function(re) {
						if (re.confirm) {
							console.log('用户点击确定');
							let data = {
								orderId: that.dataDet.orderId,
								// orderNumber: e.orderNumber,
								// status: 8
							}
							that.$Request.post("/admin/order/print", data).then(res => {
								if (res.code == 0) {
									// that.page = 1
									// that.getOrderList()
								} else {
									that.$queue.showToast(res.msg)
								}
							});
						} else if (re.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			finish(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认订单完成吗?',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							let data = {
								orderId: that.dataDet.orderId,
								orderNumber: that.dataDet.orderNumber,
								status: 3
							}
							that.$Request.postJsonA("/admin/order/updateOrder", data).then(res => {
								if (res.code == 0) {
									let pages = getCurrentPages(); // 当前页面
									let beforePage = pages[pages.length - 2]; // 上一页
									uni.navigateBack({
										success: function() {
											beforePage.onLoad(); // 执行上一页的onLoad方法
										}
									});
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			peisong(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认开始配送吗?',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							let data = {
								orderId: that.dataDet.orderId,
								orderNumber: that.dataDet.orderNumber,
								status: 4
							}
							that.$Request.postJsonA("/admin/order/updateOrder", data).then(res => {
								if (res.code == 0) {
									let pages = getCurrentPages(); // 当前页面
									let beforePage = pages[pages.length - 2]; // 上一页
									uni.navigateBack({
										success: function() {
											beforePage.onLoad(); // 执行上一页的onLoad方法
										}
									});
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//获取用户聊天消息
			getShopUnreadCount() {
				let that = this
				let data = {
					ordersId: that.orderId
				}
				that.$Request.getT("/shop/ordersChat/selectShopUnreadCount", data).then(res => {
					if (res.code == 0) {
						// that.ShopUnreadCount = res.data
						if (res.data > 0) {
							if (this.ShopUnreadCount != res.data && !this.first) {
								that.aplayAudio()
								this.ShopUnreadCount = res.data
								uni.showModal({
									title: '消息',
									content: '有' + res.data + '条消息，请前往聊天列表处理。',
									success: (ret) => {
										if (ret.confirm) {
											uni.redirectTo({
												url: '/pages/my/liaotian'
											})
											this.first = true
										} else {
											console.log('else', ret)
											that.defineCallBack()
										}
									}
								});
								// this.chatNum = data.data
							}
						} else {
							that.ShopUnreadCount = 0
						}
					}
				});
			},
			//消息提示
			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 scoped>
	/* 余额 */
	.tosend {
		width: 100%;
		height: 280rpx;
		/* background: -webkit-linear-gradient(top, #FCD202, #F5F5F5); */
	}

	.tosend_text {
		padding: 3% 3% 0%;
		font-size: 38upx;
		font-weight: 800;
		color: #333333;
	}

	.tosend_header {
		width: 94%;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 18rpx;
		padding: 3%;
	}

	/* 排序 */
	.cont_two_top {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.cont_two_top_le {
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}

	.cont_two_top_ri {
		padding: 6rpx 10rpx;
		text-align: center;
		background: rgba(255, 19, 10, 0.2);
		font-size: 24rpx;
		border: 2rpx solid #FF130A;
		color: #FF130A;
		opacity: 0.6;
		border-radius: 8rpx;
	}

	.cont_two_text {
		font-size: 56rpx;
		text-align: center;
		font-weight: bold;
		color: #333333;
		margin: 5% 0;
		line-height: 32rpx;
	}

	.cont_two_text2 {
		font-size: 30rpx;
		width: 100%;
		font-weight: 500;
		color: #333333;
		text-align: center;
		padding-bottom: 4%;
		line-height: 32rpx;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.cont_two_text2 text {
		color: #FF130A;
	}

	/* 商品列表 */
	.tosend_header_text {
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 2;
		font-size: 30rpx;
	}

	.tosend_header_food {
		width: 100%;
		display: flex;
		margin-top: 35rpx;
		justify-content: space-between;
	}

	.tosend_header_food_le {
		/* width: 15%; */
	}

	.tosend_header_food_le image {
		width: 135rpx;
		height: 135rpx;
	}

	.tosend_header_food_ce {
		/* margin: 0 0 0 4%; */
		width: 57%;
		margin-left: 10upx;
	}

	.tosend_header_food_ri {
		text-align: right;
		width: 25%;
	}

	.tosend_header_food_text {
		font-size: 34rpx;
		font-weight: 500;
		color: #333333;
		line-height: 1.8;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tosend_header_food_text text {
		font-size: 25rpx;
	}

	.tosend_header_food_text2 {
		font-size: 26rpx;
		/* font-weight: 500; */
		color: #999999;
	}

	.do_top {
		padding-top: 3%;
	}

	.do_bot {
		padding-bottom: 3%;
		border-bottom: 2rpx solid #E6E6E6;
	}

	.tosend_header_do {
		width: 100%;
		color: #333333;
		font-size: 30rpx;
		display: flex;
		line-height: 1.5;
	}

	.tosend_header_do view {
		flex: 1;
	}

	.tosend_header_do_ri {
		text-align: right;
	}

	.tosend_header_do_le2 {
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		padding-top: 1.5%;
	}

	.tosend_header_do_ri2 {
		text-align: right;
		color: #EA0000;
		font-size: 40rpx;
	}

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

	/* 其他信息 */
	.tosend_cont {
		width: 94%;
		background-color: #FFFFFF;
		margin: 3% auto;
		border-radius: 18rpx;
		padding: 3%;
	}

	.tosend_cont_infor {
		display: flex;
		margin-top: 30rpx;
	}

	.tosend_cont_infor_le {
		flex: 1;
		color: #999999;
	}

	.tosend_cont_infor_ri {
		flex: 2;
		text-align: right;
		color: #333333;
	}

	.tosend_cont_text {
		text-align: right;
	}

	.addgood {
		width: 685upx;
		height: 88upx;
		background: #FFCC00;
		border-radius: 8upx;
		text-align: center;
		line-height: 88rpx;
		margin: 40rpx auto;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.chats {
		position: fixed;
		bottom: 70px;
		right: 15px;
	}

	.chats image {
		width: 60px;
		height: 60px;
	}

	/* 联系骑手 */
	.rider_box {
		width: 95%;
		margin: 0 auto;
		background: #ffffff;
		margin-top: 20rpx;
		border-radius: 10rpx;

	}

	.rider_left image {
		width: 80rpx;
		height: 85rpx;
		border-radius: 60%;
	}

	.phone {
		background: #FD6416;
		color: #ffffff;
		padding: 8rpx 15rpx;
		border-radius: 13rpx;
		font-size: 24rpx;
	}

	.shopxiaoix {
		background: red;
		color: #ffffff;
		width: 40rpx;
		height: auto;
		text-align: center;
		border-radius: 30rpx;
		position: relative;
		top: -66px;
		left: 35px;
	}

	.btn {
		width: 690upx;
		height: 88upx;
		margin: 30upx auto;
		background: #FCD202;
		box-shadow: 0px 10upx 20upx 0upx #FFD9B3;
		border-radius: 16upx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #000000;

	}
</style>