moxuan_takeaway_user/pages/index/shop/pindanDet.vue

<template>
	<view class="">
		<view class="margin-tb-sm bg-white padding">
			<view class="flex justify-between align-center">
				<view class="flex align-center">
					<image src="../../../static/tabbar/index.png" style="width: 40rpx;height: 37rpx;" mode=""></image>
					<view class="text-xl text-bold text-black margin-lr-xs">{{goodsShop.shopName}}</view>



					<!-- <image src="../../../static/images/index/right.png" style="width: 14rpx;height: 24rpx;" mode=""></image> -->
				</view>
				<view class="flex Switch ">
					<view @click="tabSwidth(1)" :class="orderType==1?'selSwitch':''">自取</view>
					<view @click="tabSwidth(2)" :class="orderType==2?'selSwitch':''">外卖</view>
				</view>
			</view>
			<view style="font-size: 20upx;color: #FF130A;margin-top: 10rpx;">
				<view>加入购物车就可以拼单哦拼单人购物车有商品先清空再添加</view>
			</view>
			<!-- <view class="text-gray">距离您16km</view> -->
			<view class="flex justify-between margin-top">
				<view class="btn1" @click="cancel()">取消拼单</view>

				<button class="btn" open-type="share">分享好友</button>
			</view>
		</view>
		<view v-if="myGoodList.length" class="margin-tb-sm bg-white padding">
			<view class="flex justify-between align-center padding-bottom">
				<image :src="myGoodList[0].avatar" mode="" style="width: 48rpx;height: 48rpx;border-radius: 48rpx;">
				</image>
				<view class="flex align-center flex-sub margin-left-sm">
					<view class="text-black text-lg text-bold">{{myGoodList[0].nickName}}</view>
					<!-- <view class="margin-left-sm">我自己</view> -->
				</view>
				<view class="flex">
					<view class="sBtn1" @click="clear()" v-if="userId == myGoodList[0].userId">清空</view>
					<view class="sBtn2" @click="goGoodsList" v-if="userId == myGoodList[0].userId">去点餐</view>
					<!-- <view class="sBtn2" @click="goGoodsList">修改订单</view> -->
				</view>
			</view>
			<u-line color="#E6E6E6" />
			<view class="padding-top" v-for="(item,index) in myGoodList" :key='index'>
				<view class="flex justify-between">
					<view class="text-black text-lg text-bold">{{item.goodsName}}</view>
					<view v-if="item.skuMessage">{{item.skuMessage}}</view>
					<view class="text-lg text-gray"><text class="text-sm">x</text>{{item.goodsNum}}</view>
				</view>
				<view v-if="index==(myGoodList.length-1)" class="flex justify-between margin-top-sm ">
					<view class="text-gray">总计</view>
					<view class="text-lg text-black text-bold"><text class="text-sm">¥</text>{{item.goodsPrice}}</view>
				</view>
			</view>
		</view>
		<view v-if="otherGoodList.length>0" v-for="(orders,index) in otherGoodList" :key='index'>
			<view v-if="(index!=0 && orders.userId!=otherGoodList[index-1].userId) || index==0"
				class="margin-tb-sm bg-white padding">
				<view class="flex justify-between align-center padding-bottom">
					<image :src="orders.avatar" style="width: 48rpx;height: 48rpx;border-radius: 48rpx;"></image>
					<view class="flex align-center flex-sub margin-left-sm">
						<view class="text-black text-lg text-bold">{{orders.nickName}}</view>

					</view>
					<view class="flex">

						<view class="sBtn3" @click="goGoodsList" v-if="userId == orders.userId">去点餐</view>
					</view>
				</view>
				<u-line color="#E6E6E6" />
				<view v-for="(item,index) in otherGoodList" :key='index'>
					<view class="padding-top" v-if="item.userId==orders.userId">
						<view class="flex justify-between">
							<view class="text-black text-lg text-bold">{{item.goodsName}}</view>
							<view v-if="item.skuMessage">{{item.skuMessage}}</view>
							<view class="text-lg text-gray"><text class="text-sm">x</text>{{item.goodsNum}}</view>
						</view>
						<view v-if="item.userId!=otherGoodList[index+1].userId"
							class="flex justify-between margin-top-sm ">
							<view class="text-gray">总计</view>
							<view class="text-lg text-black text-bold"><text class="text-sm">¥</text>{{item.goodsPrice}}
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>

		<empty v-if="!myGoodList.length && !otherGoodList.length" content='暂无商品'></empty>

		<view style="height: 100rpx;"></view>
		<!-- 结算 -->


		<!-- 结算 -->
		<view class="settlement" @click="isPopupShow">
			<view class="settlement_img">
				<image src="../../../static/images/index/diancan.png" mode=""></image>
				<view class="settlement_hot">{{number}}</view>
			</view>
			<view class="settlement_le">
				<text>￥</text>{{totalPrice}}
			</view>
			<view class="settlement_ri" @click.stop="goConfirm()">去结算</view>
		</view>
		<!-- 购物车弹窗 -->
		<u-popup v-model="popupShow" mode="bottom" border-radius="20">
			<view class="padding">
				<view class="flex justify-between align-center margin-bottom-sm">
					<view class="text-bold text-black text-df">拼单餐品</view>
					<view class="flex align-center">
						<image src="../../../static/images/index/delete.png" style="width: 28rpx;height: 31rpx;"
							mode=""></image>
						<text class="margin-left-xs" @click="cancel">取消拼单</text>
					</view>
				</view>
				<scroll-view scroll-y='true' class="popup">
					<view v-for="(item,ind) in goodsList.orderGoodsList[0]" :key='ind'>
						<view class="flex align-center margin-tb-sm">
							<image :src="item.goodsPicture[0]" style="width: 96rpx;height: 96rpx;border-radius: 10rpx;">
							</image>
							<view class="margin-left-sm">
								<view>{{item.goodsName}}</view>
								<view v-if="item.skuMessage">{{item.skuMessage}}</view>
							</view>
						</view>
						<view class="flex justify-between align-center">
							<view class="text-bold text-sm">¥<text class="text-lg">{{item.goodsPrice}}</text>
							</view>
							<view class="flex align-center justify-between">
								<view @click.stop="noAdd(item,ind)">
									<image src="../../../static/images/index/jian.png"
										style="width: 54rpx;height: 54rpx;"></image>
								</view>
								<view class="text-center margin-lr-xs">{{item.goodsNum}}</view>
								<view @click.stop="add(item,ind)">
									<image src="../../../static/images/index/add.png"
										style="width: 50rpx;height: 50rpx;"></image>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="settlement1 margin-top-lg">
				<view class="settlement_img">
					<image src="../../../static/images/index/diancan.png" mode=""></image>
					<view class="settlement_hot">{{number}}</view>
				</view>
				<view class="settlement_le">
					<text>￥</text>{{totalPrice}}
				</view>
				<view class="settlement_ri" @click.stop="goConfirm()">去结算</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: '快来和我一起拼个单吧！',
				path: '/pages/index/index?shopId=' + this.shopId + '&orderId=' + this.orderId,
				imageUrl: this.tuiguangImg,
			}
		},
		onShareTimeline(res) { //分享到朋友圈
			return {
				title: "快来和我一起拼个单吧！",
				path: '/pages/index/index?shopId=' + this.shopId + '&orderId=' + this.orderId,
				imageUrl: this.tuiguangImg,
			}
		},
		data() {
			return {
				dataList:[],
				orderType: 2,
				shopId: '',
				tuiguangImg: '',
				goodsNum: 0,
				totalPrice: 0,
				orderId: '',
				otherGoodList: [],
				myGoodList: [],
				goodsList: [],
				userId: '',
				popupShow: false,
				goodsShop: {},
				number: 0,
			}
		},
		onLoad(e) {
			this.shopId = e.shopId
			this.orderId = e.orderId ? e.orderId : uni.getStorageSync('orderId')
			this.userId = uni.getStorageSync('userId')
			this.getData();
		},
		onShow() {
			this.getOrderDetail();
			this.getGoodList()
			this.$Request.getT('/app/common/type/238').then(res => {
				if (res.code === 0) {
					this.tuiguangImg = res.data.value;
				}
			});
		},
		methods: {
			// 添加数量
			add(item, index) {
				// this.count++;
				console.log(item, index)
				this.goodsList.orderGoodsList[0][index].goodsNum++

				let data = {
					orderGoodsId: this.goodsList.orderGoodsList[0][index].id,
					type: 1,
					num: 1,
					shopId: this.shopId
				}
				this.$Request.get("/app/order/updateGoodsNum", data).then(res => {
					if (res.code == 0) {
						this.getGoodList()
						this.getOrderList();
					} else {
						this.$queue.showToast(res.msg);
						this.goodsList.orderGoodsList[0][index].goodsNum--
					}
				});
			},
			// 减少数量
			noAdd(item, index) {
				console.log(item, index)
				this.goodsList.orderGoodsList[0][index].goodsNum--
				// this.count--;
				let data = {
					orderGoodsId: this.goodsList.orderGoodsList[0][index].id,
					type: 2,
					num: 1,
					shopId: this.shopId
				}
				this.$Request.get("/app/order/updateGoodsNum", data).then(res => {
					if (res.code == 0) {
						this.getGoodList()
						this.getOrderList();
					}
				});
			},
			isPopupShow() {
				// uni.showToast({
				// 	title: '请返回到购物车模块操作',
				// 	icon: 'none'
				// })

				if (this.myGoodList.length > 0) {
					if (this.userId != this.myGoodList[0].userId) {
						uni.showToast({
							title: '请联系拼单发起人操作',
							icon: "none"
						})
						return
					} else {
						this.getOrderList();

					}
				} else {
					uni.showToast({
						title: '请联系拼单发起人操作',
						icon: "none"
					})
					return
				}

			},
			clear() {
				if (this.myGoodList.length > 0) {
					if (this.userId != this.myGoodList[0].userId) {
						uni.showToast({
							title: '请联系拼单发起人操作',
							icon: "none"
						})
						return
					}
				}
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定清空我的订单吗',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							let data = {
								shopId: that.shopId,
							}
							that.$Request.post("/app/order/emptyShoppingTrolley", data).then(res => {
								if (res.code == 0) {
									that.myGoodList = [];
									that.getGoodList()
								} else {
									that.$queue.showToast(res.msg);
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 取消订单
			cancel(e) {
				if (this.myGoodList.length > 0) {
					//检查是不是发起人
					if (this.userId != this.myGoodList[0].userId) {
						uni.showToast({
							title: '请联系拼单发起人操作',
							icon: "none"
						})
						return
					}
				}
				let that = this
				console.log(e)
				uni.showModal({
					title: '提示',
					content: '确认取消订单吗?',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							let data = {
								orderId: that.orderId
							}
							that.$Request.post("/app/order/deleteOrder", data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '订单取消成功',
										icon: 'none'
									})
									uni.removeStorageSync('orderId')
									setTimeout(function() {
										uni.navigateBack()
									}, 1000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 切换外卖/自提
			tabSwidth(e) {
				this.orderType = e
				this.getOrderList()
			},
			goGoodsList() {
				uni.setStorageSync('types', 1)
				uni.navigateBack({

				})
				// uni.navigateTo({
				// 	url: '/pages/index/shop/goodsList?shopId=' + this.shopId
				// })
			},
			// 获取购物车商品列表
			getOrderList() {
				// 显示加载提示
				uni.showLoading({
				    title: '加载中', // 加载提示文本
					mask: true, // 是否显示透明蒙层，防止触摸穿透
				});
				let data = {
					shopId: this.shopId,
					page: 1,
					limit: 1000,
					status: 1,
					// orderType: this.orderType
				}
				this.$Request.get("/app/order/selectAllOrderList", data).then(res => {
					if (res.code == 0 && res.data.pageUtils.list.length) {
						this.goodsList = res.data.pageUtils.list[0]

						if (this.goodsList && this.goodsList.orderGoodsList && this.goodsList.orderGoodsList[0]) {

							this.totalPrice = parseFloat(parseFloat(res.data.money).toFixed(2));
							this.goodsNum = 0

							this.goodsList.orderGoodsList[0].forEach(res => {
								res.goodsPicture = res.goodsPicture.split(',')
								this.goodsNum += res.goodsNum
							})
							this.popupShow = true
							if (!this.goodsList.orderGoodsList[0].length) {
								this.popupShow = false
							}


						}

					}
					uni.hideLoading()
				});
			},
			getOrderDetail() {
				let data = {
					orderId: this.orderId
				};
				this.$Request.getT('/app/order/selectOrderById',data).then(res => {
					if (res.code == 0 && res.data) {
						if (res.data.isPay && res.data.isPay == 1) {
							uni.showToast({
								title: '拼单已结束',
								icon: 'none'
							})
							setTimeout(function() {
								uni.removeStorageSync('orderId')
								uni.navigateBack()
							}, 1000)
						}
					}
				});
			},
			getGoodList() {
				this.number = 0;
				let data = {
					orderId: this.orderId,
				}

				this.$Request.get("/app/order/selectShareTheBill", data).then(res => {
					if (res.code == 0) {

						if (!res.data) {
							uni.showToast({
								title: '拼单已结束',
								icon: 'none'
							})
							setTimeout(function() {
								uni.removeStorageSync('orderId')
								uni.navigateBack()
							}, 1000)
						}
						this.goodsShop = res.data.goodsShop
						// this.goodsList = res.data.orderGoodsList
						this.myGoodList = res.data.parentShareTheBill
						let mySum = 0
						for (var i = 0; i < this.myGoodList.length; i++) {
							if (i == 0) {
								mySum = parseFloat(parseFloat(parseFloat(this.myGoodList[i].goodsPrice) *
									parseFloat(this.myGoodList[i].goodsNum)).toFixed(2))
								this.number += this.myGoodList[i].goodsNum
							} else {
								mySum = parseFloat(parseFloat(mySum + parseFloat(this.myGoodList[i].goodsPrice) *
									parseFloat(this.myGoodList[i].goodsNum)).toFixed(2))
								this.number += this.myGoodList[i].goodsNum
							}
							if (i == (this.myGoodList.length - 1)) {
								this.myGoodList[i].goodsPrice = mySum
								this.totalPrice = mySum
							}
						}


						this.otherGoodList = res.data.orderGoodsList
						var sum = 0
						for (var i = 0; i < this.otherGoodList.length; i++) {
							if (i == 0) {

								sum = parseFloat(parseFloat(parseFloat(this.otherGoodList[i].goodsPrice) *
									parseFloat(this.otherGoodList[i].goodsNum)).toFixed(2))

								this.number += this.otherGoodList[i].goodsNum
							} else {
								this.number += this.otherGoodList[i].goodsNum
								if (this.otherGoodList[i].userId == this.otherGoodList[i - 1].userId) {
									sum = parseFloat(parseFloat(sum + parseFloat(this.otherGoodList[i]
										.goodsPrice) * parseFloat(this.otherGoodList[i].goodsNum)).toFixed(
										2))
								} else {
									this.otherGoodList[i - 1].goodsPrice = sum
									sum = parseFloat(parseFloat(parseFloat(this.otherGoodList[i].goodsPrice) *
										parseFloat(this.otherGoodList[i].goodsNum)).toFixed(2))
								}
							}
							if (i == (this.otherGoodList.length - 1)) {
								this.otherGoodList[i].goodsPrice = sum
								this.totalPrice = parseFloat(parseFloat(parseFloat(this.totalPrice) + parseFloat(
									sum)).toFixed(2))
								// parseFloat(parseFloat(mySum).toFixed(2))
							}
						}

					} else {
						uni.removeStorageSync('orderId')
						this.$queue.showToast(res.msg);
						setTimeout(function() {
							uni.navigateBack()
						}, 1000)
					}
				});
			},
			// 获取店铺信息
			getData() {
				let data = {
					shopId: this.shopId
				}
				this.$Request.get("/app/goods/selectGoodsList", data).then(res => {
					if (res.code == 0 && res.data) {
						this.dataList = res.data.list
					}
				});
			},
			// 去结算
			goConfirm() {
				if (!this.userId) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
					return
				}

				if (this.myGoodList.length > 0) {
					if (this.userId != this.myGoodList[0].userId) {
						uni.showToast({
							title: '请联系拼单发起人结算订单',
							icon: "none"
						})
						return
					}
				}
				if (this.myGoodList.length > 0 || this.otherGoodList.length > 0) {
					let that = this;
					let goodstr1 = 0 //商品库的 必须次数
					let goodstr2 = 0 //购物车的 必须次数
					let regex = new RegExp('必选', 'g');
					let dataList = JSON.stringify(this.dataList)
					if (dataList.match(regex)) {
						goodstr1 = dataList.match(regex).length
						console.log("goodstr1----" + goodstr1)
						if (dataList.indexOf('必选') != -1) { //检测商品是否存在必选
							let goodsList = JSON.stringify(that.myGoodList)
							if (goodsList.match(regex)) {
								goodstr2 = goodsList.match(regex).length
								console.log("goodstr2----" + goodstr2)
								if (goodstr1 == goodstr2) { //检查购物车商品是否存在必须
									uni.navigateTo({
										url: '/pages/index/shop/confirmOrder?shopId=' + that.shopId + '&orderType=2&orderId=' +
											that.orderId
									})
								} else {
									uni.showToast({
										title: "有" + goodstr1 + "个必选商品，请选择后结算",
										icon: "none"
									})
									return
								}
							} else {
								uni.showToast({
									title: "有" + goodstr1 + "个必选商品，请选择后结算",
									icon: "none"
								})
								return
							}
						}
					} else {
						uni.navigateTo({
							url: '/pages/index/shop/confirmOrder?shopId=' + that.shopId + '&orderType=2&orderId=' +
								that.orderId
						})
					}
				} else {
					uni.showToast({
						title: '请先添加商品',
						icon: "none"
					})
				}

			},
		}
	}
</script>

<style>
	.Switch {
		width: 164rpx;
		height: 62rpx;
		color: #FFFFFF;
		background: #FCD202;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		padding: 2rpx;
	}

	.Switch>view {
		/* flex: 1; */
		width: 80rpx;
		text-align: center;
		line-height: 62rpx;
		height: 58rpx;
	}

	.selSwitch {
		color: #333333;
		background: #FFFFFF;
		border-radius: 30rpx;
	}

	.btn {
		width: 320rpx;
		height: 88rpx;
		color: #333333;
		font-size: 30rpx;
		font-weight: 500;
		text-align: center;
		line-height: 88rpx;
		border-radius: 50rpx;
		background: #FCD202;
		border: 2rpx solid #FCD202;
		margin: 0;
	}

	button::after {
		border: 2rpx solid #FCD202;
	}

	.btn1 {
		width: 320rpx;
		height: 88rpx;
		color: #999999;
		font-weight: 500;
		font-size: 30rpx;
		text-align: center;
		line-height: 88rpx;
		border-radius: 44rpx;
		border: 2rpx solid #CCCCCC;
	}

	.btn2 {
		width: 320rpx;
		height: 88rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		line-height: 88rpx;
		border-radius: 50rpx;
		background: #FCD202;
	}

	/* 结算 */
	.settlement {
		width: 94%;
		background-color: #000000;
		line-height: 3.4;
		border-radius: 49rpx;
		position: fixed;
		bottom: 10rpx;
		left: 3%;
		display: flex;
		justify-content: space-between;
	}

	.settlement_le {
		width: 45%;
		padding-left: 20%;
		color: #FFFFFF;
		font-size: 30rpx;
	}

	.settlement_le text {
		font-size: 22rpx;
	}

	.settlement_ri {
		width: 35%;
		background-color: #FCD202;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		text-align: center;
		border-top-right-radius: 49rpx;
		border-bottom-right-radius: 49rpx;
	}

	.settlement_img {
		width: 91rpx;
		height: 96rpx;
		position: absolute;
		// bottom: 30rpx;
		left: 5%;
	}

	.settlement_img image {
		width: 74rpx;
		height: 81rpx;
	}

	.settlement_hot {
		width: 35rpx;
		height: 35rpx;
		line-height: 35rpx;
		text-align: center;
		border-radius: 50%;
		position: absolute;
		top: -10rpx;
		right: 0;
		background-color: #FF130A;
		color: #FFFFFF;
		font-size: 20rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.sBtn1 {
		width: 128rpx;
		height: 48rpx;
		color: #999999;
		text-align: center;
		line-height: 48rpx;
		border: 2rpx solid #CCCCCC;
		border-radius: 24rpx;
	}

	.sBtn2 {
		width: 128rpx;
		height: 48rpx;
		color: #FF130A;
		text-align: center;
		line-height: 48rpx;
		border: 2rpx solid #FF130A;
		border-radius: 24rpx;
		margin-left: 20rpx;
	}

	.sBtn3 {
		width: 170rpx;
		height: 48rpx;
		color: #999999;
		text-align: center;
		line-height: 48rpx;
		border: 2rpx solid #CCCCCC;
		border-radius: 24rpx;
	}

	.popup {
		/* height: 500rpx; */
		max-height: 500rpx;
		/* overflow-y: auto; */
	}

	.popup {
		/* height: 500rpx; */
		max-height: 500rpx;
		/* overflow-y: auto; */
	}

	.tabBtn {
		/* background-color: #f6f6fa; */
		height: 60rpx;
		line-height: 60rpx;
		color: #999999;
		font-size: 38rpx;
	}

	.Switch {
		width: 164rpx;
		height: 62rpx;
		color: #FFFFFF;
		background: #FCD202;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		padding: 2rpx;
	}

	.Switch>view {
		/* flex: 1; */
		width: 80rpx;
		text-align: center;
		line-height: 62rpx;
		height: 58rpx;
	}

	.selSwitch {

		color: #333333;
		background: #FFFFFF;
		border-radius: 30rpx;
	}

	.hintPopul {
		width: 100%;
		height: 100vh;

		position: absolute;
		top: 0;
		background: rgba(0, 0, 0, .4);
	}

	.content {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		text-align: center;
		width: 500rpx;
		height: 400rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding-top: 120rpx;
	}

	.content image {
		position: absolute;
		top: -50rpx;
		left: 0;
		right: 0;
		margin: auto;
	}

	.hintText {
		font-size: 30rpx;

	}


	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #f1f1f1;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #fff;
	}


	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}

	.detail_describe_text2 {
		font-weight: 500;
		margin-top: 2%;
		color: #999999;
	}

	.detail_account_bottom {
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		/* margin: 4% 0 3%; */
	}

	.detail_account_bottom_le {
		width: 47.5%;
		/* margin-right: 5%; */
		border-radius: 44rpx;
		text-align: center;
		line-height: 2.8;
		border: 2rpx solid #FCD202;
	}

	.detail_account_bottom_ri {
		width: 47.5%;
		border-radius: 44rpx;
		text-align: center;
		line-height: 2.8;
		background-color: #FCD202;
	}

	.food_all {
		position: relative;
	}

	.text-through {
		text-decoration: line-through
	}

	/* 食物 */
	.food {
		width: 100%;
		overflow: hidden;
		// position: absolute;
		// top: 350rpx;
		background-color: #FFFFFF;
		border-top-left-radius: 18rpx;
		border-top-right-radius: 18rpx;
	}

	.food_address {
		margin: 3%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 120rpx;
	}

	.food_address_le {
		width: 75%;
	}

	.food_address_le_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.food_address_le_top_le {
		width: 40rpx;
		height: 37rpx;
	}

	.food_address_le_top_le image {
		width: 40rpx;
		height: 37rpx;
	}

	.food_address_le_top_ce {
		line-height: 1.6;
		font-size: 38rpx;
		font-weight: 600;
		color: #333333;
	}

	.food_address_le_top_ce_ri {
		width: 14rpx;
		/* margin: 1% 0 0 2%; */
		height: 24rpx;
		margin-left: 2%;
	}

	.food_address_le_top_ce_ri image {
		width: 14rpx;
		height: 24rpx;
	}

	.food_address_text {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}

	.food_address_ri {
		width: 24%;
		height: 55rpx;
		display: flex;
		padding: 0.5% 1%;
		background-color: #FCD202;
		border-radius: 31rpx;
		color: #FFFFFF;
	}

	.food_address_ri_sty {
		flex: 1;
		text-align: center;
		padding-top: 4%;
		font-size: 24rpx;
	}

	.food_address_ri_sty_active {
		width: 100%;
		overflow: hidden;
		background-color: #FFFFFF;
		border-radius: 31rpx;
		color: #333333;
		text-align: center;
	}

	/* 结算 */
	.settlement {
		width: 94%;
		background-color: #000000;
		line-height: 3.4;
		border-radius: 49rpx;
		position: fixed;
		bottom: 10rpx;
		left: 3%;
		display: flex;
		justify-content: space-between;
	}

	.settlement1 {
		width: 94%;
		background-color: #000000;
		line-height: 2.8;
		border-radius: 49rpx;
		position: relative;
		/* bottom: 10rpx; */
		left: 0;
		right: 0;
		/* left: 3%; */
		display: flex;
		justify-content: space-between;
		margin: 20rpx auto;
	}

	.settlement_le {
		width: 45%;
		padding-left: 20%;
		color: #FFFFFF;
		font-size: 30rpx;
	}

	.settlement_le text {
		font-size: 22rpx;
	}

	.settlement_ri {
		width: 35%;
		background-color: #FCD202;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		text-align: center;
		border-top-right-radius: 49rpx;
		border-bottom-right-radius: 49rpx;
	}

	.settlement_img {
		width: 91rpx;
		height: 96rpx;
		position: absolute;
		// bottom: 30rpx;
		left: 5%;
	}

	.settlement_img image {
		width: 74rpx;
		height: 81rpx;
	}

	.settlement_hot {
		width: 35rpx;
		height: 35rpx;
		line-height: 35rpx;
		text-align: center;
		border-radius: 50%;
		position: absolute;
		top: -10rpx;
		right: 0;
		background-color: #FF130A;
		color: #FFFFFF;
		font-size: 20rpx;
		font-weight: bold;
		color: #FFFFFF;
	}


	.select_all {
		width: 100%;
		position: relative;
	}

	/* 餐厅 */
	.select {
		color: #000000;
		font-weight: bold;
		background-color: #fff;
		z-index: 10;
	}

	.select_line {
		width: 15%;
		height: 6rpx;
		margin: 0 auto 4%;
		background: #E6E6E6;
		border-radius: 4rpx;
	}

	.select_search {
		width: 100%;
		margin: 2% 0;
		display: flex;
		align-items: center;
	}

	.select_search_le {
		/* width: 10%; */
		font-size: 30rpx;
		line-height: 2.5;
		margin-right: 1%;
	}

	.select_search_ce {
		/* width: 5%; */
		/* margin-top: 1%; */
		margin-right: 20rpx;
		margin-left: 6rpx;
		/* margin: 0 20rpx; */
		width: 20rpx;
		height: 10rpx;
	}

	.select_search_ri {
		/* width: 84%; */
		height: 72rpx;
		flex: 1;
		display: flex;
	}

	.select_search_ri input {
		flex: 1;
		/* width: 100%; */
		height: 72rpx;
		background: #F5F5F5;
		color: #999999;
		border-radius: 36rpx;
		text-decoration: 42rpx;
		text-align: center;
	}

	/* 附近 */
	.nearby {
		width: 100%;
		position: relative;
	}

	.nearby_text {
		width: 18%;
		font-size: 30rpx;
		font-weight: 800;
		color: #333333;
		text-align: center;
		border-bottom: 16rpx solid #FCD202;
		/* line-height: 20rpx; */
		margin-top: 10rpx;
	}

	.nearby_address_active {
		border: 2rpx solid #FCD202;
		width: 100%;
		padding: 3%;
		margin-top: 3%;
		border-radius: 10upx;
		display: flex;
	}

	.nearby_address {
		width: 100%;
		padding: 3%;
		margin-top: 3%;
		border-radius: 10upx;
		display: flex;
	}

	.nearby_address_le {
		flex: 1;
	}

	.nearby_address_ri {
		line-height: 2.5;
		text-align: right;
		/* flex: 1; */
	}

	.nearby_text2 {

		/* line-height: 1.5; */
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.nearby_text2_ {
		font-size: 30rpx;
		font-weight: 800;
		color: #333333;
	}

	.nearby_text3 {
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
		margin-top: 2%;
	}

	/* 添加地址 */
	.goorder {
		width: 100%;
		padding: 2% 3%;
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		border-top: 1rpx solid #999999;
	}

	.goorder_but {
		width: 100%;
		line-height: 2.5;
		text-align: center;
		background: #FCD202;
		border-radius: 36rpx;
	}
</style>