xusfood_client/center/mybalance.vue

<template>
	<view class="page-wrap">
		<u-navbar
			title="我的余额"
			:autoBack="false"
			 @leftClick="leftClick"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="panel">
			<view class="title">个人余额（元）</view>
			<view class="number-wrap">
				¥ <text class="number">{{memberInfo.balance}}</text> 
			</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 {
				memberInfo:{},
				params:{
				}
				
			}
		},
		onShow() {
			this.getMemberInfo();
		},
		onLoad() {

		},
		methods: {
			leftClick(){
				uni.reLaunch({url: '/center/center'});
			},
			getMemberInfo(){
				this.$u.api.memberInfo({id:this.vuex_member_info.id}).then(res=>{
					this.memberInfo = res.data;
					this.avatar =  res.data.avatar;
					this.$u.vuex('vuex_member_info', res.data);
					// console.log('memberInfo',this.memberInfo);
					}).catch(err=>{
					console.log('memberInfo',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, #00D35A 0%, #01A447 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;
		}
	}
	.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>