<template>
	<view class="page">
		<view class="allcon">
			
			<view class="hcon">
				<view class="otxt">订单支付:RCD20240527098760001</view>
				<view class="htitle">待付款</view>
				<view class="mcon" v-if="info"> ￥ <text class="mcost">{{info.money}}</text></view>
			</view>
			<view class="txt">选择付款账号:</view>
			<view class="selcon">
				<radio-group class="checklist-group" @change="chagne">
					<view class="sitem" v-for="(item,index) in paylist" :key="index">
						<view class="simg">
							<image class="img" :src="item.icon"></image>
						</view>
						<view class="conright">
							<view class="sname">
								{{item.name}}
							</view>
						</view>
						<view class="selbtn">
							<radio :value="item.id" :checked="item.isChecked" />
						</view>
					</view>
				</radio-group>
			</view>
			<button type="primary" class="paybtn" @click="paydo()">确认支付</button>
		</view>
	</view>
</template>

<script> 
export default {
	data() {
		return {
			info:{
				orderid:"20240528000000001",
				money:2999.00
			},
			paylist:[
				{
					id:"alipay",
					name:"支付宝支付",
					icon:"/static/image/pt.png",
					isChecked:true
				}
			],
		};
	},
	onLoad(options) {
		
	},
	methods: {
		paydo(){
			
		}
	}
};
</script>

<style lang="scss" scoped>
	.page{
		padding: 0;
		position: relative;
		display: block;
		background-color: #FFF !important;
		height: 100vh;
	}
	
	::v-deep.uni-radio-input-checked{
		background-color: #00a89b!important;
		border-color: #00a89b!important;
		background-clip: content-box!important;
		padding: 0rpx!important;
		box-sizing: border-box;
	}
	::v-deep.uni-radio-input-checked::before{
		display: none!important;
	}
	.allcon{
		display: block;
		overflow: hidden;
	}  
	.mcon{
		display: flex;
		flex-direction: row;
		align-items: baseline;
		justify-content: center;
		width:100%;
		padding: 0 0 60rpx;
		font-size: 40rpx;
		font-weight:600; 
		.mcost{
			font-size: 60rpx;
		}
	}
	.otxt{
		font-size: 30rpx;
		margin-left: 30rpx;
		font-weight: 600;
		margin: 10rpx 30rpx 30rpx 30rpx;
		text-align: center;
	}
	.txt{
		font-size: 30rpx;
		margin-left: 30rpx;
	}
	.hcon{
		display: flex;
		flex-direction: column;
		padding: 50rpx 20rpx 20rpx;
		margin-bottom: 30rpx;
		background-image: url('/static/image/paybg.jpg');
		background-size: 100% 100%;
		background-position: top center; 
		background-repeat: no-repeat;
		.htitle{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}
	}
	.checklist-group{
		width: 100%;
	}
	.paybtn{
		margin: 60rpx 30rpx 100rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FCFCFD;
		height: 88rpx;
		line-height: 88rpx;
		background: #00a89b;
		box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(67,110,255,0.4);
		border-radius: 10rpx;
		opacity: 1;
		&::after{
			border:none;
		}
	}
	.selcon{
		padding: 20rpx 30rpx;
		position: relative;
		display: block;
		overflow-y: auto;
		.sitem {
			display: flex;
			flex-direction: row;
			flex: 1;
			background-color: #F5F5F5;
			padding:20rpx 0;
			border-radius: 10rpx;
			.conright{
				flex: 1;
				display: flex;
				flex-direction: row;
				width: 100%;
				justify-content:flex-start;
				align-items: center;
			}
			.rinfo{
				width: 100rpx;
				display: flex;
				flex-direction: column;
				justify-items: center;
				align-self: center;
				margin-right: 10rpx;
				text-align: center;
				.btn{
					padding: 0 12rpx;
					background-color: #00a89b;
					border-radius: 24rpx;
					font-size: 26rpx;
					color: #fff;
				}
			}
			.selbtn{
				width: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
			}
			.simg{
				width: 60rpx;
				height: 60rpx;
				margin: 20rpx 0 20rpx 30rpx;
				.img{
					width: 100%;
					height: 100%;
					border-radius: 6rpx;
				}
			}
			.sname{
				display: flex;
				flex: 1;
				justify-content: flex-start;
				font-size: 28rpx;
				font-weight: 600;
				color: #333;
				padding: 0 10rpx 0 20rpx;
			}
		}
	}
	
</style>

 