great_distribution/pages/balance/index.vue

<template>
	<view class="balance-content" :style="{'--status-bar-': statusBarHeight}">
		<view class="balance-content-info">
			<!-- 头部主要内容 开始 -->
			<view class="balance-content-header">	
				<customNavbar 
				title="余额提现" 
				bgColor="#fff"
				:contentStyle="{color: '#000'}"
				></customNavbar>
			</view>
			<!-- 头部主要内容 结束 -->
			
			<!-- userInfo内容 开始 -->
			
			<view class="balance-content-userinfo">
				<view class="balance-content-userinfo-box">
					<view class="balance-userinfo-info">
						<view class="balance-userinfo-title"><text>张飞烤地瓜旅行社</text></view>
						<view class="balance-userinfo-count">
							<!-- 余额 -->
							<view 
							class="balance-userinfo-money"
							>
								<text>
									<text class="inspage-userinfo-util">￥</text>
									<u-count-to :decimals="2" :startVal="0" :endVal="monry" color="#fff" />
									<text class="balance-userinfo-util">元</text>
								</text>
								<text>我的余额（元）</text>
							</view>
							<!-- 去提现 -->
							<view class="balance-userinfo-cash">
								<view @click="navigateToFun({url: '/pages/balance/index'})">去提现</view>
							</view>
						</view>
					</view>
					<view class="balance-userinfo-tool">
						<view 
						v-for="(item,index) in tool"
						:key="index"
						@click="navigateToFun(item)"
						>
							<image :class="['',index != 1 ?'balance-userinfo-tool-icon':'balance-userinfo-tool-icon1']" :src="item.icon"></image>
							<text>{{item.title}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- userInfo内容 结束 -->
		</view>
	</view>
</template>

<script>
	import { navigateTo } from "@/utils/util.js"
	export default {
		data() {
			return {
				title: '这是我的',
				statusBarHeight: 0, // 状态栏安全距离
				monry: 123456.789,
				tool: [ // 我的工具
					{ title: "支付设置",icon: this.$commonConfig.staticUrl + 'balance/zhifu.png', url: '/pages/invitationStatistics/index' },
					{ title: "收支明细",icon: this.$commonConfig.staticUrl + 'balance/mingxi.png', url: '/pages/consume/index' },
				]
			}
		},
		onLoad() {

		},
		onShow() {
			this.statusBarHeight = getApp().globalData.statusBarHeight
		},
		methods: {
			/**
			 * @author ygh
			 * @data 2023-12-20
			 */
			navigateToFun(item){
				navigateTo(item.url)
			},
			/**
			 * 数字显示格式化
			 *
			 */
			numFormat(num=0) {
				if(num<100000) {
					return num
				}else if(num>100000){
					return (num/10000).toFixed(2)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.balance-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		--header-h: 90rpx;
		.balance-content-info {
			width: 100%;
			box-sizing: border-box;
		}
	}
	/** 头部主要内容 开始 */
	.balance-content-header {
		width: 100%;
		height: var(--header-h);
		box-sizing: border-box;
		::v-deep .u-search {
			padding: 0 30rpx !important;
		}
		::v-deep .u-search__action {
			color: #fff !important;
		}
	}
	/** 头部主要内容 结束  **/
	
	/** userInfo内容 开始 */
	.balance-content-userinfo {
		width: 100%;
		padding: 24rpx 40rpx 0;
		box-sizing: border-box;
		
		.balance-content-userinfo-box {
			width: 100%;
			background: #F3F8FF;
			border-radius: 0rpx 0rpx 24rpx 24rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			
			.balance-userinfo-info {
				width: 100%;
				height: 320rpx;
				box-sizing: border-box;
				background: linear-gradient(to bottom, rgba(238, 12, 12, 1) 0%, rgba(243, 157, 159, 1) 100%);
				border-radius: 20rpx;
				box-shadow: 0rpx 0 20rpx 2rpx rgba(205, 205, 205, 0.50);
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				color: #fff;
				font-size: 28rpx;
				font-family: SourceHanSansCN, SourceHanSansCN;
				padding: 46rpx;
				.balance-userinfo-title {
					display: flex;
					width: 100%;
					box-sizing: border-box;
				}
				.balance-userinfo-count {
					width: 100%;
					display: flex;
					box-sizing: border-box;
					align-items: center;
					justify-content: space-between;
					.balance-userinfo-money {
						display: flex;
						justify-content: center;
						align-items: flex-start;
						flex-direction: column;
						> text:nth-child(1) {
							.balance-userinfo-util {
								font-size: 24rpx;
								margin-left: 5rpx;
							}
							::v-deep .u-count-num {
								font-weight: bold !important;
								font-size: 48rpx !important;
							}
						}
						> text:nth-child(2) {
							margin-top: 20rpx;
							font-size: 24rpx;
						}
					}
					.balance-userinfo-cash {
						width: 144rpx;
						height: 50rpx;
						flex-shrink: 0;
						>view {
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;
							background: #FFFFFF;
							border-radius: 24rpx;
							font-size: 24rpx;
							font-family: SourceHanSansCN, SourceHanSansCN;
							font-weight: 550;
							color: #EE1818;
						}
					}
				}
			}
				
			.balance-userinfo-tool {
				width: 100%;
				box-sizing: border-box;
				padding: 22rpx 0;
				display: flex;
				>view {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					color: rgba(78, 78, 78, 1);
					.balance-userinfo-tool-icon {
						width: 34rpx;
						height: 30rpx;
					}
					.balance-userinfo-tool-icon1 {
						width: 32rpx;
						height: 32rpx;
					}
					text {
						margin-left: 10rpx;
						font-size: 24rpx;
					}
				}
			}
		}
		
	}
	/** userInfo内容 结束  **/
</style>