<template>
	<view class="top-up-page">
		<NavCom title="充值"></NavCom>
		<view class="info">
			<image :src="infoDetail.avatarResource.url ? infoDetail.avatarResource.url : 'https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/mine/logo.png'" class="avatar" mode=""></image>
			<view class="detail">
				<view class="name">{{infoDetail.nickname||''}}</view>
				<view class="price">代币余额：10</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="main">
			<view class="list">
				<view class="item" :class="{'item-active':listIndex === index}" v-for="(item,index) in list" :key="index" @click="handleItem(index)">
					<view :class="{'give-active': item.give && listIndex === index,'give':item.give && listIndex !== index}"  v-if="item.give">
						赠送{{item.give}}代币
					</view>
					<view>
						<text class="token">{{item.price}}</text>
						<text class="token-sym">代币</text>
					</view>
					<view class="price" :class="{'price-active':listIndex === index}">¥6</view>
				</view>
			</view>
			<view class="footer">
				<view class="total">合计 ¥300</view>
				<view class="pay" @click="pay">立即支付</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import NavCom from '@/pages/components/nav.vue'
	import { userInfo } from '@/API/user.js'
	export default{
		data(){
			return{
				list:[
					{price:6,token:100,give:10,visible:true},
					{price:6,token:100,give:10,visible:false},
					{price:6,token:100,give:10,visible:false},
					{price:6,token:100,give:10,visible:false},
					{price:6,token:100,give:10,visible:false},
					{price:6,token:100,give:10,visible:false},
					{price:6,token:100,give:10,visible:false},
				],
				listIndex:0,
				infoDetail:{
					phone:"",
					avatarResource:{}
				}
			}
		},
		components:{NavCom},
		mounted() {
			this.getUserInfo()
		},
		methods:{
			// 获取用户信息
			getUserInfo(){
				userInfo().then(res => {
					if(res.code === 200){
						this.infoDetail = res.data
						
					}else if(res.code == 400){
						uni.removeStorageSync('userInfo')
						uni.removeStorageSync('info')
						this.$api.msg(res.message)
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			handleItem(index){
				this.listIndex = index
			},
			pay(){
				uni.navigateTo({
					url:'/pages/mine/topUpOrder'
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
		background-repeat: no-repeat;
	}
	.top-up-page{
		.info{
			padding: 130rpx 42rpx 24rpx 42rpx;
			display: flex;
			align-items: center;
			.avatar{
				width: 105rpx;
				height: 105rpx;
				border-radius: 50%;
			}
			.detail{
				margin-left: 22rpx;
				.name{
					font-weight: 500;
					font-size: 34rpx;
					color: #333333;
				}
				.price{
					font-size: 22rpx;
					color: #888888;
					margin-top: 4rpx;
				}
			}
		}
		.main{
			height: calc(100vh - 260rpx);
			background: #FFFEFE;
			border-radius: 20rpx 20rpx 0 0;
			.list{
				display: grid;
				gap: 12rpx;
				grid-template-rows: 1fr;
				margin: 0px auto;
				grid-template-columns: repeat(3, 1fr);
				padding: 30rpx 22rpx;
				.item{
					width: 218rpx;
					height: 164rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					border: 4rpx solid #EAEAEA;
					position: relative;
					padding-top: 46rpx;
					margin-bottom: 30rpx;
					color: #333333;
					text-align: center;
					.give{
						position: absolute;
						top: -24rpx;
						left: 0;
						width: 174rpx;
						height: 51rpx;
						background-image: url('@/static/index/n.png');
						background-repeat: no-repeat;
						background-size: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 500;
						font-size: 25rpx;
						color: #333333;
					}
					.give-active{
						position: absolute;
						top: -24rpx;
						left: 0;
						width: 174rpx;
						height: 51rpx;
						background-image: url('@/static/index/y.png');
						background-repeat: no-repeat;
						background-size: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 500;
						font-size: 25rpx;
						color: #fff;
					}
					.token{
						font-size: 60rpx;
						
					}
					.token-sym{
						font-size: 24rpx;
						margin-left: 10rpx;
					}
					.price{
						font-size: 29rpx;
						color: #666666;
						margin-top: -18rpx;
					}
					.price-active{
						font-size: 29rpx;
						color: #FF9A93;
					}
				}
				.item-active{
					background: linear-gradient(0deg, #FCE2E8 0%, #FFF6F5 100%);
					border: 4rpx solid #FF8880;
					color: #FF574C;
				}
			}
			.footer{
				position: fixed;
				bottom: 60rpx;
				left: 20rpx;
				width: 706rpx;
				height: 88rpx;
				display: flex;
				align-items: center;
				.total{
					width: 390rpx;
					height: 88rpx;
					background: #FF867C;
					border-radius: 44rpx;
					font-size: 32rpx;
					color: #FFFFFF;
					border-radius:  44rpx 0px 0px 44rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.pay{
					width: 316rpx;
					height: 88rpx;
					background: #F35649;
					border-radius: 0px 44rpx 44rpx 0px;
					font-size: 32rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		
	}
</style>