great_group/center/mybalance.vue

<template>
	<view class="page-wrap">
		<u-navbar
			title="余额中心"
			:placeholder="true"
			:autoBack="false"
			 @leftClick="leftClick"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="panel">
			<view class="title">账户余额（元）</view>
			<view class="number-wrap">
				<view class="total">
					¥ <text class="number">{{balanceInfo.balance}}</text> 
				</view>
				<view class="other u-flex">
					<view class="" style="margin-right: 20rpx;">
						授信额度:{{balanceInfo.grantQuota}}
					</view>
					<view class="" style="margin-right: 20rpx;">
						授信余额:{{balanceInfo.grantSurplus}}
					</view>
					<view class="">
						授信欠款:{{ balanceInfo.grantUsed }}
					</view>
				</view>
			</view>
			<!-- <view class="btn-wrap">
				<text class="btn" @click="$u.route('/center/recharge')">充值</text>
			</view> -->
			<view class="shape shape1"></view>
			<view class="shape shape2"></view>
		</view>
		
		<u-cell-group>
			<u-cell @click="$u.route('/center/dealList')" icon="order" title="交易明细" :isLink="true"></u-cell>
			<u-cell @click="$u.route('/center/setPaypass',{fromPage:'reset'})" icon="setting-fill" title="支付密码" :isLink="true"></u-cell>
			<u-cell @click="$u.route('/center/findpaypass')" icon="fingerprint" title="找回支付密码" :isLink="true"></u-cell>
		</u-cell-group>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				balanceInfo:{},
				params:{
				}
				
			}
		},
		onShow() {
			this.getBalanceInfo();
		},
		onLoad() {

		},
		methods: {
			leftClick(){
				uni.reLaunch({url: '/center/center'});
			},
			getBalanceInfo(){
				this.$u.api.balanceInfo({id:this.vuex_member_info.id}).then(res=>{
					this.balanceInfo = res.data;
					// this.avatar =  res.data.avatar;
					// console.log('balanceInfo',this.balanceInfo);
					}).catch(err=>{
					console.log('getBalanceInfo',err.data);
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
.panel{
	// min-height: 284rpx;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	background-color: #ddd;
	padding: 40rpx;
	border-radius: 8rpx;
	margin-bottom: 40rpx;
	color: #FFFFFF;
	background: linear-gradient(147deg, #FF7979 0%, #ED0000 100%);
	.title{
		font-size: 26rpx;
		font-weight: 400;
		line-height: 37rpx;
	}
	.number-wrap{
		font-size: 24rpx;
		.number{
			font-size: 58rpx;
			font-weight: 600;
			line-height: 81rpx;
			margin-bottom: 50rpx;
			margin-left: 10rpx;
		}
	}
	.btn-wrap{
		position: relative;
		z-index: 99;
		text-align: right;
		.btn{
			display: inline-block;
			padding: 7rpx 20rpx;
			border-radius: 30rpx;
			background: rgba(255,255,255,0.16);
		}
	}
	.shape{
		width: 326rpx;
		height: 372rpx;
		position: absolute;
		border-radius: 50% 50%;
		top: -50rpx;
	}
	.shape1{
		background: rgba(255,255,255,0.1);
		right: -50rpx;
	}
	.shape2{
		background: rgba(255,255,255,0.2);
		right: -170rpx;
	}
}
</style>