sct/pagesT/money/Balance.vue

<template>
	<view :class="['qn-page-' + theme]">
		<view class="balace-view primary-lg">
			<view class="label">账户余额</view>
			<view class="money">
				<text class="icon">¥</text>
				<text>{{ Number(userInfo.memberBalance) || 0 }}</text>
			</view>
		</view>
		<view class="bth-ul">
			<view class="btn-li" @click="goPage('/pagesT/money/addWithdrawal')">
				<text class="ibonfont ibondaifukuan"></text>
				<text class="label">余额提现</text>
				<text class="ibonfont ibonjinru float_right"></text>
			</view>

			<view class="btn-li clearfix" @click="goPage('/pagesT/money/BalanceDetail')">
				<text class="ibonfont ibonnavicon-jylstj"></text>
				<text class="label">余额流水</text>
				<text class="ibonfont ibonjinru float_right"></text>
			</view>
			<view class="btn-li" @click="setPassword">
				<text class="ibonfont ibonpassword"></text>
				<text class="label">设置支付密码</text>
				<text class="ibonfont ibonjinru float_right"></text>
			</view>
			<view class="btn-li clearfix" @click="goPage('/pagesT/money/CustomerBalanceDetail')">
				<text class="ibonfont iboncaiwuliushui"></text>
				<text class="label">往来查询</text>
				<text class="ibonfont ibonjinru float_right"></text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {}
		};
	},
	onShow() {
		this.getCustomerInfo();
	},
	methods: {
		// 获取用户信息
		getCustomerInfo() {
			this.$u.api.getCustomerInfo().then(({ data }) => {
				this.userInfo = data;
				this.$store.commit('commit_userStatus', data);
			});
		},
		setPassword() {
			// 已经设置过密码
			if (this.userInfo.payPassword) {
				this.goPage('/pagesT/money/PayPasswordEditCheck');
			} else {
				// 未设置过密码
				this.goPage('/pagesT/money/PayPassword');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.balace-view {
	width: 710rpx;
	margin: 20rpx auto;
	text-align: center;
	color: #ffffff;
	border-radius: 20rpx;
	padding: 50rpx 0;
	.label {
		font-size: 24rpx;
		padding-bottom: 10rpx;
	}
	.money {
		font-size: 50rpx;
		font-weight: bold;
		font-family: DIN-Medium;
		.icon {
			font-size: 28rpx;
		}
	}
}
.bth-ul {
	padding: 0 30rpx;
	width: 710rpx;
	margin: 40rpx auto 0;
	background-color: #ffffff;
	border-radius: 20rpx;
	.btn-li {
		line-height: 90rpx;
		border-bottom: 1px solid #f5f5f5;
		.label {
			margin-left: 20rpx;
		}
		.ibonjinru {
			font-size: 28rpx;
			color: #999999;
		}
		&:last-child {
			border-bottom: 0;
		}
	}
}
</style>