<template>
	<view>
		<view class="bg-white u-m-32 u-p-32 br16 block">
			<view class="nr">充值金额</view>
			<view class="u-m-t-16">
				<text class="price">5.0</text>
				<text class="bold-400 nr u-m-l-16">元</text>
			</view>
			<view class="u-m-t-32 xs">
				<text class="recharge">充值金额：</text>
				<text>5元</text>
			</view>
		</view>
		
		<view class="bg-white u-m-32 u-p-32 br16 block">
			<view class="nr">选择支付方式</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="row-between u-m-t-32">
				<view class="row-center">
					<u-icon name="weixin-circle-fill" color="#28C445" size="80"></u-icon>
					<view class="u-m-l-16 lg">微信</view>
				</view>
				
				<view class="flex1 row-end">
					<u-radio-group v-model="pay.weixin">
						<u-radio shape="circle" :active-color="themeColor"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<view class="row-between u-m-t-32">
				<view class="row-center">
					<u-icon name="zhifubao-circle-fill" color="#1477FE" size="80"></u-icon>
					<view class="u-m-l-16 lg">支付宝</view>
				</view>
				
				<view class="flex1 row-end">
					<u-radio-group v-model="pay.alipay">
						<u-radio shape="circle" :active-color="themeColor"></u-radio>
					</u-radio-group>
				</view>
			</view>
			<!-- #endif -->
		</view>
		
		<view class="fixed left-0 right-0 bottom-0 u-m-64">
			<u-button @click="pay" hover-class="none" :customStyle="{height: '76rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx'}" :hair-line="false">立即支付</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pay: {
					weixin: 0,
					alipay: 0
				}
			}
		},
		methods: {
			pay() {
				
			}
		}
	}
</script>

<style lang="scss">
	.block {
		box-shadow: 0rpx 10rpx 10rpx -6rpx rgba(0,0,0,0.1), 0rpx 16rpx 20rpx 2rpx rgba(0,0,0,0.06), 0rpx 6rpx 28rpx 4rpx rgba(0,0,0,0.05);
	}
	
	.price {
		font-size: 48rpx;
	}
	
	.unit {
		color: #1f1f1f;
	}
	
	.recharge {
		color: rgba(0, 0, 0, 0.6);
	}
</style>