great_distribution/pages/cash/index.vue

<template>
	<view class="cash-content" :style="{'--status-bar-': statusBarHeight}">
		<view class="cash-content-info">
			<!-- 头部主要内容 开始 -->
			<view class="cash-content-header">	
				<customNavbar 
				title="余额提现" 
				bgColor="rgba(0,0,0,0)"
				:customNavbarInfo="{}"
				:contentStyle="{}"
				:leftStyle="{color: '#fff'}"
				></customNavbar>
				
				<!--  余额 开始  -->
				<view class="cash-content-money">
					<text>可提现余额（元）</text>
					<view class="cash-content-money-num">
						<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>
					</view>
				</view>
				<!--  余额 结束  -->
				
				<!--  提现 开始  -->
				<view class="cash-content-cash">
					<view class="cash-content-cash-box">
						<text>提现金额</text>
						<view class="cash-content-cash-money">
							<text class="cash-content-cash-money-icon">￥</text>
							<view class="cash-content-cash-input">
								<u--input
								    placeholder="请输入内容"
								    border="none"
									clearable
								    v-model="moneyValue"
								  ></u--input>
							</view>
							
							<text class="cash-content-cash-money-all" @click="cashAll()">全部提现</text>
						</view>
						<view class="cash-content-cash-card">
							<u-cell-group :border="false">
								<u-cell 
								:border="false" 
								title="个人设置"
								isLink
								:value="'中国银行'"
								@click="openPopup()"
								 ></u-cell>
							</u-cell-group>
						</view>
						
						<view class="cash-content-cash-submit">
							<view>提现</view>
						</view>
					</view>
				</view>
				<!--  提现 结束  -->
				
				<!-- 选择银行卡 -->
				<u-picker 
				:show="show" 
				keyName="label" 
				:columns="columns"
				@cancel="cancelPicker"
				@confirm="confirmPicker"
				></u-picker>
			</view>
			<!-- 头部主要内容 结束 -->
		</view>
	</view>
</template>

<script>
	import { navigateTo } from "@/utils/util.js"
	export default {
		data() {
			return {
				title: '这是我的',
				statusBarHeight: 0, // 状态栏安全距离
				monry: 123456.789,
				moneyValue: null,
				tool: [ // 我的工具
					{ title: "支付设置",icon: this.$commonConfig.staticUrl + 'balance/zhifu.png', url: '/pages/invitationStatistics/index' },
					{ title: "余额提现",icon: this.$commonConfig.staticUrl + 'balance/mingxi.png', url: '/pages/balance/index' },
				],
				show: false,
				columns: [
                    [{
                        label: '雪月夜',
                        // 其他属性值
                        id: 2021
                        // ...
                    }, {
                        label: '冷夜雨',
                        id: 804
                    }]
                ]
			}
		},
		onLoad() {

		},
		onShow() {
			this.statusBarHeight = getApp().globalData.statusBarHeight
		},
		methods: {
			/**
			 * @author ygh
			 * @data 2023-12-20
			 */
			navigateToFun(){
				navigateTo('/pages/cash/index')
			},
			/**
			 * 数字显示格式化
			 *
			 */
			numFormat(num=0) {
				if(num<100000) {
					return num
				}else if(num>100000){
					return (num/10000).toFixed(2)
				}
			},
			/**  全部提现  */
			cashAll() {
				this.moneyValue = this.monry
			},
			/**
			 *  打开选择器
			 */
			openPopup() {
				this.show = true
			},
			/** 取消选择器  */
			cancelPicker() {
				this.show = false
			},
			/** 确认选择器  */
			confirmPicker() {
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.cash-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		--header-h: 580rpx;
		.cash-content-info {
			width: 100%;
			box-sizing: border-box;
		}
	}
	/** 头部主要内容 开始 */
	.cash-content-header {
		width: 100%;
		height: var(--header-h);
		box-sizing: border-box;
		background: var(--gd-bgm-lg-color);
		position: relative;
		::v-deep .u-search {
			padding: 0 30rpx !important;
		}
		::v-deep .u-search__action {
			color: #fff !important;
		}
		
		/**  余额 开始  */
		.cash-content-money {
			width: 100%;
			box-sizing: border-box;
			margin-top: 50rpx;
			padding-left: 66rpx;
			color: #fff;
			>text {
				font-size: 24rpx;
			}
			.cash-content-money-num {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
				margin-top: 24rpx;
				> 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;
				}
			}
		}
		
		/**  余额 结束  */
		
		/**  提现 开始  */
		.cash-content-cash {
			width: 100%;
			box-sizing: border-box;
			position: absolute;
			top: 100%;
			transform: translateY(-50%);
			padding: 0 12rpx;
			.cash-content-cash-box {
				width: 100%;
				height: 100%;
				background-color: #fff;
				box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(221,221,221,0.5);
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 34rpx 30rpx 38rpx;
				>text {
					font-size: 28rpx;
					color: #363636;
				}
				.cash-content-cash-money {
					width: 100%;
					display: flex;
					align-items: center;
					padding: 40rpx 0 20rpx;
					border-bottom: 2rpx solid #EEEEEE;
					::v-deep .u-cell__body {
						padding: 20rpx 0 !important;
					}
					.cash-content-cash-input {
						width: 100%;
						padding: 0 10rpx;
					}
					>text {
						flex-shrink: 0;
						flex-wrap: nowrap;
						white-space: nowrap;
					}
					.cash-content-cash-money-icon {
						font-size: 32rpx;
					}
					.cash-content-cash-money-all {
						color: var(--gd-but-color);
						font-size: 24rpx;
						cursor: pointer;
					}
				}
				.cash-content-cash-card {
					width: 100%;
					::v-deep .u-cell__body {
						padding: 20rpx 0 !important;
					}
				}
				.cash-content-cash-submit {
					width: 100%;
					height: 92rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					padding: 0 80rpx 0;
					margin-top: 70rpx;
					>view {
						width: 100%;
						height: 100%;
						border-radius: 46rpx;
						color: #fff;
						background-color: var(--gd-but-color);
						font-size: 28rpx;
						font-family: SourceHanSansCN, SourceHanSansCN;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
		/**  提现 结束  */
	}
	/** 头部主要内容 结束  **/
	
</style>