<template>
	<view class="content">
		<!-- 页面顶部店铺信息头部 -->
		<view class="head">
			<b-shop-infor-head ref="b-shop-infor-head"></b-shop-infor-head>
		</view>

		<!-- 手机号 -->
		<view class="input-number">
			<view class="input-number-top">
				<view class="input-number-top-title">联系方式</view>
				<view class="input-number-top-Tips" :style="{color:Brand()['ThemeColor']}">用于接收订单进度，请正确填写</view>
			</view>
			<view class="input-number-region">
				<input type="number" maxlength="11" placeholderStyle="fontSize:28rpx" style="height: 100%;"
					v-model="FormInfor['phone_number']" placeholder="请输入手机号">
			</view>
		</view>
	
		<view class="box_4" v-if="BrandInfor['brand_id'] == 13 || BrandInfor['brand_id'] == 2">
			<text lines="1" class="text_18">就餐方式</text>
			<view class="Way">
				<!-- 在店 -->
				<view class="Way-item" @tap="FormInfor['eat_type'] = 'EAT_IN'"
					:class="[FormInfor['eat_type'] == 'EAT_IN'?'Way-item-activation':'']">
					<view class="text">
						<view class="Radio" :class="[FormInfor['eat_type'] == 'EAT_IN'?'activation-Radio':'']">

						</view>
						<image class="img1" :src="qnyurl('diannei.png','rx')" mode=""></image>
						<text>店内就餐</text>
					</view>
				</view>
				<!-- 打包 -->
				<view class="Way-item" @tap="FormInfor['eat_type'] = 'TAKE_AWAY'"
					:class="[FormInfor['eat_type'] == 'TAKE_AWAY'?'Way-item-activation':'']">
					<view class="text">
						<view class="Radio" :class="[FormInfor['eat_type'] == 'TAKE_AWAY'?'activation-Radio':'']">

						</view>
						<image class="img2" :src="qnyurl('dabao.png','rx')" mode=""></image>
						<text>打包带走</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="box_3">
			<text lines="1" class="text_5">订单详情</text>
			<template v-for="(item,index) in FormInfor['products']">
				<view class="Commodity-Item" @tap="ischoiceDiscount(item,index)">
					<b-rx-commodity-item :item="item" :key='index'></b-rx-commodity-item>
					<!-- 优惠 -->
					<view class="discount" v-if="item['max_deduction'] && item['max_deduction'] > 0">
						<view class="Checkbox" :style="{'--aftercolor':Brand()['ThemeColor']}" :class="{'active-Checkbox':item['is_deduction']?true:false}"></view>
						<view>
							<view class="Deduction-amount">
								可用消费补贴卡余额抵扣￥{{_amount((item['max_deduction'] != undefined?item['max_deduction']:0) * item['num'])}}
							</view>
							<view class="Insufficient" v-if="item['Discountarrcondition']">
								您余额不足，实际可抵扣￥{{_amount(item['already_deduction_amount'])}}</view>
						</view>
					</view>
				</view>

			</template>
		</view>

		<!-- <view class="Commodity">
			<text lines="1" class="quantity">共{{shoptotalnum }}件</text>
			<text lines="1" class="amount">余额：￥{{ _amount(amount)}}</text>
		</view> -->
		<view class="Commodity">
			<text lines="1" class="quantity">商品金额</text>
			<text lines="1" class="amount">￥{{ calculationamount['prices'] }}</text>
		</view>
		
		<!-- 新增计算抵扣逻辑 -->
		<view class="Commodity Commodity-Item" style="margin-bottom: 0rpx; padding-bottom: 0rpx; padding-top: 0rpx" @click="isCoin()">
			<view class="discount" style="width: 100%; display: flex; justify-content: space-between">
				<view>
					<text lines="1" class="quantity">抵用券</text>
					<text lines="1" class="amount">( 余额：￥{{ computedTotal.broker_balance }} )</text>
				</view>
				<view class="Checkbox" :style="{'--aftercolor':Brand()['ThemeColor']}" :class="{'active-Checkbox': use_coin? true : false}"></view>
			</view>
		</view>
		<view class="Commodity Commodity-Item" @click="isBroker()">
			<view class="discount" style="width: 100%; display: flex; justify-content: space-between">
				<view>
					<text lines="1" class="quantity">余额</text>
					<text lines="1" class="amount">( 余额：￥{{ computedTotal.coin_balance }} )</text>
				</view>
				<view class="Checkbox" :style="{'--aftercolor':Brand()['ThemeColor']}" :class="{'active-Checkbox': use_broker? true : false}"></view>
			</view>
		</view>
		
		<!-- 占位元素 -->
		<view style="height: 160px;width: 100%;"></view>

		<!-- 结算 -->
		<view class="block_2">
			<view class="text-group_3">
				<!-- <view class="text-wrapper_4 itemamount">
					<text lines="1" class="text_24">原价</text>
					<text lines="1" class="text_25" :style="{color:Brand()['ThemeColor']}">：￥{{_amount(calculationamount['prices'])}}</text>
					<text lines="1" class="text_25" :style="{color:Brand()['ThemeColor']}">：￥{{calculationamount['prices']}}</text>
				</view> -->
				<view class="text-wrapper_4 itemamount">
					<text lines="1" class="text_24">实际付款：</text>
					<text lines="1" class="text_25" :style="{color:Brand()['ThemeColor']}">￥{{computedTotal.real_pay_price}}</text>
				</view>
				<view class="text-wrapper_4 itemamount">
					<text lines="1" class="text_24">积分：</text>
					<text lines="1" class="text_25" :style="{color:Brand()['ThemeColor']}">￥{{computedTotal.integral}}</text>
				</view>
				
				
				<!-- <view lines="1" class="text_26 itemamount">消费卡抵扣：￥{{_amount(calculationamount['Actualamounts'])}}</view> -->
				<!-- <view lines="1" class="text_27 itemamount">获得佣金：￥{{_commission(commission)}}</view> -->
			</view>
			<text lines="1" class="text_28">提交订单</text>
			<button class="button_1" :style="Brand()['customStyle']['BtnStyle'][0]" @tap="$u.debounce(settlement, 500)">
				<text lines="1" class="text_29" >结算</text>
			</button>
		</view>


		<!-- 确认门店信息 -->
		<u-modal :show="show" title="请确认自取门店" closeOnClickOverlay @close="show = false">
			<template v-slot:default>
				<view class="default-content">
					<view class="location-Img">
						<image class="img" :src="qnyurl('map.png','xbk')" mode="aspectFit"></image>
					</view>
					<view class="shopInfor">
						<view class="restaurant_name">
							{{GetShopInfor['restaurant_name']}}
						</view>
						<view class="distance" :style="{color:Brand()['ThemeColor']}">
							距离您{{GetShopInfor['distance']}}km
						</view>
						<view class="restaurant_address">
							{{GetShopInfor['restaurant_address']}}
						</view>
					</view>
				</view>
			</template>
			<template v-slot:confirmButton>
				<view class="confirmButton">
					<view class="btn replace" @tap="navigateBack(2, true, 0)"
						:style="{border:`1rpx solid ${Brand()['ThemeColor']}`,color:Brand()['ThemeColor']}">
						更换门店
					</view>
					<view class="btn confirm" @tap="confirmClick" :style="Brand()['customStyle']['BtnStyle'][0]">
						就是这家
					</view>
				</view>
			</template>
		</u-modal>
	</view>
