mechanicStore-app/pages/account/withdraw.uvue

<template>
	<view class="page-container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<view class="header-left" @click="goBack">
				<u-icon name="arrow-left" :size="24" />
			</view>
			<view class="header-title">提现</view>
			<view class="header-right"></view>
		</view>
		
		<!-- 可提现金额 -->
		<view class="available-balance">
			<text class="balance-label">可提现金额（元）</text>
			<text class="balance-amount">¥{{ availableBalance }}</text>
		</view>
		
		<!-- 提现金额输入 -->
		<view class="withdraw-section">
			<view class="input-container">
				<text class="input-prefix">¥</text>
				<input class="withdraw-input" v-model="withdrawAmount" type="number" placeholder="请输入提现金额" />
				<button class="all-withdraw-btn" @click="withdrawAll">全部提现</button>
			</view>
		</view>
		
		<!-- 提现说明 -->
		<view class="withdraw-info">
			<text class="info-title">提现说明</text>
			<view class="info-item">
				<text>1、每笔提现最低金额10元，最高金额200元</text>
			</view>
			<view class="info-item">
				<text>2、每日累计最多可提现200元</text>
			</view>
			<view class="info-item">
				<text>3、请输入正整数</text>
			</view>
			<view class="info-item">
				<text>4、提现手续费为7%，例如：提现100元扣除7元实际到账93元</text>
			</view>
		</view>
		
		<!-- 提现方式 -->
		<view class="withdraw-method">
			<text class="method-title">提现方式</text>
			<view class="method-item" @click="selectMethod">
				<view class="method-left">
					<u-icon name="wechat" :size="24" color="#07C160" />
					<text class="method-name">提现至微信钱包</text>
				</view>
				<view class="method-right">
					<u-icon name="checkmark-circle-fill" :size="20" color="#ffc107" />
				</view>
			</view>
		</view>
		
		<!-- 申请提现按钮 -->
		<view class="submit-section">
			<button class="submit-btn" @click="submitWithdraw">申请提现</button>
		</view>
	</view>
</template>

<script setup lang="uts">
	import { ref } from 'vue';
	
	// 数据定义
	const availableBalance = ref('1000');
	const withdrawAmount = ref('');
	
	// 方法定义
	const goBack = () => {
		uni.navigateBack();
	};
	
	const withdrawAll = () => {
		withdrawAmount.value = availableBalance.value;
	};
	
	const selectMethod = () => {
		// 这里可以添加选择其他提现方式的逻辑
	};
	
	const submitWithdraw = () => {
		// 验证提现金额
		if (!withdrawAmount.value || parseFloat(withdrawAmount.value) <= 0) {
			uni.showToast({
				title: '请输入提现金额',
				icon: 'none'
			});
			return;
		}
		
		const amount = parseFloat(withdrawAmount.value);
		const maxAmount = parseFloat(availableBalance.value);
		
		if (amount < 10) {
			uni.showToast({
				title: '提现金额不能低于10元',
				icon: 'none'
			});
			return;
		}
		
		if (amount > 200) {
			uni.showToast({
				title: '提现金额不能超过200元',
				icon: 'none'
			});
			return;
		}
		
		if (amount > maxAmount) {
			uni.showToast({
				title: '提现金额不能超过可提现金额',
				icon: 'none'
			});
			return;
		}
		
		// 提交提现申请
		uni.showModal({
			title: '提现确认',
			content: `确定要提现 ${withdrawAmount.value} 元吗？手续费为 ${(amount * 0.07).toFixed(2)} 元，实际到账 ${(amount * 0.93).toFixed(2)} 元`,
			success: (res) => {
				if (res.confirm) {
					uni.showLoading({ title: '处理中...' });
					setTimeout(() => {
						uni.hideLoading();
						uni.showToast({
							title: '提现申请已提交',
							icon: 'success'
						});
						// 可以在这里添加跳转回账户页面的逻辑
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}, 1000);
				}
			}
		});
	};
</script>

<style>
	/* 页面容器 */
	.page-container {
		background-color: #f5f6f8;
		min-height: 100vh;
		flex-direction: column;
	}
	
	/* 标题栏 */
	.header {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #ffffff;
	}
	
	.header-left {
		width: 60rpx;
		height: 60rpx;
		align-items: center;
		justify-content: center;
	}
	
	.header-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.header-right {
		width: 60rpx;
	}
	
	/* 可提现金额 */
	.available-balance {
		background-color: #ffc107;
		padding: 40rpx 30rpx;
		align-items: center;
	}
	
	.balance-label {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 20rpx;
	}
	
	.balance-amount {
		font-size: 56rpx;
		font-weight: bold;
		color: #ffffff;
	}
	
	/* 提现金额输入 */
	.withdraw-section {
		background-color: #ffffff;
		margin-top: 20rpx;
		padding: 30rpx;
	}
	
	.input-container {
		flex-direction: row;
		align-items: center;
		border: 1rpx solid #e5e5e5;
		border-radius: 12rpx;
		padding: 20rpx;
	}
	
	.input-prefix {
		font-size: 32rpx;
		color: #333333;
		margin-right: 10rpx;
	}
	
	.withdraw-input {
		flex: 1;
		font-size: 32rpx;
		color: #333333;
	}
	
	.all-withdraw-btn {
		background-color: #f5f6f8;
		color: #666666;
		font-size: 26rpx;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		border: 1rpx solid #e5e5e5;
	}
	
	/* 提现说明 */
	.withdraw-info {
		background-color: #ffffff;
		margin-top: 20rpx;
		padding: 30rpx;
	}
	
	.info-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}
	
	.info-item {
		font-size: 26rpx;
		color: #666666;
		line-height: 1.5;
		margin-bottom: 10rpx;
	}
	
	/* 提现方式 */
	.withdraw-method {
		background-color: #ffffff;
		margin-top: 20rpx;
		padding: 30rpx;
	}
	
	.method-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}
	
	.method-item {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	
	.method-left {
		flex-direction: row;
		align-items: center;
	}
	
	.method-name {
		font-size: 28rpx;
		color: #333333;
		margin-left: 10rpx;
	}
	
	/* 提交按钮 */
	.submit-section {
		padding: 30rpx;
		margin-top: 40rpx;
	}
	
	.submit-btn {
		background-color: #ffc107;
		color: #333333;
		font-size: 32rpx;
		font-weight: bold;
		border-radius: 40rpx;
		height: 80rpx;
		width: 100%;
	}
</style>