moxuan_takeaway_shanghu/pages/order/orderDet.vue

<template>
	<view class="pages">
		<!-- 余额 -->
		<view class="tosend">
			<view class="tosend_text" v-if="dataDet.status == 3 && dataDet.indentState == 2">待骑手接单</view>

			<view class="tosend_text" v-if="dataDet.status == 6 && dataDet.indentState == 2">制作中...</view>

			<view class="tosend_text" v-if="(dataDet.status == 3 || dataDet.status == 6) && dataDet.indentState == 3">骑手已接单</view>

			<view class="tosend_text" v-if="(dataDet.status == 3 || dataDet.status == 6) && dataDet.indentState == 4">骑手配送中</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 == 8">已退款</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 style="padding: 0 30rpx; font-size: 20px" v-if="dataDet.orderSequence">#{{ dataDet.orderSequence }}</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(dataDet.address.lat, dataDet.address.lng, dataDet.address.addressDetail)">
					{{ dataDet.address.province }}{{ dataDet.address.city }}{{ dataDet.address.district }}{{ dataDet.address.addressDetail }}
				</view>
				<view class="tosend_cont_infor" style="margin-top: 0; margin-left: 64rpx">
					<view class="tosend_cont_infor_le" @click="bindphone(dataDet.address.userPhone)">
						{{ dataDet.address.userName }}&nbsp;&nbsp;{{ dataDet.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_bot"
					v-if="dataDet.errandMoney > 0 && dataDet.orderType == 2 && dataDet.errandMoneyIsShop == '本单未达到商家满减金额，跑腿费由用户承担'"
				>
					<view>跑腿费</view>
					<view class="tosend_header_do_ri">￥{{ dataDet.errandMoney }}</view>
				</view>
				<view
					class="tosend_header_do do_bot"
					v-if="dataDet.errandMoney > 0 && dataDet.orderType == 2 && dataDet.errandMoneyIsShop == '商家未开启配送费满减，跑腿费由用户承担'"
				>
					<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.address.userPhone)">
					<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">
					<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 class="tosend_cont_infor" v-if="dataDet.orderType == 2 && dataDet.receivingTime">
					<view class="tosend_cont_infor_le">骑手取餐时间</view>
					<view class="tosend_cont_infor_ri">{{ dataDet.receivingTime }}</view>
				</view>

				<view class="tosend_cont_infor padding-bottom-sm" v-if="dataDet.finishTime">
					<view class="tosend_cont_infor_le">订单送达时间</view>
					<view class="tosend_cont_infor_ri">{{ dataDet.finishTime }}</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: '加载中...',
			mask: true // 是否显示透明蒙层，防止触摸穿透
		})
		console.log(option, 'kl')
		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,
							sendSmsFlag: 0
							// 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,
							isAppend: 1
							// 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>