<template>
	<view class="top-up-order-page">
		<NavCom title="提交订单"></NavCom>
		<scroll-view scroll-y="true" class="scroll-view">
			<view class="main">
				<view class="item border-bottom">
					<view class="label">充值金额</view>
					<view class="value">¥6</view>
				</view>
				<view class="item border-bottom">
					<view class="label">充值代币</view>
					<view class="value">120代币</view>
				</view>
				<view class="item">
					<view class="label">充值奖励</view>
					<view class="value">0代币</view>
				</view>
			</view>
			<view class="main" v-for="(item,index) in payList" :key="index" @click="payChange(index)">
				<view class="item">
					<view class="item-detail">
						<image :src="item.img" mode="" :style="{width:item.width,height:item.height}" class="pay-icon"></image>
						{{item.label}}
					</view>
					<image src="@/static/mine/g.png" mode="" class="select-img" v-if="item.visible"></image>
					<view class="select-view" v-else></view>
				</view>
			</view>
			<view class="footer">
				<view class="price">
					¥<text class="value">48.8</text>
				</view>
				<view class="btn" @click="pay">立即支付</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import NavCom from '@/pages/components/nav.vue'
	export default{
		data(){
			return{
				payList:[
					{label:'微信支付',value:'',img:'',visible:true,width: '34rpx',height: '29rpx',img: '../../static/index/wx.png',},
					{label:'支付宝支付',value:'',img:'',visible:false,height: '30rpx',width: '30rpx',img: '../../static/index/zfb.png',}
				],
				payIndex:0
			}
		},
		components:{NavCom},
		methods:{
			payChange(index){
				this.payIndex = index;
				this.payList.forEach((item, idx) => {
				    item.visible = idx === index;
				  });
			},
			pay(){
				uni.navigateTo({
					url:`/pages/mine/topUpSuc`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.top-up-order-page{
		.scroll-view{
			height: 100vh;
			padding: 130rpx 22rpx 0 22rpx;
			.main{
				width: 100%;
				background: #FFFFFF;
				border-radius: 10rpx;
				margin-bottom: 10rpx;
				padding: 0 20rpx;
				.item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 88rpx;
					border-radius: 10rpx;
					padding-left: 12rpx;
					.label{
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}
					.value{
						font-size: 28rpx;
						color: #888888;
					}
				}
				.border-bottom{
					border-bottom: 1px solid #EEEEEE;
				}
				.item-detail{
					display: flex;
					align-items: center;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					.pay-icon{
						margin-right: 13rpx;
					}
				}
				.select-img{
					width: 30rpx;
					height: 30rpx;
				}
				.select-view{
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					border: 2rpx solid #888888;
				}
			}
			.footer{
				width: 100%;
				height: 147rpx;
				position: fixed;
				bottom: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 22rpx 0 54rpx;
				background-color: #fff;
				left: 0;
				.price{
					font-size: 24rpx;
					color: #EF4235;
					font-weight: 500;
					.value{
						font-size: 46rpx;
					}
				}
				.btn{
					width: 431rpx;
					height: 88rpx;
					background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
					border-radius: 44rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>