<template>
	<view class="top-up-success-page">
		<HeaderCom></HeaderCom>
		<view class="status">
			<image src="@/static/pay/success.png" class="status-icon" mode=""></image>
			<view class="status-txt">充值成功</view>
		</view>
		<view class="open" @click="open">去开盒</view>
		<view class="main">
			<view class="item">
				<view class="label">用户信息</view>
				<view class="value">{{infoDetail.nickname}}</view>
			</view>
			<view class="item">
				<view class="label">充值代币</view>
				<view class="value">{{form.coin}}代币</view>
			</view>
			<view class="item">
				<view class="label">充值奖励</view>
				<view class="value">{{form.gift}}代币</view>
			</view>
			<view class="item">
				<view class="label">实付金额</view>
				<view class="value">￥{{form.price}}</view>
			</view>
			<view class="item">
				<view class="label">账户代币余额</view>
				<view class="value">{{infoDetail.coins}}代币</view>
			</view>
		</view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/mine/topUpSuc"></page-popup>
	</view>
</template>

<script>
	import HeaderCom from '@/pages/components/header.vue'
	import { myMixins } from "@/mixins/mixins.js";
	import { userInfo } from '@/API/user.js'
	export default{
		mixins: [myMixins],
		data(){
			return{
				form:{
					price:'',
					coin:'',
					gift:''
				},
				infoDetail:{}
			}
		},
		onLoad(opation) {
			this.form = opation
			this.getUserInfo()
		},
		components:{HeaderCom},
		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)
					}
				})
			},
			goBack(){
				uni.navigateBack()
			},
			open(){
				uni.switchTab({
					url:`/pages/index/new-index`
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
	}
	.top-up-success-page{
		padding: 112rpx 32rpx 32rpx 32rpx;
		.status{
			height: 312rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			// justify-content: center;
			padding-top: 80rpx;
			.status-icon{
				width: 144rpx;
				height: 144rpx;
			}
			.status-txt{
				font-weight: bold;
				font-size: 40rpx;
				color: #333333;
				// margin-top: 16rpx;
			}
		}
		.open{
			width: 686rpx;
			height: 96rpx;
			background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%), #D9D9D9;
			border-radius: 16rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.main{
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-top: 24rpx;
			.item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;
				padding: 0 32rpx;
				.label{
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
				}
				.value{
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}
			}
		}
	}
</style>