LocalLivingServicesUniapp/pages/groupMeal/users/withdrawal.vue

<template>
	<view class="page-container">
		<u-navbar title="提现" :autoBack="true" :placeholder="true" :border-bottom="false"></u-navbar>

		<view class="form-card">
			<view class="section-item" @click="selectBankCard">
				<view class="label">提现至</view>
				<view class="content">
					<view class="bank-info">
						<u-image class="bank-icon" :src="bankCard.icon" width="48rpx" height="48rpx" mode="aspectFit"></u-image>
						<text class="bank-name">{{ bankCard.name }} ({{ bankCard.tailNumber }})</text>
					</view>
					<u-icon name="arrow-right" color="#c0c4cc" size="32rpx"></u-icon>
				</view>
			</view>

			<view class="section-input">
				<view class="label">提现金额</view>
				<view class="input-row">
					<text class="currency-symbol">¥</text>
					<u-input 
						type="digit" 
						height="80"
						placeholder="请输入提现金额" 
						:customStyle="{ 
							fontSize: '52rpx',
							padding: '0 10rpx' 
						}"
						v-model="withdrawalAmount" 
					></u-input>
				</view>
				
				<view class="balance-info">
					<text>当前可提现余额{{ availableBalance }}元，</text>
					<text class="all-withdraw-btn" @click="allWithdraw">全部提现</text>
				</view>
			</view>
		</view>

		<view class="footer-bar">
			<u-button 
				type="primary" 
				:disabled="!withdrawalAmount || parseFloat(withdrawalAmount) <= 0" 
				@click="applyWithdrawal"
			>申请提现</u-button>
		</view>
		<!-- 调用选择器组件 -->
		<BankCardSelector 
			ref="bcSelector" 
			:data-list="bankCards"
			v-model="selectedCardId"
			@select="handleCardSelect"
		/>
	</view>
</template>

<script>
import BankCardSelector from './bankCard-select.vue';
export default {
	components: {
		BankCardSelector
	},
	data() {
		return {
			// 模拟数据
			bankCard: {
				name: '中国工商银行',
				tailNumber: '0882',
				icon: '/static/groupMeal/iconback/yinhang-gongshang.png' 
			},
			availableBalance: '821.33', // 当前可提现余额
			withdrawalAmount: '', // 提现金额输入框的值
			// 模拟的银行卡数据
			bankCards: [
				{ id: 101, name: '中国工商银行储蓄卡', last4: '0882', icon: '/static/groupMeal/iconback/yinhang-gongshang.png' },
				{ id: 102, name: '中国建设银行储蓄卡', last4: '0882', icon: '/static/groupMeal/iconback/yinhang-jianshe.png' },
				{ id: 103, name: '中国光大银行储蓄卡', last4: '0882', icon: '/static/groupMeal/iconback/yinhang-guangda.png' },
				// 模拟更多数据以测试滚动
				{ id: 104, name: '中国农业银行储蓄卡', last4: '1234', icon: '/static/groupMeal/iconback/yinhang-nonghang.png' },
				{ id: 105, name: '招商银行储蓄卡', last4: '5678', icon: '/static/groupMeal/iconback/yinhang-zhaoshang.png' },
				{ id: 106, name: '交通银行储蓄卡', last4: '9012', icon: '/static/groupMeal/iconback/yinhang-jiaotong.png' },
			],
			selectedCardId: 101, // 默认选中的卡ID
		};
	},
	methods: {
		// 选择/修改银行卡
		selectBankCard() {
			this.$refs.bcSelector.open();
			return;
			uni.navigateTo({
				url: '/pages/groupMeal/users/bankCard-list' 
			});
		},
		// 选择事件回调
		handleCardSelect(card) {
			console.log('您选择了:', card);
			uni.showToast({
				title: `已选择: ${card.name}`,
				icon: 'none'
			});
		},
		// 全部提现操作
		allWithdraw() {
			this.withdrawalAmount = this.availableBalance;
			console.log('已设置全部提现:', this.withdrawalAmount);
		},
		// 申请提现
		applyWithdrawal() {
			if (parseFloat(this.withdrawalAmount) > parseFloat(this.availableBalance)) {
				uni.showToast({
					title: '提现金额不能超过可提现余额',
					icon: 'none'
				});
				return;
			}
			
			console.log('提交提现申请:', {
				amount: this.withdrawalAmount,
				bankCard: this.bankCard
			});
			
			// 实际项目中应在此处调用API进行提现
			uni.showLoading({ title: '提交中' });
			setTimeout(() => {
				uni.hideLoading();
				uni.showToast({ title: '提现申请成功', icon: 'success' });
				// 成功后可跳转到提现记录页
			}, 1500);
		}
	}
};
</script>

<style lang="scss" scoped>
$uni-text-color: #303133;
$uni-color-primary: #2979ff;
$uni-text-color-placeholder: #909399;

.page-container {
	min-height: 100vh;
	background-color: #F7F8FC;

	.form-card {
		background-color: #fff;
		padding: 0 30rpx;
	}
}

// 提现至：银行卡选择区域
.section-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #eee;
	
	.label {
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}
	
	.content {
		display: flex;
		align-items: center;
	}

	.bank-info {
		display: flex;
		align-items: center;
		margin-right: 15rpx;
		
		.bank-icon {
			margin-right: 10rpx;
			// 确保u-image可以正确显示
			display: block; 
		}
		
		.bank-name {
			font-size: 30rpx;
			color: $uni-text-color;
		}
	}
}

// 提现金额输入区域
.section-input {
	padding: 30rpx 0 20rpx;
	
	.label {
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		margin-bottom: 20rpx;
	}
	
	.input-row {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	
		.currency-symbol {
			font-size: 52rpx; 
			font-weight: bold;
			color: #333;
			padding-right: 10rpx;
		}
	}

	.balance-info {
		font-weight: 400;
		font-size: 26rpx;
		color: rgba(51,51,51,0.6);
		margin-top: 16rpx;
		
		.all-withdraw-btn {
			font-weight: 400;
			font-size: 26rpx;
			color: #2D4D89;
			margin-left: 10rpx;
			
			&:active {
				opacity: 0.8;
			}
		}
	}
}

// 底部按钮
.footer-bar {
	::v-deep .u-btn {
		width: 100%;
		height: 76rpx;
		border-radius: 54rpx;
		background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
		&.u-btn--primary--disabled {
			background: #a0cfff;
		}
	}
}
</style>