</template>

<script>
	// 混入
	import mixin from '@/static/js/mixin/mixin.js';
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	// 核心计算逻辑
	import calculationamountmixin from '@/static/js/mixin/calculationamountmixin.js';
	// 请求
	import {
		conWalletInfoAPI,
		createOrderNewAPI,
		getPhoneAPI
	} from '@/request/restaurant/index.js';
	// 商品组件
	import bRxCommodityItem from '@/components/b-rx-commodity-item/b-rx-commodity-item.vue'
	let self;
	export default {
		mixins: [mixin, restaurantmixins, calculationamountmixin],
		components: {
			bRxCommodityItem
		},
		data() {
			return {
				show: false,
				FormInfor: {
					// 品牌id
					brand_id: 0,
					// 店铺id
					restaurant_id: 0,
					// 店铺名
					restaurant_name: '',
					// 经度
					lng: '',
					// 纬度
					lat: '',
					// 店铺地址
					restaurant_address: '',
					// 手机号
					phone_number: '',
					// 是否抵扣
					is_deduction: 1,
					// 抵扣金额
					deduction_amount_total: 0,
					// 产品集合
					products: [],
					// products>product_id
					// products>amount
					// products>is_deduction
					// products>deduction_amount
					// 就餐类型
					eat_type: 'EAT_IN'
				},
				// 账户余额
				amount: 0,
				// 用于先计算再赋值给amount
				// amounts: 0,
				// // 实际支付
				// Actual_amount: 0,
				// // 优惠金额
				// Deduction: 0,
				// 店铺信息
				ShopInfor: {},
				// 商品数量
				shoptotalnum: 0,
				
				computedTotal: {},
				use_coin: 0,
				use_broker: 0,
				
			};
		},
		onLoad() {
			self = this;
			console.log(this['getPhone'],'手机号');
			// 就餐类型
			this['FormInfor']['eat_type'] = this['GetMODE'];
			// 上次下单手机号
			this['FormInfor']['phone_number'] = this['getPhone'];
			this.init();
		},
		methods: {
			init() {
				let newobj = JSON.parse(JSON.stringify(this['GetCartList2']));
				console.log(newobj);
				
				// 获取当前品牌上次下单手机号
				getPhoneAPI({
					brand_id: this['BrandInfor']['brand_id'],
					type:4
				}).then(res=>{
					this.SETPHONE(res['data'].phone)
					console.log('获取手机号', res.data.phone)
					
					this.getCart();
				}).catch(e => {
					console.log(e)
					this.getCart();
				})
			},
			
			getCart() {
				let products = [];
				// 因为进入时暂时获取不到deepClone方法所以使用反转化
				let newobj = JSON.parse(JSON.stringify(this['GetCartList2']));
				for (let i = 0; i < newobj['length']; i++) {
					let item = newobj[i];
					// 是否抵扣
					if (item['max_deduction'] > 0) {
						item['is_deduction'] = 1;
					} else {
						item['is_deduction'] = 0;
					}
					// item['max_deduction'] = 300
					// 抵扣金额(用于显示)
					item['deduction_amount'] = 0;
					// 已抵扣金额(用于逻辑计算)
					item['already_deduction_amount'] = 0;
					// 接口需要提交数量
					item['amount'] = item['num'];
					// 消费卡抵扣状态(抵扣条件)
					item['Discountarrcondition'] = true;
					
					// 修改数据格式
					item['pay_price'] = item['product_price'];
					
					products.push(item);
					this['shoptotalnum'] += item['num'];
				};
				// 获取余额
				console.log('初始化', newobj);
				
				// 好像是查询补贴卡的
				// conWalletInfoAPI().then(res => {
				// 	this['amount'] = res['data']['amount'];
				// 	// this['amount'] = 4076;
				// 	this['FormInfor']['brand_id'] = this['BrandInfor']['brand_id'];
				// 	this['FormInfor']['restaurant_id'] = this['GetShopInfor']['restaurant_id'];
				// 	this['FormInfor']['restaurant_name'] = this['GetShopInfor']['restaurant_name'];
				// 	this['FormInfor']['lat'] = this['GetShopInfor']['latitude'];
				// 	this['FormInfor']['lng'] = this['GetShopInfor']['longitude'];
				// 	this['FormInfor']['restaurant_address'] = this['GetShopInfor']['restaurant_address'];
				// 	this['FormInfor']['products'] = products;
				// 	console.log(this['FormInfor'], 'FormInfor')
				// })

				// 计算点餐金额
				this['FormInfor']['use_coin'] = this.use_coin? 1 : 0;
				this['FormInfor']['use_broker'] = this.use_broker? 1 : 0;
				
				this['FormInfor']['brand_id'] = this['BrandInfor']['brand_id'];
				this['FormInfor']['restaurant_id'] = this['GetShopInfor']['restaurant_id'];
				this['FormInfor']['restaurant_name'] = this['GetShopInfor']['restaurant_name'];
				this['FormInfor']['lat'] = this['GetShopInfor']['latitude'];
				this['FormInfor']['lng'] = this['GetShopInfor']['longitude'];
				this['FormInfor']['restaurant_address'] = this['GetShopInfor']['restaurant_address'];
				this['FormInfor']['products'] = products;
				
				// 佣金计算
				this.computedOrder(this.FormInfor);
			},
			
			// 是否使用券
			isCoin() {
				this.use_coin = !this.use_coin;
				this.getCart()
			},
			
			isBroker() {
				this.use_broker = !this.use_broker;
				this.getCart()
			},

			/**
			 * @结算
			 * */
			settlement() {
				if (!self['FormInfor']['phone_number'] || self['FormInfor']['phone_number']['length'] < 11 || !uni.$u.test
					.mobile(self['FormInfor']['phone_number'])) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					})
					return
				}
				this['show'] = true;
			},

			/**
			 * @确认
			 * */
			confirmClick() {
				this['show'] = false;
				let self = this;
				uni.showLoading({
					title: '支付中...'
				});
				// 解绑
				let from = JSON.parse(JSON.stringify(self['FormInfor']))
				if (typeof from['products'] == 'object') {
					from['products'] = JSON.stringify(from['products'])
				};
				// 创建订单
				createOrderNewAPI(from).then(res => {
					const { pay_price, order_sn, type, openid} = res['data'];
					console.log(pay_price, order_sn, type, openid)
					this.$Payment.H5_Payment({
						pay_price,
						order_sn,
						type,
						openid,
						return_url:`/pages/restaurant/order/order-details/details?order_sn=${order_sn}`
					});
					// let redirect_url = '/pages/restaurant/order/order-details/details';
					// uni.hideLoading();
					// // 调起支付
					// this.payment({
					// 	order_sn: res['data']['order_sn'],
					// 	// 仅微信环境下存在参数
					// 	money:res['data']['money'],
					// 	type: res['data']['type'],
					// 	redirect_url,
					// });
				})
			},

			/**
			 * @商品是否优惠
			 * */
			ischoiceDiscount(item, index) {
				if (!item['max_deduction'] || item['max_deduction'] < 0) return;
				uni.$u.debounce(() => {
					let current = this['FormInfor']['products'][index];
					// 当前余额为0并且用户准备勾选补贴选项则直接打断
					if (this['amount'] == 0 && !current['is_deduction']) {
						uni.showToast({
							title: '余额不足',
							icon: 'none'
						});
						return
					}
					// 保存当前点击商品的指定数据,用于计算金额(旧值)
					current['oldvalue'] = current['is_deduction'];
					// 状态取反
					current['is_deduction'] = current['is_deduction'] ? 0 : 1;
					// 保存当前点击商品的指定数据,用于计算金额(新值)
					current['newvalue'] = current['is_deduction'];
				}, 500, true)

			},
		}
	}
