fangliaoxiaochengxv/subPages/wallet/index.vue

<template>
	<view class="app-page">
		<view class="top-box">
			<u--image width='710rpx' height='377rpx' radius="10rpx" mode="widthFix"
				:src="`${$getImgBaseUrl()}ic-tx-bg.png`" :fade="true" duration="450" customStyle="margin:0;" />
			<view class="top-view">
				<text class="t1">可提现金额(元)</text>
				<view class="top-price-box">
					<u-count-to :startVal="0" :endVal="canBeCashed" separator="," decimals="2" color="#FFFFFF"
						fontSize="68rpx" bold="true"></u-count-to>
					<view class="top-right-box" @click="toSubPages('withdrawal')">
						<text>去提现</text>
						<u-icon name="arrow-right" color="#FFFFFF" size="15rpx" customStyle="padding: 12rpx"></u-icon>
					</view>
				</view>
				<u-line color="rgba(191,181,255,0.19)" length="610rpx" customStyle="margin:60rpx auto 0 auto;"></u-line>
				<view class="top-bottom-box">
					<text class="t2" space="nbsp">总金额(元) {{userInfo.balance_total}}</text>
					<text class="t3" space="nbsp">冻结金额(元) {{userInfo.balance_lock}}</text>
				</view>
			</view>
		</view>
		<view class="content-box">
			<BaseTitle txt="收支明细" />
		</view>

	</view>
</template>

<script>
	import BaseTitle from "@/components/base-title/index.vue"
	export default {
		components: {
			BaseTitle
		},
		data() {
			return {
				userInfo: {
					rebate_total: 0,
					rebate_used: 0
				}
			}
		},
		computed: {
			canBeCashed() {
				const { balance_total, balance_used, balance_lock } = this.userInfo
				return balance_total - balance_used - balance_lock
			}
		},
		onLoad(options) {},
		onShow() {
			const tempUnserInfo = uni.getStorageSync('userInfo')
			if (tempUnserInfo) {
				this.userInfo = JSON.parse(tempUnserInfo)
			}
		},
		methods: {
			toSubPages(index) {
				uni.navigateTo({
					url: `/subPages/${index}/index`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.app-page {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.top-box {
		margin-top: 20rpx;
		width: 100%;
		height: 423rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
	}

	.top-view {
		position: absolute;
		top: 0;
		left: 20rpx;
		right: 20rpx;
		display: flex;
		flex-direction: column;

		.t1 {
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #EAE7FF;
			margin-top: 43rpx;
			margin-left: 43rpx;
		}

		.top-price-box {
			width: calc(100% - 100rpx);
			display: flex;
			margin-left: 50rpx;
			margin-top: 24rpx;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.top-right-box {
				padding: 30rpx 0 30rpx 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				text {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}

		.top-bottom-box {
			width: calc(100% - 100rpx);
			height: 110rpx;
			margin-left: 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.t2 {
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #EAE7FF;
			}

			.t3 {
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #EAE7FF;
			}
		}
	}

	.content-box {
		width: 710rpx;
		display: flex;
		flex-direction: column;
	}
</style>