<template>
	<view class="container">
		<!-- 头部内容 -->
		<view class="head">
			<view class="head_bg"></view>
			<view class="tips" v-if="storeInfo.registerType == 'munchies'">
				<image class="informIcon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/informIcon.png" mode="aspectFill"/>
				<text class="informText">温馨提示：请适量点餐，避免浪费</text>
			</view>
			
			<view class="tabBox" v-if="storeInfo.registerType == 'munchies'">
				<view class="tab">
					<view v-if="item.show" :class="is_type==index?'tab_item'+(is_type+1)+' tab_item  active ':'tab_item'" v-for="(item,index) in is_typeList" :key="index" @click="tabClick(index,item)">
						<view></view>
						<image class="icon" :src="is_type==index?item.url_active:item.url" mode="aspectFill"/>
						<text class="title" :class="{active:is_type==index}">{{item.title}}</text>
					</view>
				</view>
				<!-- 送餐到桌 -->
				<view class="table" v-if="is_type==0">
					<view class="table_left">
						<image class="icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/table.png" mode="aspectFill"/>
						<text class="title">桌台</text>
					</view>
					<view class="value" v-if="tableCode"> {{ shopTableInfo.name || '' }} </view>
					<u-icon v-else @click="scan" name="scan" size="60"></u-icon>
				</view>
				<!-- 打包外带 -->
				<view class="pack" v-else>
					<view class="top">
						<text class="title">{{ storeInfo.shopName }}</text>
						<text class="address">{{ storeInfo.address }}</text>
					</view>
				<!-- 	<view class="list">
						<view class="item">
							<view class="lable">取餐时间</view><view class="text">立即取餐</view>
						</view>
						<view class="item">
							<view class="lable">预留电话</view><view class="getPhone text"><u-input class="inputVal" v-model="order.phone" input-align="right" placeholder="请输入预留电话以便联系您" ></u-input><text class="getBtn">获取手机号</text></view>
						</view>
					</view> -->
				</view>
			</view>
			
			<view class="addDish" @click="addDish" v-if="storeInfo.registerType == 'restaurant'">加菜下单</view>
			
			<view class="tabBox_t " v-if="storeInfo.registerType == 'restaurant'">
				<view class="shopName">{{ listinfo.name }}</view>
				<view class="tableName" style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;">
						<view>桌号：</view>
						<view class="name" v-if="shopTableInfo.name">{{ shopTableInfo.name || '' }} </view>
						<view class="num" v-if="shopTableInfo&&shopTableInfo.seatNum">{{ shopTableInfo.seatNum }}人</view>
					</view>
					<u-icon v-if="!shopTableInfo.name" @click="scan" name="scan" size="60"></u-icon>
				</view>
			</view>
		</view>
		<!-- 订单内容区域 -->
		<view class="content_box">
			<view class="content">
				<view class="title"> {{ listinfo.name }} </view>
				<view class="list_item" v-for="(item,index) in listinfo.details" :key="item.id">
					<view class="left" >
						<image class="img" v-if="item.productId!=-999" :src="item.coverImg || item.productImg || ''" mode="aspectFill"/>
						<image class="img" v-else :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/table.png'" mode="heightFix"/>
						<view class="center"  >
							<text class="center_title"> {{item.name || item.productName || "" }} </text>
							<text class="type"> {{ item.skuName || item.productSkuName || ""}} </text>
							<text class="num" > X{{ item.totalNumber || ""}} </text>
						</view>
					</view>
					<view class="price"> ￥{{ item.memberPrice*item.totalNumber || item.salePrice*item.totalNumber || 0}} </view>
				</view>
				<view class="cell-item" v-if="packFee && packFee > 0">
					<view class="label">打包费</view>
					<view class="val">
						<view></view>
						<view style="font-size: 28rpx;">￥</view>
						<view>{{packFee.toFixed(2)}}</view>
					</view>
				</view>
				<view class="cell-item" v-if="shopTableInfo&&shopTableInfo.seatNum&&sendType=='table'&&storeInfo.registerType == 'munchies'">
					<view class="label">餐位费</view>
					<view class="val">
						<view>X{{shopTableInfo.seatNum}}</view>
						<view style="font-size: 28rpx;">￥</view>
						<view>{{(shopTableInfo.seatNum*storeInfo.tableFee).toFixed(2)}}</view>
					</view>
				</view>
				<view v-for="(item,index) in favorable" :key="index" v-if="storeInfo.registerType == 'munchies'&&!rechargeFreeChecked">
					<view class="favorable" :class="{column:item.value.length>0&&item.type=='product'}" @click="goUrl(item)">
						<view class="favorable_left"> 
							<!-- <image class="icon" :src="item.url" mode="aspectFill"/> -->
							<text class="name"> {{ item.name }} </text>
						</view>
						<view class="favorable_right" v-if="item.type=='coupon'">
							<text class="favorable_right_text">{{item.value}}</text> 
							<u-icon name="arrow-right" color="#575B66" size="28"></u-icon>
						</view>
						<view class="favorable_right" :class="{column:item.value.length>0}" v-if="item.type=='product'">
							<view class="favorable_right_text"  v-for="(items,indexs) in item.value" :key="indexs">
								<text>{{items.name}}</text>
								<text>X{{items.num}}</text>
								<text>-￥{{items.discountAmount || 0}}</text>
							</view> 
							<u-icon v-if="item.value.length <= 0" name="arrow-right" color="#575B66" size="28"></u-icon>
						</view>
						<view class="favorable_right" v-if="item.type=='points'" @click.stop="pointsChange">
							<text class="favorable_right_text" style="color: #666;margin-right: 16rpx;" v-if="calcUsablePointsData.usable">
								使用 {{ calcUsablePointsData.pointsNum}} 积分抵扣￥{{calcUsablePointsData.pointsNum/calcUsablePointsData.equivalentPoints}}
							</text> 
							<text class="favorable_right_text" style="color: #666;margin-right: 16rpx;color: #DE4D3A;" v-else>
								{{calcUsablePointsData.unusableReason}}
							</text> 
							
							<u-checkbox-group iconPlacement="right" @change="pointsChange">
							    <u-checkbox v-model="isPointsChecked" :disabled="freeCheck||!calcUsablePointsData.usable" :checked="isPointsChecked" activeColor="#E8AD7B" shape="circle" icon-size="36" size="36">
								</u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
					
				</view>
				
				<view class="totalPrice">
					<text style="margin-bottom: 5rpx;">小计￥</text>
					<text class="totalPriceNum"> {{listinfo.payAmount}} </text>
				</view>
				<!-- <u-divider color="#fa3534" half-width="200" border-color="#6d6d6d">姑苏城外寒山寺</u-divider> -->
			</view>
		</view>
		<!-- 订单备注 -->
		<view class="remark">
			<view class="remark_bg">
				<view class="remark_title">订单备注</view>
				<u-textarea class="remark_value"  placeholder="请填写口味、偏好等要求" :type="'textarea'" v-model="remark" :border="textareaBorder" :clearable="true"/>
			</view>
		</view>
		
		<!-- 充值免单 -->
		<view style="padding: 0 20rpx;">
			<rechargeFree v-if="freeDingConfig.enable == 1&&storeInfo.registerType == 'munchies'" ref="rechargeFree" :rechargeFreeChecked="rechargeFreeChecked" :freeDisabled="freeDisabled" :payAmount="listinfo.payAmount" :freeDingConfig="freeDingConfig" :shopUserInfo="amountVIP" @changeFree="changeFree"></rechargeFree>
		</view>
		<!-- 充值活动 -->
		<topUpActivity v-if="storeInfo.registerType == 'munchies'" ref="topUpActivity" :shopUserInfo="amountVIP" ></topUpActivity>
		<!-- 支付方式 -->
		<view style="padding: 0 20rpx;">
			<paymentMethod ref="paymentMethod" :freeCheck="freeCheck" :rechargeFreeChecked="rechargeFreeChecked" :payAmount="listinfo.payAmount" :amountVIP="amountVIP" v-if="storeInfo.registerType == 'munchies'" @groupChange="groupChange"></paymentMethod>
		</view>
		<view style="width: 100%;height: 200rpx;"> </view>
		<view class="bottom">
			<view class="bottom_left">
				<text style="margin-bottom: 5rpx;">实付金额</text>
				<text class="totalAmount">￥{{ listinfo.payAmount }} </text>
			</view>
			<block v-if="storeInfo.registerType == 'munchies'">
				<view class="paymentBtnText"  @tap="$u.debounce(showpopupclickdd, 500)" v-if="listinfoid && listinfo"> {{ paymentBtnText }} </view>
				<view class="paymentBtnText"  @tap="$u.debounce(orderdetail, 500)" v-else> {{ paymentBtnText }} </view>
			</block>
			<block v-if="storeInfo.registerType == 'restaurant'">
				<view class="paymentBtnText"  @tap="$u.debounce(orderdetail, 500)" > 提交订单 </view>
			</block>
		</view>
		
		<u-popup :show="ispws" :round="20" mode="bottom" @close="close" height="500" :safeAreaInsetBottom="false">
			<view class="pay-info-wrap">
				<view class="info-wrap flex-between">
					<view class="close" @click="close">
						<u-icon name="close" color="#999999" size="40"></u-icon>
					</view>
					<text class="title">请输入支付密码</text>
					<view></view>
				</view>
				<view class="info-content">
					<payPasswordtwo ref="payPwd" :payAmount="listinfo.payAmount" @accountPayevent="accountPayevent" v-if="ispws"></payPasswordtwo>
				</view>
			
			</view>
		</u-popup>
		
		<!-- 支付密码 -->
		<!-- <payPasswordtwo ref="payPwd" :listinfo="listinfo" @accountPayevent="accountPayevent" v-if="ispws"></payPasswordtwo> -->
	</view>