</script>

<style lang="scss">
	// 以下代码均从代码生成平台复制
	page {
		width: 100%;
		min-height: 100%;
		background-color: #F6F6F6;

		.content {
			padding: 32rpx;

			// 头部
			.head {
				border-radius: 15rpx;
				overflow: hidden;
				margin-bottom: 20rpx;
			}

			// 手机号
			.input-number {
				border-radius: 15rpx 15rpx 0 0;
				background-color: #ffffff;
				padding: 32rpx;

				&-top {
					display: flex;
					align-items: flex-end;
					justify-content: flex-start;

					&-title {
						color: #666666;
						font-size: 28rpx;
					}

					&-Tips {
						color: #DB9F5E;
						font-size: 24rpx;
						margin-left: 15rpx;
					}
				}

				&-region {
					width: 100%;
					height: 90rpx;
					border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
					font-size: 38rpx;
				}

			}
		}
	}



	.triangle {
		width: 0;
		height: 0;
		border-bottom: 40rpx solid $THEMECOLOR2;
		border-left: 40rpx solid transparent;
		position: absolute;
		bottom: 0;
		right: 0;

		&:before {
			content: "";
			position: absolute;
			width: 15rpx;
			height: 8rpx;
			background: transparent;
			top: 20rpx;
			right: 5rpx;
			border: 2rpx solid white;
			border-top: none;
			border-right: none;
			-webkit-transform: rotate(-50deg);
			-ms-transform: rotate(-50deg);
			transform: rotate(-50deg);
			z-index: 9;
		}
	}


	// 顶部地址
	.box_1 {
		background-color: white;
		width: 100%;
		height: 130rpx;
		padding: 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.box_2 {
		width: 334rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		font-size: $FONTSIZE28;
	}

	.tag_1 {
		background-color: rgba(255, 255, 255, 1.000000);
		height: $FONTSIZE28;
		border: 1px solid rgba(198, 56, 54, 1);
		display: flex;
		flex-direction: column;
		width: 102rpx;
	}

	.text_2 {
		width: 87rpx;
		height: 21rpx;
		color: rgba(198, 56, 54, 1);
		font-size: 22rpx;
		font-family: PingFang-SC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 22rpx;
		margin: 3rpx 0 0 8rpx;
	}

	.text_3 {
		width: 222rpx;
		height: 27rpx;
		color: rgba(51, 51, 51, 1);
		font-size: $FONTSIZE28;
		font-family: PingFang-SC-Bold;
		text-align: left;
		white-space: nowrap;
		line-height: $FONTSIZE28;
	}

	.text_4 {
		width: 320rpx;
		height: 23rpx;
		color: rgba(153, 153, 153, 1);
		font-size: 24rpx;
		font-family: PingFang-SC-Medium;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;
	}

	// 商品
	.box_3 {
		background-color: rgba(255, 255, 255, 1.000000);
		width: 100%;
		display: flex;
		padding: 32rpx;
		flex-direction: column;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
	}

	.text_5 {
		width: 100%;
		color: rgba(51, 51, 51, 1);
		font-size: $FONTSIZE28;
		line-height: 86rpx;
	}

	.commodity-item {
		padding: 25rpx 0;
		border-bottom: 1rpx solid #cccccc;
	}

	.text-group_1 {
		width: 363rpx;
		height: 64rpx;
		margin-top: 3rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	// 就餐方式
	.box_4 {
		background-color: white;
		width: 100%;
		height: 237rpx;
		display: flex;
		flex-direction: column;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		border-radius: 0 0 15rpx 15rpx;
	}

	// 就餐方式
	.Way {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 32rpx;
		border-radius: 20rpx;

		&-item {
			background: #F7F8FA;

			&-activation {
				background: #83ACFF !important;
				color: #ffffff !important;
			}

			width: 275rpx;
			height: 90rpx;
			border-radius: 6rpx;
			line-height: 90rpx;
			text-align: center;
			color: #666666;
			position: relative;

			.text {
				display: flex;
				align-items: center;
				justify-content: center;

				.img1 {
					width: 54rpx;
					height: 46rpx;
					margin: 0 15rpx;
				}

				.img2 {
					width: 43rpx;
					height: 54rpx;
					margin: 0 15rpx;
				}

				// position: absolute;
				// top: 50%;
				// left: 50%;
				// transform: translate(-50%, -50%);
				.Radio {
					width: 34rpx;
					height: 34rpx;
					border: 1rpx solid #D3D6DB;
					border-radius: 50%;
				}

				.activation-Radio {
					background-color: #ffffff !important;
					position: relative;

					&:before {
						content: "";
						position: absolute;
						width: 15rpx;
						height: 8rpx;
						background: transparent;
						border: 6rpx solid rgb(74, 111, 231);
						border-top: none;
						border-right: none;
						-webkit-transform: rotate(-50deg);
						-ms-transform: rotate(-50deg);
						transform: rotate(-50deg);
						z-index: 9;
						top: 9rpx;
						left: 7rpx;
					}
				}
			}
		}
	}

	.text_18 {
		width: 100%;
		line-height: 86rpx;
		color: rgba(51, 51, 51, 1);
		font-size: $FONTSIZE28;
	}

	// 商品样式
	.Commodity-Item {
		margin-bottom: 20rpx;
		padding: 32rpx 0;

		// 抵扣区域样式
		.discount {
			display: flex;
			align-items: baseline;
			margin-top: 20rpx;

			.Checkbox {
				margin-right: 20rpx;
				width: 24rpx;
				height: 24rpx;
				border: 1rpx solid #D3D6DB;
				border-radius: 50%;
				overflow: hidden;
			}

			.active-Checkbox {
				border-color: var(--aftercolor) !important;
				padding: 5rpx;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					border: 3rpx solid #ffffff;
					background-color: var(--aftercolor);
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);

				}
			}

			.Deduction-amount {
				color: #333333;
				font-size: 28rpx;
			}

			.Insufficient {
				color: #00AF66;
				font-size: 24rpx;
			}
		}
	}

	// 商品数量/余额
	.Commodity {
		color: #333333;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		padding: 32rpx;
	}

	// 结算
	.block_2 {
		box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.1);
		background-color: white;
		border-radius: 20rpx 20rpx 0 0;
		width: 100%;
		height: 210rpx;
		flex-direction: row;
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		padding: 20rpx 10rpx;

		.text-group_3 {
			width: 216rpx;
			// height: 81rpx;
			display: flex;
			flex-direction: column;
			// justify-content: space-between;
			margin: 11rpx 0 0 31rpx;
		}

		.text-wrapper_4 {
			width: 211rpx;
			height: 40rpx;
			overflow-wrap: break-word;
			font-size: 0rpx;
			font-family: PingFangSC-Semibold;
			text-align: left;
			white-space: nowrap;
			line-height: $FONTSIZE28;
		}
		.itemamount{
			margin-bottom: 8rpx;
		}

		.text_24 {
			width: 211rpx;
			height: 27rpx;
			color: rgba(51, 51, 51, 1);
			font-size: $FONTSIZE28;
			font-family: PingFangSC-Semibold;
			text-align: left;
			white-space: nowrap;
			line-height: $FONTSIZE28;
		}

		.text_25 {
			width: 211rpx;
			height: 27rpx;
			color: #00AF66;
			font-size: $FONTSIZE28;
			font-family: PingFangSC-Semibold;
			text-align: left;
			white-space: nowrap;
			line-height: $FONTSIZE28;
		}

		.text_26 {
			width: 216rpx;
			height: 30rpx;
			color: rgba(102, 102, 102, 1);
			font-size: 24rpx;
			font-family: PingFangSC-Regular;
			text-align: left;
			white-space: nowrap;
			line-height: 24rpx;
			margin-top: 4rpx;
		}

		.text_27 {
			width: 191rpx;
			height: 23rpx;
			color: rgba(102, 102, 102, 1);
			font-size: 24rpx;
			font-family: PingFangSC-Regular;
			text-align: left;
			white-space: nowrap;
			line-height: 24rpx;
			margin: 4rpx 0 0 1rpx;
		}

		.text_28 {
			width: 110rpx;
			height: 27rpx;
			color: rgba(255, 255, 255, 1);
			font-size: $FONTSIZE28;
			font-family: PingFang-SC-Medium;
			text-align: left;
			white-space: nowrap;
			line-height: $FONTSIZE28;
			margin: 65rpx 0 0 73rpx;
		}

		.button_1 {
			width: 187rpx;
			height: 80rpx;
			background-color: #00AF66;
			border-radius: 40px;
			display: flex;
			flex-direction: column;
			margin: 14rpx 20rpx 0 113rpx;
			line-height: 80rpx;
		}

		.text_29 {
			color: #fefefe;
			font-size: 28rpx;
			font-family: PingFangSC-Semibold;
			text-align: left;
			white-space: nowrap;
			text-align: center;
		}
	}

	// 确认店铺
	/deep/ .u-modal__content,
	/deep/ .u-modal__button-group--confirm-button {
		padding: 40rpx !important;
	}

	.default-content {
		display: flex;

		.location-Img {
			width: 70rpx;
			height: 78rpx;
			max-width: 70rpx;
			max-height: 78rpx;
			min-width: 70rpx;
			min-height: 78rpx;
			margin-right: 30rpx;

			.img {
				width: 100%;
				height: 100%;
			}

		}

		.shopInfor {
			line-height: 40rpx;

			.restaurant_name {
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 15rpx;
			}

			.distance {
				font-size: 26rpx;
				color: #00AF66;
				margin-bottom: 15rpx;
			}

			.restaurant_address {
				color: #999999;
				font-size: 26rpx;
			}

		}
	}

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

		.replace {
			border: 1rpx solid #00AF66;
			color: #00AF66;
		}

		.confirm {
			background: #00AF66;
			color: #ffffff;
		}

		.btn {
			width: 230rpx;
			height: 86rpx;
			font-size: 30rpx;
			line-height: 86rpx;
			text-align: center;
			border-radius: 43rpx;
		}
	}
</style>
