<template>
	<view>
		<cu-custom :isBack="true" style="border-bottom: #EEEEEE 1rpx solid;background-color: #FFFFFF;">
			<block slot="content">
				支付
			</block>
		</cu-custom>

		<view style="text-align: center;margin-top: 56rpx;">
			<text style="font-size: 28rpx;font-weight: 500;color: #111">支付剩余时间</text>
			<text style="margin-left: 30rpx;font-size: 32rpx;font-weight: bold;color: #F07940;">14:26</text>
		</view>

		<view style="text-align: center;margin-top: 52rpx;">
			<text style="font-size: 32rpx;font-weight: 500;color: #111111;">¥</text>
			<text style="font-size: 60rpx;font-weight: 500;color: #111111;margin-left: 2rpx;">29.00</text>
		</view>

		<view
			style="margin-top: 80rpx;border-radius: 15rpx;background-color: #FFFFFF;padding: 36rpx 50rpx 49rpx 40rpx; margin-left: 20rpx;margin-right: 20rpx;">
			<view style="font-size: 28rpx;color: #999999;font-weight: 500;">请选择支付方式</view>
			<view style="height: 1rpx;width: 100%;background-color: #EEEEEE;margin-top: 28rpx;"></view>

			<view class="flex align-center justify-between" style="margin-top: 39rpx;">
				<view class="flex align-center">
					<view>
						<image src="../../static/wechatpay.png" style="height: 60rpx;width: 60rpx;"></image>
					</view>
					<view style="font-weight: bold;color: #111;font-size: 28rpx;margin-left: 28rpx;">
						微信
					</view>
				</view>
				<view @click="selectedPaymentStyle(0)">
					<image v-if="paymentStyle==0" src="../../static/selected_icon.png"
						style="width: 46rpx;height: 46rpx;" mode=""></image>
					<image v-if="paymentStyle==1" src="../../static/unselected_icon.png"
						style="width: 46rpx;height: 46rpx;" mode=""></image>
				</view>
			</view>

			<view class="flex align-center justify-between" style="margin-top: 49rpx;">
				<view class="flex align-center">
					<view>
						<image src="../../static/alipay.png" style="height: 60rpx;width: 60rpx;"></image>
					</view>
					<view style="font-weight: bold;color: #111;font-size: 28rpx;margin-left: 28rpx;">
						支付宝
					</view>
				</view>
				<view @click="selectedPaymentStyle(1)">
					<image v-if="paymentStyle==1" src="../../static/selected_icon.png"
						style="width: 46rpx;height: 46rpx;" mode=""></image>
					<image v-if="paymentStyle==0" src="../../static/unselected_icon.png"
						style="width: 46rpx;height: 46rpx;" mode=""></image>
				</view>
			</view>

		</view>
	    
		<view class="pay_button">支付</view>
		
		<u-modal v-model="showQuitModel" :content="modelContent" title="确认要退出支付吗？" confirm-color="#FC6035" confirmText='继续支付' cancel-text="确认退出" :showCancelButton="true"
		   @cancel="quitPaymentClick"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paymentStyle: 0,
				showQuitModel:false,
				modelContent:'订单还未完成支付，请尽快支付'
			}
		},
		onLoad(val) {
		  console.log(val)	
		},
		
		onBackPress(e){
			this.showQuitModel = true
		  // console.log("监听返回按钮事件",e);
		  
		 //  uni.showModal({
		 //  	title:'确认要退出支付吗？',
			// content:'订单还未完成支付，请尽快支付'
			
		 //  })
		 
		  // uni.switchTab({
		  // 	url:'../order/order'
		  // })
		
		  // 此处一定姚要return为true，否则页面不会返回到指定路径
		  return true;
		},
		
		methods: {
			selectedPaymentStyle(index) {
				this.paymentStyle = index
			},
			quitPaymentClick(){
				this.showQuitModel = false
				uni.switchTab({
					url:'../order/order'
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.pay_button{
		margin:146rpx 75rpx 0rpx 75rpx;
		text-align: center;
		padding-top: 29rpx;
		padding-bottom: 29rpx;
		background-color: #FC6035;
		color: #FFFFFF;
		font-size: 34rpx;
		font-weight: 500;
		border-radius: 100rpx;
	}
/deep/ .u-model__footer__button{
	border:1rpx solid  #ccc;
	border-radius: 70rpx;
	margin: 20rpx;
	color: #111;
	font-weight: bold;
	// padding: 20rpx;
	height: 74rpx;
	line-height: 70rpx;
}
/deep/ .hairline-left{
	border:1rpx solid #FC6035;
}
/deep/ .u-model__footer{
	margin: 20rpx;
}
</style>
