JP-ChargeTeam51/pages/user/finance/recharge.vue

<template>
	<view>
		<u-navbar title="充值"></u-navbar>
		<view class="recharge">
			<view class="title">选择充值金额</view>
			<p>当前余额￥0.00</p>
			<view class="rechargeMain">
				<view class="recharge-item">10元</view>
				<view class="recharge-item active">20元</view>
				<view class="recharge-item">50元</view>
				<view class="recharge-item">100元</view>
				<view class="recharge-item">200元</view>
				<view class="recharge-item">500元</view>
			</view>
			<p>其他充值金额</p>
			<view class="recharge-input">
				<u-input v-model="value1" type="text" border="true" />
			</view>
			<view class="title">选择支付方式</view>
			<view class="recharge-radio">
				<u-radio-group v-model="value2" @change="radioGroupChange" :wrap="true" width="100%">
					<u-radio active-color="#00B962" @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
						:disabled="item.disabled" width="100%"> 
						<view class="recharge-radio-item">
							<u-icon :name="item.icon" custom-prefix="custom-icon" :color="item.color" size="48"></u-icon>
							<view class="recharge-radio-name">
								{{item.name}}
							</view>
						</view>
					</u-radio>
				</u-radio-group>
			</view>
			<view class="recharge-btn">
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="circle">我已阅读并同意《充值协议》</u-checkbox>
				</u-checkbox-group>
				<u-button class="success-btn" shape="circle" type="success">
					<span>立即充值</span>
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '微信支付',
						icon:'wechat-pay-fill',
						color:'#22ac38',
					},
					{
						name: '支付宝支付',
						icon:'alipay-fill',
						color:'#1677ff',
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value2: 'orange',
				value1:'',
				checked:''
			}
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	/deep/.u-radio-group{
		width: 100%;
	}
	/deep/.u-radio{
		position: relative;
	}
	/deep/.u-radio__icon-wrap{
		position: absolute;
		right: 0;
	}
	.recharge{
		padding: 16px;
		.title{
			font-size: 16px;
		}
		p{
			color:#666;
			margin-top: 4px;
		}
		.rechargeMain{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 12px;
			margin-bottom: 20px;
			.recharge-item{
				width: 31%;
				border: 1px solid #e3e3e3;
				padding: 15px 0;
				border-radius: 4px;
				text-align: center;
				margin-bottom: 10px;
				font-size: 16px;
			}
			.active{
				background-color: #EFFFF7;
				border-color: #00B962;
				color:#00B962;
			}
		}	
	}
	.recharge-input{
		margin-top: 8px;
		margin-bottom: 32px;
	}
	.recharge-radio{
		margin-top: 10px;
		.recharge-radio-item{
			display: flex;
			align-items: center;
		}
		.recharge-radio-name{
			margin-left: 8px;
		}
	}
	.recharge-btn{
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: 16px;
	}
	.success-btn{
		margin-top: 10px;
		background-color:#00B962!important;
		flex: 1;
		border-color: #00B962!important;
		color:#fff!important;
	}
</style>