<template>
	<view>
		<!-- 占位符导航栏 -->
		<!-- <navseat class="navbar" :opacity='opacitys' :backColor="'#E8AD7B'" :title='toplist.name' :titleshow='true'></navseat> -->
		<!-- #ifdef MP-WEIXIN -->
		<!-- <view :style="{'height':HeighT.customBar+HeighT.heightBar+'px;background-color: #E8AD7B;position: fixed;top: 0;width: 100%;z-index: 9'}"></view> -->
		<!-- <view :style="{'height':HeighT.customBar+HeighT.heightBar+'px;background-color: #E8AD7B;'}"></view> -->
		<!-- #endif -->
		<!-- 头部内容 -->
		<view class="head">
			<view class="head_bg"></view>
			<view class="tips">
				<image class="informIcon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/informIcon.png" mode="widthFix"/>
				<text class="informText">温馨提示：请适量点餐，避免浪费</text>
			</view>
			<!-- <view class="tabBox"> -->
			<!-- 	<view class="tab">
					<view :class="is_type==(index+1)?'tab_item'+is_type+' tab_item  active ':'tab_item'" v-for="(item,index) in is_typeList" :key="index" @click="tabClick(index+1)">
						<view></view>
						<image class="icon" :src="is_type==(index+1)?item.url_active:item.url" mode="aspectFill"/>
						<text class="title" :class="{active:is_type==(index+1)}">{{item.title}}</text>
					</view>
				</view> -->
				<!-- 送餐到桌 -->
			<!-- 	<view class="table" v-if="is_type==1">
					<view>
						<text class="title">桌台</text>
					</view>
					<view class="value"> {{ tableValue }} </view>
				</view> -->
				<!-- 打包外带 -->
				<!-- <view class="pack" v-else>
					<view class="top">
						<text class="title">后海&双屿</text>
						<text class="address">浐灞生态区灞河东路东三环至欧亚大道段商业用房09号</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>
		<!-- 订单内容区域 -->
		<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" :src="item.coverImg || item.productImg || ''" mode="aspectFill"/>
						<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 || item.num}} </text>
						</view>
					</view>
					<view class="price"> ￥{{ item.totalAmount || item.priceAmount || 0}} </view>
				</view>
	<!-- 			<view class="favorable" v-for="(item,index) in favorable" :key="index">
					<view class="favorable_left"> 
						<image class="icon" :src="item.url" mode="aspectFill"/>
						<text class="name"> {{ item.name }} </text>
					</view>
					<view class="favorable_right"><text class="favorable_right_text">暂无可用优惠券</text> <u-icon name="arrow-right" color="#575B66" size="28"></u-icon></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="false" :clearable="true"/>
			</view>
		</view>
		
		<!-- 支付方式 -->
		<view class="paymentMethod">
			<view class="paymentMethod_content">
				<view class="paymentMethod_title">支付方式</view>
				<u-radio-group v-model="radiovalue" iconPlacement="right" @change="groupChange" :size="28"
					placement="column">
					<block v-for="(item,index) in paymentMethodList" :key="index">
							<view class="method_list" @click="groupChange(index+1)">
								<view class="method_list_top">
									<view class="method_list_top_left">
										<image class="icon" :src="item.url" mode="widthFix"/>
										<text class="name"> {{ item.name }} </text>
									</view>
									<u-radio activeColor="#E8AD7B" icon-size="36" size="36" :name="index+1">
									</u-radio>
								</view>
								<view class="method_list_bom" v-if="item.type == 1">
									<text class="balance">会员卡余额 ￥{{amountVIP?amountVIP.amount:0}}</text>
									<text class="topUpNow" @click="goRecharge">去充值</text>
								</view>
							</view>
					</block>
				</u-radio-group>
			</view>
		</view>
		
		<view class="bottom">
			<view class="bottom_left">
				<text style="margin-bottom: 5rpx;">实付金额</text>
				<text class="totalAmount">￥{{ listinfo.payAmount }} </text>
			</view>
			<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>
		</view>
		
		<u-popup :show="ispws" :round="20" mode="bottom" @close="ispws = false" height="500" :safeAreaInsetBottom="false">
			<view class="pay-info-wrap">
				<view class="info-wrap flex-between">
					<view class="close" @click="ispws = false">
						<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 navseat from '@/components/navseat.vue'
	import webSocketUtils from '@/common/js/websocket.js'
	import payPasswordtwo from '@/components/payPasswordtwo.vue'
	// import cwxKeyboard from '@/components/cwx-keyboard/cwx-keyboard.vue'
	
	
	export default {
		components: {
			payPasswordtwo,
			navseat
		},
		data() {
			return {
				opacitys: false,
				toplist: {
					name: '确认订单'
				},
				is_type: 1,
				is_typeList: [
					{ title: "送餐到桌", 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: "打包外带", 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"},
				],
				favorable: [
					{ name: "优惠券", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/coupon.png"},
					{ name: "团购优惠", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/groupOffer.png"},
				],
				paymentMethodList:[
					{ name: "会员卡支付", type: "1", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png"},
					{ name: "微信支付", type: "2", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png"},
				],
				order: {
					phone: "",
				},
				cartLists: [],
				listinfo: {
					details: [],
					payAmount: 0,
					name: "",
				},
				tableValue: "A203",	// 桌台号
				totalPrice: 0, 	// 小计金额
				totalAmount: 20,	// 支付金额
				remark: "",			// 备注
				radiovalue: 1,		// 支付方式
				ispws: false,  		// 输入支付密码 
				payPasswordShow: false,
				amountVIP: null,	// 会员信息
				listinfoid: null,
				paymentBtnText: "会员卡支付",
			}
		},
		computed: {
			HeighT() { //手机类型的尺寸
				return this.$store.getters.is_BarHeight
			},
		},
		onUnload() {
			console.log(this)
			this.socketTicket.Close()
			uni.$off('getMessage')
			this.ispws = false
		},
		onHide() {
			this.socketTicket.Close()
			uni.$off('message')
		},
		onLoad(e) {
			this.listinfo.name = JSON.parse(e.storeInfo).shopName;
		},
		onShow() {
			uni.$on('message', this.getMessage)
			if (this.listinfoid) {
				this.orderorderInfo()
			} else {
				this.handlemessage()
			}
			this.getAount()
		},
		methods: {
			
			/**
			 * 消息监听
			 * @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':
							this.listinfoid = msg.data.id
							console.log(msg)
							this.listinfo.details = msg.data.detailList;
							this.listinfo.payAmount = msg.data.amount;
							uni.$off('getMessage')
							this.orderorderInfo(1)
							break;
						case 'addCart':
							console.log("商品列表===",msg)
							
							if (this.listinfoid) {
								this.orderorderInfo()
							} else {
								this.listinfo.details = msg.data;
								this.listinfo.payAmount = msg.amount;
							}
							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.listinfo.payAmount = msg.amount;
							}
							break;
					}
					this.$set(this, 'cartLists', msg)
				}
			
			},
			
			/**
			 * 监听送餐/打包切换
			 * @param {Object} val
			 */
			tabClick ( val ) {
				this.is_type = val; 
				console.log(this.is_type)
			},
			
			/**
			 * 监听支付方式切换
			 * @param {Object} n
			 */
			groupChange(n) {
				this.radiovalue = n;
				this.paymentBtnText = n==1?'会员卡支付':'微信支付'
			},
			
			/**
			 * 初始化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('shopUser'),
					userId: uni.cache.get('userInfo').id,
					"type": "connect",
				})
			},
			
			/**
			 * 数据处理
			 * @param {Object} data
			 */
			socketSendMsg(data) {
				if (this.socketTicket) {
					this.socketTicket.send(data);
				}
			},
			
			/**
			 * 获取会员信息
			 */
			async getAount() {
				let res = await this.api.shopUserInfo({
					"shopId": uni.cache.get('shopUser'),
					"userId": uni.cache.get('userInfo').id,
				})
				if (res.code == 0) {
					console.log("会员信息===",res)
					this.amountVIP = res.data
				}
			},
			
			/**
			 * 查询订单信息
			 * @param {Object} i
			 */
			async orderorderInfo(i) {
				console.log(this.listinfo)
				let res = await this.api.orderorderInfo({
					orderId: this.listinfoid
				})
				if (res.code == 0) {
					console.log(res)
					this.listinfo = res.data
					if (i == 1) { //请求完了详情在去调支付
						this.showpopupclickdd()
					}
				}
			},
			
			/**
			 * 去充值
			 */
			goRecharge() {
				// 判断是否绑定手机,只有下单时候有,会员列表肯定有
				// console.log(this.amountVIP.isVip, '调试1')
				if (this.amountVIP.isVip == 0) {
					// 跳转到开通页面
					uni.navigateTo({
						url: '/pages/member/activatedmemberone?shopId=' + uni.cache.get('shopUser')
					})
				} else {
					uni.pro.navigateTo('/pages/member/index', {
						shopId: uni.cache.get('shopUser')
					})
				}
			},
			
			/**
			 *  生成订单
			 */
			orderdetail() {
				console.log(this.listinfo.details)
				if ( this.listinfo.details.length == 0) {
					uni.showToast({
						title: "购物车为空，请添加商品",
						icon: "none",
					})
					return;
				}
				let data = {
					"skuId": '',
					"num": '', //数量
					"type": "createOrder", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
					"remark": this.remark,
					"couponsId": '', //优惠券ID,
					"isYhq": 0, // 是否使用优惠券（ 1： 使用， 0： 不使用）,
					"isBuyYhq": 0, // 是否购买优惠券（ 1： 购买， 0： 不够买）
					"productId": '', //商品id
					"shopId": uni.cache.get('shopUser'),
					"userId": uni.cache.get('userInfo').id,
				}
				uni.$u.debounce(this.socketSendMsg(data), 500)
			},
			
			/**
			 * 去支付
			 */
			showpopupclickdd() {
				console.log(this.radiovalue)
				if ( this.radiovalue == 2 && this.listinfo.payAmount <= 0 ) {
					uni.showToast({
						title: "支付金额必须大于0",
						icon: 'none'
					})
					return;
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				// radiovalue为2是微信支付
				if (this.radiovalue == 2) {
					this.showpopupclickdds() //微信支付
				} else {
					// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
					// console.log(isPwd,'是否设置了支付密码')
					if (uni.cache.get('userInfo').isPwd == 0) {
						uni.pro.navigateTo('/pages/user/repairpassword', {
							shopId_id: uni.cache.get('shopUser')
						})
					} else {
						uni.hideLoading()
						// this.payPasswordShow = false;
						this.ispws = true
						this.$nextTick(() => {
							// this.$refs.payPwd.onPayUp();
						})
					}
				}
			},
			
			/**
			 * 微信支付
			 */
			async showpopupclickdds() {
				
				
				console.log(this.listinfoid)
				let res = await this.api.payorderPay({
					orderId: this.listinfoid
				}) //判断是否支付成功
				if (res.code == 0) {
			
					// #ifdef MP-WEIXIN
					// 微信支付还是余额支付
					uni.requestPayment({
						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, //签名
						success: (res) => {
							let _this = this
							uni.requestSubscribeMessage({
								tmplIds: ['z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ'],
								complete() {
									uni.showToast({
										title: "支付成功"
									})
									// uni.cache.set('shopUser', '') //删除shopUser
									_this.paymodfiyOrderInfo()
									uni.redirectTo({
										url: '/pages/order/order_detail?orderId=' + _this
											.listinfoid
									});
								},
							})
						},
						fail: () => {
							uni.hideLoading()
						}
					});
					// #endif	
					uni.hideLoading()
				}
			},
			
			/**
			 * 支付完成后请求
			 */
			async paymodfiyOrderInfo() { 
				let res = await this.api.paymodfiyOrderInfo({
					orderId: this.listinfoid,
				})
			},
			
			/**
			 * 余额支付
			 * @param {Object} pwd
			 */
			async accountPayevent(pwd) {
				this.ispws = false;
				console.log(pwd)
				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'],
							complete() {
								uni.redirectTo({
									url: '/pages/order/order_detail?orderId=' + _this
										.listinfoid
								});
							},
						})
			
					} else if (res.data == 2) {
						this.showToastUppop('余额不足')
						setTimeout(() => {
							// 去充值
							this.goRecharge()
						}, 1500)
					} else if (res.data == 3) {
						this.showToastUppop('未设置支付密码')
						setTimeout(() => {
							uni.pro.navigateTo('/pages/user/repairpassword', {
								shopId_id: uni.cache.get('shopUser')
							})
						}, 1500)
			
					} else if (res.data == 4) {
						this.showToastUppop('非会员请充值')
						setTimeout(() => {
							// 去充值
							this.goRecharge()
						}, 1500)
					}
			
				}
			
			},

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

<style lang="scss">
	.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.7rpx;
				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;
				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;
				.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;
						}
					}
				}
					
			}
		}
	}
	
	.content_box{
		padding: 0 30rpx;
		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;
				margin-bottom: 32rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				.left{
					width: 100%;
					display: flex;
					.img{
						width: 142rpx;
						height: 142rpx;
						margin-right: 34rpx;
						flex-shrink: 0;
					}
					.center{
						width: 100%;
						display: flex;
						flex-direction: column;
						.center_title{
							font-size: 32rpx;
							font-weight: 500;
							color: #333;
						}
						.type{
							margin: 12rpx 0 10rpx 0;
						}
						.type,.num{
							font-size: 24rpx;
							color: #999;
						}
						
					}
				}
				.price{
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
				}
			}
			.favorable{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				box-sizing: border-box;
				margin-bottom: 32rpx;
				.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;
					}
				
				}
			}
			.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 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		.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;
				}
			}
			
		}
	}
	.paymentMethod{
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		padding-bottom: 246rpx;	
		.paymentMethod_content{
			background-color: $uni-bg-color;
			border-radius: 22rpx;
			padding:30rpx 0;
			box-sizing: border-box;
			.paymentMethod_title{
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 30rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
			}
			.method_list{
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				.method_list_top{
					display: flex;
					justify-content: space-between;
					.method_list_top_left{
						display: flex;
						.icon{
							width: 54rpx!important;
							margin-right: 22rpx;
						}
						.name{
							font-size: 32rpx;
							font-weight: 500;
							color: #333;
						}
					}
				}
				.method_list_bom{
					display: flex;
					.balance{
						margin-right: 20rpx;
						margin-left: 70rpx;
						font-size: 24rpx;
					}
					.topUpNow{
						color: #FF803D;
						font-size: 28rpx;
					}
				}
			}
			.method_list:nth-child(odd){
				border-bottom: 2rpx solid #ccc;
			}
		}
	}
	
	.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{
			width: 216rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: #E8AD7B;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
	.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>
