<template>
	<view class="rechargeStyle" :style="{'height':contentHeight}" > 
		<view class="rechargeBox">
			<view class="title">
				<view class="title_l" :style="{'background':mainColor}"></view>
				<Text style='margin-left: 20rpx;font-size: 26rpx;'>我的账户</Text>
			</view>
			<view class="balance">
				<view style="display: flex;align-items: center;">
					<Text style='margin-left: 20rpx;font-size: 36rpx;'>余额</Text>
				</view>
				<Text style='font-size: 42rpx;'>￥{{g.balance}}</Text>
			</view>
			<view class="recharge">
				<Text style='font-size: 26rpx;color: #c8c9cc;'>充值金额</Text>
				<!-- <input type="text" style='text-align: right;' v-model="inputvalue"> -->
			</view>
			<View>
				<!-- TODO  充值金额的列表-->
			</View>
			
			<view class='button'
				:style="{'background':mainColor}"
				@click="btn_recharge">
				<Text>立即充值</Text>
			</view>	
			<view class="title" style="margin-top: 30rpx;">
				<view class="title_l" :style="{'background':mainColor}"></view>
				<Text style='margin-left: 20rpx;font-size: 26rpx;'>充值说明</Text>
			</view>
		</view>
	
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle:"充值中心",
				contentHeight:0,
				mainColor: "",
				g:{},
				
			}
		},
		mounted() {
			let currentPages = getCurrentPages();
			 let u = "/" + currentPages[currentPages.length-1].route;
			 let pages = uni.getStorageSync("basedata")
			   ? uni.getStorageSync("basedata").bar_title
			   : [];
			 pages.forEach((x) => {
			   if (x.value == u) {
			     this.pageTitle = x.new_name ? x.new_name : x.name;
			   }
			 });
			 uni.setNavigationBarTitle({
			   title: this.pageTitle,
			 });
		},
		onLoad(){
			
			
		},
		created(){
			 this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
			  this.mainColor = this.$uiConfig.mainColor;
			 this.balancedata()
			 
		},
		
		methods: {
			
			balancedata(){
				uni.showNavigationBarLoading();
				let h=this.apiheader()
				this.request(
				  {
				    url: "",
					header:h,
				    data: {
				      r: "api/balance/index",
				    }
				  },
				  res => {
					uni.hideNavigationBarLoading()
				   this.g  = res.data;
				   
				  }
				);
			},
			
		
			btn_recharge(){
				
			},
				
		}
	}
</script>

<style>
	.rechargeStyle{
		background: #f3f4f6;
		width: 100%;
	}
	.rechargeStyle .rechargeBox{
		width: 100%;
		padding: 30rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.rechargeStyle .title{
		width: 100%;
		display: flex;
		align-items: center;
	}
	.rechargeStyle .title .title_l{
		width: 3px;
		height: 15px;
	}
	.rechargeStyle .balance{
		margin-top: 30rpx;
		width: 100%;
		height: 90px;
		border-radius: 10rpx;
		background: #f4f4f5;
		padding:0 40rpx ;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.rechargeStyle .recharge{
		margin-top: 30rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.rechargeStyle .button{
		width: 100%;height: 36px;
		color: #fff;
		margin: 20rpx 0;
		border-radius:18px ;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