</template>

<script>
	import webSocketUtils from '@/common/js/websocket.js'
	import payPasswordtwo from '@/components/payPasswordtwo.vue'
	import paymentMethod from '../components/paymentMethod.vue'
	import rechargeFree from '../components/rechargeFree.vue'
	import topUpActivity from '../components/topUpActivity.vue'
	// import cwxKeyboard from '@/components/cwx-keyboard/cwx-keyboard.vue'
	
	
	export default {
		components: {
			payPasswordtwo,
			paymentMethod,
			rechargeFree,
			topUpActivity,
		},
		data() {
			return {
				opacitys: false,
				toplist: {
					name: '确认订单'
				},
				is_type: 0,
				is_typeList: [
					{ title: "送餐到桌", show: false, type: "table", val: "dine-in", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab1.png" , url_active: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab1_active.png"},
					{ title: "打包外带", show: false, type: "takeself", val: "take-out", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab2.png" , url_active: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab2_active.png"},
				],
				sendType: "table",
				eatModel: [],
				favorable: [
					{ name: "优惠券", type: "coupon",value: "", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/coupon.png"},
					{ name: "商品券", type: "product",value: [], url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/coupon.png"},
					// { name: "团购优惠", type: "group",value: "", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/groupOffer.png"},
					{ name: "积分抵扣", type: "points",value: "", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/points.png" }
				],
				isPointsChecked: false,
				rechargeFreeChecked: false,
				calcUsablePointsData: null,
				order: {
					phone: "",
				},
				userCouponInfos: [],
				selectCouponData: [],
				shopTableInfo: null,
				freeDingConfig: null,
				cartLists: [],
				listinfo: {
					details: [],
					payAmount: 0,
					name: "",
				},
				freeCheck: false,
				freeDisabled: false,
				totalPrice: 0, 	// 小计金额
				totalAmount: 20,	// 支付金额
				remark: "",			// 备注
				radiovalue: 1,		// 支付方式
				ispws: false,  		// 输入支付密码 
				payPasswordShow: false,
				amountVIP: uni.cache.get('shopUserInfo'),	// 会员信息
				listinfoid: null,
				paymentBtnText: "余额支付",
				isSocket: false,
				socketTicket: null,
				orderAMeal: true,
				shopId: null,
				storeInfo: {},
				tableCode: null,
				packFee: null,
				isShow: false,
				rechargeFreeChecked: false,
			}
		},
		computed: {
			HeighT() { //手机类型的尺寸
				return this.$store.getters.is_BarHeight
			},
		},
		onUnload() {
			if (this.socketTicket) {
				this.socketTicket.Close()
				uni.$off('message')
			}
			this.ispws = false
		},
		onHide() {
			if (this.socketTicket) {
				this.socketTicket.Close()
				uni.$off('message')
			}
		},
		onLoad(options) {
			if ( options.storeInfo ) {
				this.storeInfo = JSON.parse(decodeURIComponent(options.storeInfo));
			}
			this.shopId = this.storeInfo.id;
			this.cartLists = JSON.parse(options.cartLists);
			this.listinfo.name = this.storeInfo.shopName;
			this.listinfo.details = JSON.parse(options.cartLists).data;
			this.listinfo.payAmount = this.cartLists.memberAmount && this.cartLists.memberAmount > 0 ? this.cartLists.memberAmount : this.cartLists.amount
			if ( options.tableCode ) { this.tableCode = options.tableCode;}
			if ( this.storeInfo.eatModel.indexOf("dine-in") != -1 ) {
				this.eatModel = "dine-in";
				this.is_type = 0;
			} else {
				this.eatModel = "take-out";
				this.is_type = 1;
			}
			this.getProductqueryShop();
			this.getchoseEatModel('index',0);
			uni.cache.set('selectCouponData',[])
		},
		onShow() {
			if (this.listinfoid) {
				uni.$on('message', this.getMessage)
				this.orderorderInfo()
			} else {
				this.handlemessage()
			}
			this.is_typeList.map((item)=>{
				if ( this.storeInfo.eatModel.indexOf(item.val) != -1) {
					item.show = true;
				}
			})				
			
			this.getchoseEatModel('index',this.is_type)
		},
		methods: {
			/**
			 * 监听优惠券/商品券选择
			 * @param {Object} data
			 */
			changeCoupon ( cartLists ) {
				// 优惠券数据
				let couponList = this.selectCouponData.filter(v => v.type == 1);
				// 商品券列表
				let productList = this.selectCouponData.filter(v => v.type == 2);
				
				// 优惠券处理
				if ( couponList.length > 0 ) {
					let couponData = couponList[0]
					//不包含优惠券的金额
					let currentPayAmount = (this.userCouponInfos.filter(v => v.type == 1).length > 0 ? Number(this.listinfo.payAmount) + couponData.discountAmount : this.listinfo.payAmount)
					console.log(this.listinfo.payAmount)
					// 判断优惠金额不能大于支付金额
					if ( couponData.discountAmount < currentPayAmount) {
						console.log(this.calcUsablePointsData)
						// if ( this.isPointsChecked && this.calcUsablePointsData) {
						// 	this.listinfo.payAmount = (Number(this.listinfo.payAmount)-(this.calcUsablePointsData.pointsNum/this.calcUsablePointsData.equivalentPoints)).toFixed(2);
						// } else {
						// 	this.listinfo.payAmount = (Number(this.listinfo.payAmount)+(this.calcUsablePointsData.pointsNum/this.calcUsablePointsData.equivalentPoints)).toFixed(2);
						// }
						console.log(this.listinfo.payAmount)
						this.listinfo.payAmount = ( currentPayAmount - couponData.discountAmount).toFixed(2)
						this.favorable[0].value = ('-￥'+couponData.discountAmount)
					
						this.userCouponInfos.push({
							userCouponId: couponData.id,
							type: couponData.type,
							discountAmount: couponData.discountAmount,
							num: couponData.type == 1 ? 1 : couponData.num,
						})
						
						console.log(this.listinfo.payAmount)
					} else {  
						uni.showToast({
							title: "优惠券满减金额大于订单金额不可使用",
							icon: "none",
						})
					}
					
				} 
				console.log(2)
				console.log(this.listinfo.payAmount)
				// 商品券处理
				if ( productList.length > 0 ) {
					//商品券使用数量
					
					// 商品数量
					let productAllNum = 0;
					
					productList.map((item,index)=>{
						// 筛选选中商品券商品列表
						let productDetails = this.listinfo.details.filter(v => v.productId == item.proId);
						//金额从小到大排序
						let minCouponList = productDetails.sort((a, b) => (a.memberPrice > 0 ? a.memberPrice : a.salePrice) - (b.memberPrice > 0 ? b.memberPrice : b.salePrice))
						let productNum = 0;
						let productPayAmount = 0;
						let productDetailsNum = 0;
						productDetails.map((v,indexs) => {
							productDetailsNum += v.number;
						})
						
						minCouponList.map((v,indexs) => {
							for (let i = 0; i < v.number; i++){
								if ( ((v.memberPrice > 0 ? v.memberPrice : v.salePrice) < (this.listinfo.payAmount - productPayAmount) ) ){
									
								}
								if ( productAllNum < productDetailsNum && productNum < item.num  && ((v.memberPrice > 0 ? v.memberPrice : v.salePrice) <= (this.listinfo.payAmount - productPayAmount) )) {
									productNum++
									productAllNum++
									productPayAmount += v.memberPrice > 0 ? v.memberPrice : v.salePrice
								} 
								
							}
							
						})
						if ( productNum > 0 ) {
							this.userCouponInfos.push({
								userCouponId: item.id,
								type: item.type,
								productId: item.proId,
								discountAmount: productPayAmount,
								num: productNum ,
							})
							this.favorable[1].value.push({
								userCouponId: item.id,
								name: item.name,
								type: item.type,
								productId: item.proId,
								discountAmount: productPayAmount,
								num: productNum,
							})
						}
						
					})
					if ( this.userCouponInfos.length > 0 ) {
						console.log(this.userCouponInfos)
						this.userCouponInfos.forEach(item => {
							// if ( item.type == 1 ) {
							// 	if ( item.discountAmount && item.discountAmount > 0 ) {
							// 		this.listinfo.payAmount = ( this.listinfo.payAmount - item.discountAmount).toFixed(2)
							// 	}
							// }
							if ( item.type == 2 ) {
								if ( item.discountAmount && item.discountAmount > 0 ) {
									this.listinfo.payAmount = (this.listinfo.payAmount - item.discountAmount).toFixed(2)
								}
							}
						})
					}
					
				} 
				this.isPointsChecked = false;
				this.getCalcUsablePoints()
			},
			setPayAmount ( cartLists ) {
				let tableFee;
				// this.storeInfo.registerType == 'munchies'
				if ( this.is_type == 0 && this.storeInfo.registerType == 'munchies') {
					tableFee = this.shopTableInfo?(this.shopTableInfo.seatNum*this.storeInfo.tableFee):0
				} else{
					tableFee = 0
				}
				if ( this.amountVIP.isVip == 1 && cartLists.memberAmount > 0 ) {
					this.listinfo.payAmount = (cartLists.memberAmount+tableFee).toFixed(2)
				} else {
					this.listinfo.payAmount = (Number(cartLists.amount)+tableFee).toFixed(2)
				}
				console.log(1)
				// if ( this.userCouponInfos.length > 0 ) {
				// 	console.log(this.userCouponInfos)
				// 	this.userCouponInfos.forEach(item => {
				// 		if ( item.type == 1 ) {
				// 			if ( item.discountAmount && item.discountAmount > 0 ) {
				// 				this.listinfo.payAmount = ( this.listinfo.payAmount - item.discountAmount).toFixed(2)
				// 			}
				// 		}
				// 		if ( item.type == 2 ) {
				// 			if ( item.discountAmount && item.discountAmount > 0 ) {
				// 				this.listinfo.payAmount = (this.listinfo.payAmount - item.discountAmount).toFixed(2)
				// 			}
				// 		}
				// 	})
				// }
				this.userCouponInfos = [];
				this.favorable[0].value = ""
				this.favorable[1].value = []
				this.rechargeFreeChecked = false;
				this.freeDisabled = false;
				this.selectCouponData = uni.cache.get('selectCouponData') || []
				this.changeCoupon()
				
			},
			/**
			 * 免单状态监听
			 * @param {Object} val
			 */
			changeFree ( val ) {
				// this.freeCheck = val;
				this.rechargeFreeChecked = !val;
				
				
				// let couponList = this.userCouponInfos.filter(v => v.type == 1);
				let productList = this.userCouponInfos
				if ( this.rechargeFreeChecked ) {
					if ( this.isPointsChecked ) {
						this.isPointsChecked = false;
						this.listinfo.payAmount = (Number(this.listinfo.payAmount)+(this.calcUsablePointsData.pointsNum/this.calcUsablePointsData.equivalentPoints)).toFixed(2);
					}
					if ( productList .length > 0 ) {
						productList.map(item=> {
							console.log(Number(this.listinfo.payAmount))
							console.log(item.discountAmount)
							this.listinfo.payAmount = Number(this.listinfo.payAmount) + item.discountAmount
						})
					}
					// if ( couponList.length > 0) {
					// 	this.listinfo.payAmount = Number(this.listinfo.payAmount) + couponList[0].discountAmount
					// }
					this.listinfo.payAmount = (this.listinfo.payAmount*this.freeDingConfig.rechargeTimes).toFixed(2)
				} else {
					this.isPointsChecked = false;
					this.listinfo.payAmount = (this.listinfo.payAmount/this.freeDingConfig.rechargeTimes).toFixed(2)
					// if ( couponList.length > 0) {
					// 	this.listinfo.payAmount = (couponList.length > 0 ? Number(this.listinfo.payAmount) - couponList[0].discountAmount : this.listinfo.payAmount)
					// }
					if ( productList .length > 0 ) {
						productList.map(item=> {
							this.listinfo.payAmount = Number(this.listinfo.payAmount) - item.discountAmount
						})
					}
									
				}
			},
			
			/**
			 * 积分状态监听
			 */
			pointsChange (){
				if ( this.freeCheck || !this.calcUsablePointsData.usable) {
					return;
				}
				this.isPointsChecked = !this.isPointsChecked
				if ( this.isPointsChecked ) {
					this.freeDisabled = true
					
					this.listinfo.payAmount = (this.listinfo.payAmount-(this.calcUsablePointsData.pointsNum/this.calcUsablePointsData.equivalentPoints)).toFixed(2);
				} else {
					this.freeDisabled = false
					this.listinfo.payAmount = (Number(this.listinfo.payAmount)+(this.calcUsablePointsData.pointsNum/this.calcUsablePointsData.equivalentPoints)).toFixed(2);
				}
			},
			
			goUrl(item){
				switch (item.type){
					case 'coupon':
						let payAmount = this.listinfo.payAmount;
						let couponList = this.userCouponInfos.filter(v => v.type == 1);
						if ( couponList.length > 0 ) { 
							payAmount = payAmount + couponList.discountAmount;
						}
						
						uni.pro.navigateTo('/pages/user/coupon', {
							type: "confirm_order_coupon",
							shopId: this.shopId,
							payAmount: payAmount,
							shoppingCart: JSON.stringify(this.listinfo.details)
						})
						break;
					case 'product':
						let productList = this.userCouponInfos.filter(v => v.type == 2);
						uni.pro.navigateTo('/pages/user/coupon', {
							type: "confirm_order_product",
							shopId: this.shopId,
							payAmount: this.listinfo.payAmount,
							shoppingCart: JSON.stringify(this.listinfo.details),
							productList: JSON.stringify(productList)
						})
						break;	
						
					
				}
			},
			
			/**
			 * 获取积分相关信息
			 */
			async getCalcUsablePoints() {
				let params = {
					memberId: this.amountVIP.id,
					orderAmount: this.listinfo.payAmount,
				}
				let res = await this.api.calcUsablePoints(params)
				this.calcUsablePointsData = res.data;
				if ( this.calcUsablePointsData && this.calcUsablePointsData.usable && this.listinfo.payAmount >= this.calcUsablePointsData.minPaymentAmount) {
					this.calcUsablePointsData.pointsNum = this.calcUsablePointsData.accountPoints >= this.calcUsablePointsData.maxUsablePoints ? this.calcUsablePointsData.maxUsablePoints : this.calcUsablePointsData.accountPoints
				}
				if ( this.freeDingConfig && this.listinfo.payAmount < this.freeDingConfig.rechargeThreshold ) {
					this.freeDisabled = true
				}
				
			},
			
			/**
			 * 获取桌台码
			 */
			scan () {
				uni.scanCode({
					success:  (res) => {
						this.tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
						if (this.tableCode) {
							this.getProductqueryShop();
						}
						
					},
					fail: () => {
					}
				})
			},
			
			/**
			 * 获取店铺信息。桌台信息
			 * @param {Object} tableCode
			 */
			async getProductqueryShop (tableCode) {
				let params = {
					lng: uni.cache.get('getLocationstorage').lng ? uni.cache.get('getLocationstorage').lng :
						'',
					lat: uni.cache.get('getLocationstorage').lat ? uni.cache.get('getLocationstorage').lat :
						'',
				}
				if (this.tableCode) {params.code = this.tableCode}
				if (this.shopId) {params.shopId = this.shopId}
				let res = await this.api.productqueryShop(params)
				if ( res.data.shopTableInfo && !res.data.shopTableInfo.choseCount&&this.orderAMeal) {
					this.orderAMeal = false;
					uni.pro.navigateTo('/pagesOrder/orderAMeal/index', {
						tableCode: this.tableCode,
						shopId: res.data.storeInfo.id,
						type: 'confirm'
					})
					return;
				}
				this.freeDingConfig = res.data.freeDingConfig;
				this.shopTableInfo = res.data.shopTableInfo;
				this.storeInfo = res.data.storeInfo;
			},
			
			/**
			 * 解码
			 * @param {Object} url
			 * @param {Object} name
			 */
			getQueryString(url, name) { 
				var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
				var r = url.substr(1).match(reg)
				if (r != null) {
					return r[2]
				}
				return null;
			},
			
			/**
			 * 加菜下单 
			 */
			addDish () {
				uni.pro.navigateBack()
			},
			/**
			 * 消息监听
			 * @param {Object} msg
			 */
			getMessage(msg) {
				if (msg == 1) { // 网络在连接
					return false
				}
				if (msg.type == 'heartbeat') { //后台心跳  处理返回  不然控制台一直报错
					return false
				}
				if (msg.status != 'success') {
					uni.showToast({
						title: msg.msg,
						icon: "none",
					})
					return false;
			
				} else {
					switch (msg.type) {
						case 'createOrder':
							if ( this.eatModel == "dine-in" && this.tableCode ) {
								if ( this.storeInfo.registerType == 'restaurant') {
									uni.switchTab({
										url: '/pages/order/order'
									});
									return;
								}
								this.isSocket = true;
								this.listinfoid = msg.data.id
								this.listinfo.details = msg.data.detailList;
								this.setPayAmount(msg.data)
								uni.$off('getMessage')
								this.orderorderInfo(1)
							}
							break;
						case 'addCart':
							this.isSocket = true;
							if (  this.eatModel == "dine-in" && this.tableCode ) {
								if (this.listinfoid) {
									this.orderorderInfo()
								} else {
									this.listinfo.details = msg.data;
									this.setPayAmount(msg)
								}
							}
							
							break;
						case 'order':
							uni.navigateBack()
							setTimeout(() => {
								uni.showToast({
									title: '您的小伙伴已下单了哦~~'
								})
							}, 1000)
							break;
						case 'addcart':
							if (this.listinfoid) {
								this.orderorderInfo()
							} else {
								this.listinfo.details = msg.data;
								this.setPayAmount(msg)
							}
							this.isSocket = true;
							break;
					}
					this.$set(this, 'cartLists', msg)
				}
			
			},
			
			/**
			 * 监听送餐/打包切换
			 * @param {Object} val
			 */
			tabClick ( index, item ) {
				this.userCouponInfos = [];
				this.favorable[0].value = ""
				this.favorable[1].value = []
				this.rechargeFreeChecked = false;
				this.freeDisabled = false;
				this.selectCouponData = [];
				uni.cache.set('selectCouponData',[])
				this.getchoseEatModel('tabClick', index, item);
			
			},
			
			/**
			 * 获取堂食/外带菜品数据
			 */
			async getchoseEatModel ( type , index,  item) {
				let params = {
					shopId: uni.cache.get('shopId'),
					type: index,
				}
				if ( index == 0 && this.tableCode ) { params.tableId = this.tableCode; }
				if ( this.shopTableInfo && this.shopTableInfo.seatNum ) { params.num = this.shopTableInfo.seatNum; }
				let res = await this.api.choseEatModel(params)
				
				if ( type == 'tabClick') {
					if ( index == 1 ) {
						if ( res.data.info.length > 0) {
							this.is_type = index;
							this.sendType = item.type
							this.eatModel = [];
							this.eatModel.push(item.val);
						} else {
							uni.showToast({
								title: "没有可打包商品",
								icon: "none",
							})
							return;
						}
					} else {
						this.is_type = index;
						this.sendType = item.type
						this.eatModel = [];
						this.eatModel.push(item.val);
					}
				}
				this.listinfo = res.data;
				this.listinfo.details = res.data.info;
				this.listinfo.name = this.storeInfo.shopName;
				this.listinfo.payAmount = res.data.memberAmount && res.data.memberAmount > 0 ? res.data.memberAmount : res.data.amount
				this.packFee = res.data.packFee;
				this.setPayAmount(this.listinfo)
				
			},
			
			/**
			 * 监听支付方式切换
			 * @param {Object} n
			 */
			groupChange(e) {
				this.radiovalue = e.type;
				this.paymentBtnText = e.name;
			},
			
			/**
			 * 输入密码关闭
			 */
			close () {
				this.ispws = false;
				uni.pro.navigateTo('/pagesOrder/order_detail/index', {
					orderId: this.listinfoid
				})
			},
			
			/**
			 * 初始化socket
			 */
			handlemessage() {
				//调用前先判断是否有socket正在进行 先关闭后链接
				this.socketTicket ? this.socketTicket.Close() : null 
				this.socketTicket = new webSocketUtils(`${uni.conf.baseUrlwws}`, 5000, {
					tableId: uni.cache.get('tableCode'),
					shopId: uni.cache.get('shopId'),
					userId: uni.cache.get('userInfo').id,
					"type": "connect",
				})
				uni.$on('message', this.getMessage)
			},
			
			/**
			 * 数据处理
			 * @param {Object} data
			 */
			socketSendMsg(data) {
				if (this.socketTicket) {
					this.socketTicket.send(data);
				}
			},
			
			/**
			 * 获取会员信息
			 */
			async getAount() {
				let res = await this.api.shopUserInfo({
					"shopId": uni.cache.get('shopId'),
					"userId": uni.cache.get('userInfo').id,
				})
				if (res.code == 0) {
					this.amountVIP = res.data;
				}
			},
			
			/**
			 * 查询订单信息
			 * @param {Object} i
			 */
			async orderorderInfo(i) {
				let res = await this.api.orderorderInfo({
					orderId: this.listinfoid
				})
				if (res.code == 0) {
					this.listinfo = res.data
					if (i == 1) { //请求完了详情在去调支付
						this.showpopupclickdd()
					}
				}
			},
			
			/**
			 * 去充值
			 */
			goRecharge() {
				// 判断是否绑定手机,只有下单时候有,会员列表肯定有
				// console.log(this.amountVIP.isVip, '调试1')
				uni.pro.navigateTo('/pages/member/index', {
					shopId: uni.cache.get('shopId')
				})
			},
			
			/**
			 *  生成订单
			 */
			async orderdetail() {
				
				if ( this.eatModel == "dine-in" && !this.tableCode) {
					uni.showToast({
						title: "请选择桌台",
						icon: "none",
					})
					return;
				}
				if ( this.listinfo.details.length == 0) {
					uni.showToast({
						title: "购物车为空，请添加商品",
						icon: "none",
					})
					return;
				}
				
				let params = {
					"tableId": this.tableCode , //桌台码
					"shopId": uni.cache.get('shopId'),
					"userId": uni.cache.get('userInfo').id,
					"sendType": this.sendType,
					"remark": this.remark,
				}
				if ( this.isPointsChecked && this.calcUsablePointsData.pointsNum && this.calcUsablePointsData.pointsNum > 0) {
					params.pointsNum = this.calcUsablePointsData.pointsNum;
				} 
				if ( this.userCouponInfos ) {
					params.userCouponInfos = this.userCouponInfos
				}
				let res = await this.api.creatOrder(params)
				this.listinfoid = res.data.id;
				if ( this.storeInfo.registerType == 'restaurant') {
					uni.redirectTo({
						url: '/pagesOrder/order_detail/index?orderId=' + this.listinfoid
					});
				} else {
				this.showpopupclickdd();	
				}
			},
			
			/**
			 * 去支付
			 */
			showpopupclickdd() {
				if ( (this.radiovalue == 2 || this.radiovalue == 3) && this.listinfo.payAmount <= 0 ) {
					uni.showToast({
						title: "支付金额必须大于0",
						icon: 'none'
					})
					return;
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				// radiovalue为2是微信支付
				if (this.radiovalue == 2 || this.radiovalue == 3) {
					this.showpopupclickdds() //微信支付
				} else {
					// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
					// console.log(isPwd,'是否设置了支付密码')
					if ( this.amountVIP.isVip == 0 ) {//非会员情况
						
						this.goRecharge();
					} else {
						if (uni.cache.get('userInfo').isPwd == 0) {
							uni.navigateTo({
								url: '/pages/member/setPassword?shopUserInfo=' + JSON.stringify(this.amountVIP)
							})
							
						} else {
							uni.hideLoading()
							// this.payPasswordShow = false;
							this.ispws = true
							this.$nextTick(() => {
								// this.$refs.payPwd.onPayUp();
							})
						}
					}
					
				}
			},
			
			/**
			 * 微信/支付宝支付
			 */
			async showpopupclickdds() {
				let res;
				if ( !this.rechargeFreeChecked ) {
					res = await this.api.orderPay({
						orderId: this.listinfoid,
						// #ifdef MP-WEIXIN
						payType: 'wechatPay',
						// #endif
						// #ifdef MP-ALIPAY
						payType: 'aliPay',
						// #endif
						// payType: this.radiovalue == 2 ? 'wechatPay' : 'aliPay'
					}) //判断是否支付成功
				} else {
					res = await this.api.paymemeberIn({
						shopId: uni.cache.get('shopId'),
						amount: this.listinfo.payAmount,
						orderld: this.listinfoid,
						// #ifdef MP-WEIXIN
						payType: 'wechatPay',
						// #endif
						// #ifdef MP-ALIPAY
						payType: 'aliPay',
						// #endif
						// payType: this.radiovalue == 2 ? 'wechatPay' : 'aliPay'
					}) //判断是否支付成功
				}
				
				
				
				
				if (res.code == 0) {
			
					// 微信支付还是余额支付
					uni.requestPayment({
						// #ifdef MP-WEIXIN
						provider: 'wxpay', //支付类型-固定值
						partnerid: res.data.appId, // 微信支付商户号
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						nonceStr: res.data.nonceStr, // 随机字符串
						package: res.data.package, // 固定值
						signType: res.data.signType, //固定值
						paySign: res.data.paySign, //签名
						// #endif
						// #ifdef MP-ALIPAY
						provider: 'alipay', //支付类型-固定值
						orderInfo: res.data.tradeNo, // 微信支付商户号
						// #endif
						success: (res) => {
							let _this = this
							uni.showToast({
								title: "支付成功"
							})
							// #ifdef MP-WEIXIN
							uni.requestSubscribeMessage({
								tmplIds: ['z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ'],
								complete() {
									
									// uni.cache.set('shopUser', '') //删除shopUser
									_this.paymodfiyOrderInfo()
									uni.redirectTo({
										url: '/pagesOrder/order_detail/index?orderId=' + _this.listinfoid
									});
								},
							})
							// #endif
							// #ifdef MP-ALIPAY
							_this.paymodfiyOrderInfo()
							uni.redirectTo({
								url: '/pagesOrder/order_detail/index?orderId=' + _this.listinfoid
							});
							// #endif
						},
						fail: async () => {
							let res = await this.api.cancelOrderPay({
								orderId: this.listinfoid,
							}) //判断是否支付成功
							
							
							uni.pro.navigateTo('/pagesOrder/order_detail/index', {
								orderId: this.listinfoid
							})
							uni.hideLoading()
						}
					});
					
				}
			},
			
			/**
			 * 支付完成后请求
			 */
			async paymodfiyOrderInfo() { 
				let res = await this.api.paymodfiyOrderInfo({
					orderId: this.listinfoid,
				})
			},
			
			/**
			 * 余额支付
			 * @param {Object} pwd
			 */
			async accountPayevent(pwd) {
				this.ispws = false;
				let res = await this.api.accountPay({
					orderId: this.listinfoid,
					memberId: this.amountVIP.id,
					pwd: pwd
				})
				if (res.code == 0) {
					// data ->1 支付成功
					// ->2 余额不足
					// ->3 未设置支付密码，
					// ->4 不是会员，
					if (res.data == 1) {
						this.showToastUppop('支付成功')
						let _this = this
				
						uni.requestSubscribeMessage({
							tmplIds:["z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ","AV-KybUHaK3KtFVLqpy6PHccHBS7XeX__mOM4RbufnQ"],
							complete() {
								uni.redirectTo({
									url: '/pagesOrder/order_detail/index?orderId=' + _this
										.listinfoid
								});
							},
						})
			
					} else if (res.data == 2) {
						this.showToastUppop('余额不足')
						setTimeout(() => {
							// 去充值
							this.goRecharge()
						}, 1500)
					} else if (res.data == 3) {
						this.showToastUppop('未设置支付密码')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/member/setPassword?shopUserInfo=' + JSON.stringify(this.amountVIP)
							})
						}, 1500)
			
					} else if (res.data == 4) {
						this.showToastUppop('非会员请充值')
						setTimeout(() => {
							// 去充值
							this.goRecharge()
						}, 1500)
					}
			
				}
			
			},

			showToastUppop(title) {
				uni.showToast({
					icon: 'none',
					title,
					success: () => {
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.container{
		// padding-bottom: 246rpx;	
	}
	.head{
		width: 100%;
		padding: $uni-spacing-row-base;
		box-sizing: border-box;
		position: relative;
		.head_bg{
			height: 456rpx;
			background: linear-gradient( 180deg, #E8AD7B 0%, #F5F5F5 100%);
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			margin: auto;
		}
		.tips{
			width: 100%;
			height: 64rpx;
			line-height: 64rpx;
			background: #FFF8E8;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding: 0 16rpx;
			box-sizing: border-box;
			position: relative;
			z-index: 1;
			display: flex;
			align-items: center;
			.informIcon{
				width: 26.79rpx;
				height: 24.06rpx;
				margin-right: 8rpx;
			}
			.informText{
				font-size: $uni-font-size-base;
				color: #FF803D;
				font-weight: 400;
			}
		}
		.tabBox{
			width: 100%;
			margin-top: 52rpx;
			position: relative;
			z-index: 1;
			.tab{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 22rpx 22rpx 0 0;
				background-color: $uni-bg-color;
				.tab_item{
					width: 50%;
					height: 90rpx;
					line-height: 90rpx;
					display: flex;
					align-items: center;
					padding-left: 30rpx;
					box-sizing: border-box;
					background-color: #FEFBF8;
					border-radius: 22rpx 22rpx 0 0;
					position: relative;
					.title{
						font-weight: 500;
						font-size: 28rpx;
						color: #999999;
						position:relative;
						z-index: 1;
					}
					.title.active{
						color: #E8AD7B;
					}
					.icon{ 
						width: 48rpx;
						height: 48rpx;
						margin-right: 16rpx;
						position:relative;
						z-index: 1;
					}
				}
				.tab_item.active{
					background-color: #fff;
				}
				// .tab_item.active:after {
				//  content: "";
				//          position: absolute;
				//          top: 0;
				//          left: -4px;
				//          width: 40px;
				//          height: 26px;
				//          background: orange;
				// }
				.tab_item.active:before {
					content: "";
				    position: absolute;
				    top: -20rpx;
				    left: 0;
				    right: 0;
				    bottom: 0;
				    border-radius: 2px;
				    background: #fff;
				    transform: skewX(0deg);
				}
				.tab_item1.active:before{
					border-radius: 22rpx 40rpx 0 0;
				}
				.tab_item2.active:before{
					border-radius: 40rpx 22rpx 0 0;
				}
			}
			.table{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				height: 90rpx;
				background-color: $uni-bg-color;
				border-radius: 0 0 22rpx 22rpx;
				.table_left{
					display: flex;
					align-items: center;
					.icon{
						width: 32.86rpx;
						height: 39.07rpx;
						margin-right: 24rpx;
					}
					.title{
						display: flex;
						align-items: center;
						color: #E8AD7B;
					}
				}
				
				.value{
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}
			}
			
			.pack{
				display: flex;
				flex-direction: column;
				padding: 30rpx;
				box-sizing: border-box;
				background-color: $uni-bg-color;
				border-radius: 0 0 22rpx 22rpx;
				.top{
					display: flex;
					flex-direction: column;
					margin-top: 8rpx;
					.title{
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
						margin-bottom: 16rpx;
					}
					.address{
						font-size: 24rpx;
						font-weight: 400;
						color: #999;
					}
				}
				
				.list{
					display: flex;
					flex-direction: column;
					.item{
						height: 70rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 28rpx;
						.lable{
							color: #666;
							font-weight: 500;
						}
						.getPhone{
							display: flex;
							align-items: center;
							.u-input{
								width: 340rpx;
								border: none;
								input{
									font-size: 24rpx;
									color: #333;
								
								}
								.input-placeholder{
 									font-size: 24rpx;
								}
							}
						}
						.text,.getBtn{
							color: #E8AD7B;
						}
						.getBtn{
							border-radius: 12rpx;
							border: 2rpx solid #E8AD7B;
							padding: 8rpx 20rpx;
							box-sizing: border-box;
						}
					}
				}
					
			}
		}
		
		.addDish{
			width: 176rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			background: #FFF8E8;
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			position: relative;
			z-index: 1;
		}
		.tabBox_t{
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			padding: 32rpx 24rpx;
			background-color: #fff;
			border-radius: 18rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			z-index: 1;
			margin-top: 32rpx;
		}
		.shopName{
			margin-bottom: 16rpx;
		}
		.tableName{
			display: flex;
			.name{
				margin-right: 16rpx;
			}
			.num{
				border-left: 2rpx solid #d6d6d6;
				padding-left: 16rpx;
			}
		}
		
		
		
	}
	
	.content_box{
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-top: 10rpx;
		position: relative;
		z-index: 1;
		.content{
			background-color: $uni-bg-color;
			border-radius: 22rpx;
			display: flex;
			flex-direction: column;
			padding: 30rpx 0;
			box-sizing: border-box;
			.title{ 
				font-size: 28rpx;
				color: #666;
				margin-bottom: 32rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
			}
			.list_item{
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				.left{
					width: 100%;
					display: flex;
					align-items: flex-start;
					.img{
						width: 142rpx;
						height: 142rpx;
						margin-right: 34rpx;
						flex-shrink: 0;
						border-radius: 20rpx;
					}
					.center{
						width: 100%;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						.center_title{
							font-size: 32rpx;
							font-weight: 500;
							color: #333;
						}
						.type{
							margin: 12rpx 0 10rpx 0;
						}
						.type,.num{
							font-size: 24rpx;
							color: #999;
						}
						
					}
				}
				.num{
					font-size: 24rpx;
					color: #999;
				}
				.price{
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
				}
			}
			.cell_item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 32rpx;
				padding: 0 30rpx;
				.lable{
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}
				.value{
					display: flex;
					align-items: flex-end;
					view:nth-child(1){
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						margin-right: 16rpx;
					}
					view:nth-child(2){
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
			.favorable{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				box-sizing: border-box;
				padding-bottom: 26rpx;
				padding-top: 26rpx;
				border-bottom: 2rpx solid #E5E5E5;
				.favorable_left{
					display: flex;
					align-items: center;
					.icon{
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}
					.name{
						font-size: 28rpx;
						font-weight: 400rpx;
						color: #333;
					}
				}
				.favorable_right{
					display: flex;
					align-items: center;
					.favorable_right_text{
						font-size: 24rpx;
						color: #999;
						font-weight: 400rpx;
					}
				
				}
				.favorable_right.column{
					display: flex;
					flex-direction: column;
					.favorable_right_text{
						margin-bottom: 10rpx;
						text:nth-child(1){
							font-size: 26rpx;
							color: #999;
						}
						text:nth-child(2){
							font-size: 26rpx;
							color: #999;
							margin: 0 30rpx;
						}
						text:nth-child(3){
							font-size: 26rpx;
							color: #333;
							
						}
					}
				}
			}
			.favorable.column{
				align-items: flex-start;
			}
			.cell-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 32rpx 34rpx 32rpx 34rpx;
				.label{
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}
				.val{
					display: flex;
					align-items: flex-end;
					view:nth-child(1){
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						margin-right: 42rpx;
					}
					view:nth-child(2){
						display: flex;
						align-items: flex-end;
						font-weight: bold;
						font-size: 36rpx;
						color: #333333;
					}
				}
				
			}
			
			.totalPrice{
				padding: 32rpx 30rpx;
				box-sizing: border-box;
				// border-top: 2rpx solid #E5E5E5;
				display: flex;
				justify-content: flex-end;
				align-items: flex-end;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				.totalPriceNum{
					font-size: 40rpx;
				}
			}
		}
	}
	
	// 备注
	.remark{
		padding: 0 20rpx;
		margin-top: 32rpx;
		.remark_bg{
			background-color: $uni-bg-color;
			border-radius: 22rpx;
			padding: 32rpx 30rpx;
			box-sizing: border-box;
			.remark_title{
				font-size: 32rpx;
				color: #333;
				font-weight: 500;
				margin-bottom: 16rpx;
			}
			.u-textarea{
				height: 148rpx;
				background-color: #f5f5f5;
				border-radius: 10rpx;
				padding: 32rpx 22rpx!important;
				box-sizing: border-box;
				textarea{
					font-size: 24rpx;
				}
			}
			
		}
	}
	
	
	
	
	
	.bottom{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 14rpx 2rpx rgba(0,0,0,0.1);
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx 50rpx 82rpx 50rpx;
		box-sizing: border-box;
		z-index: 9;
		.bottom_left{
			display: flex;
			font-size: 28rpx;
			font-weight: 500;
			color: #333;
			align-items: flex-end;
			.totalAmount{
				font-size: 40rpx;
				font-weight: bold;
				margin-top: 5rpx;
			}
		}
		.paymentBtnText{
			background: #E8AD7B;
			border-radius: 36rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			padding: 14rpx 44rpx;
		}
	}
	.page-total{
			position: inherit;
		}
	.pay-info-wrap{
		padding: 0;
		box-sizing: border-box;
		.info-wrap{
			padding: 64rpx 30rpx 30rpx 30rpx;
			box-sizing: border-box;
			.title{
				align-self: center;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}
		
		.info-content{
			.pay-title {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				font-weight: bold;
				width: 100%;
				font-size: 48rpx;
				color: #333;
				margin-top: 48rpx;
				text {
					font-size: 60rpx;
					color: #333;
				}
			}
			
			.pay-password {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 64rpx;
			
				.list {
					width: 88rpx;
					height: 88rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 2rpx solid #999;
					border-radius: 8rpx;
					text {
						font-size: 32rpx;
					}
				}
			
			}
			
			.hint {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100rpx;
			
				text {
					font-size: 28rpx;
					color: #ccc;
				}
			}
		}
		
	}
</style>
