mechanicStore-app/pages/account/transfer.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="transfer-to">
			<text class="transfer-label">转出至:</text>
			<text class="transfer-target">我的收益</text>
		</view>
		
		<!-- 可转出金额 -->
		<view class="transfer-info">
			<view class="amount-section">
				<text class="amount-label">可转出金额</text>
				<text class="amount-value">¥{{ availableAmount }}</text>
			</view>
			<view class="fee-section">
				<view class="fee-item">
					<text class="fee-label">实际转出金额</text>
					<text class="fee-value">¥{{ actualAmount }}</text>
				</view>
				<view class="fee-item">
					<text class="fee-label">服务费(10%)</text>
					<text class="fee-value">¥{{ serviceFee }}</text>
				</view>
			</view>
		</view>
		
		<!-- 确认转出按钮 -->
		<view class="submit-section">
			<button class="submit-btn" @click="confirmTransfer">确认转出</button>
		</view>
	</view>
</template>

<script setup lang="uts">
	import { ref, computed } from 'vue';
	
	// 数据定义
	const availableAmount = ref('49.2');
	
	// 计算属性
	const serviceFee = computed(() => {
		const amount = parseFloat(availableAmount.value);
		return (amount * 0.1).toFixed(2);
	});
	
	const actualAmount = computed(() => {
		const amount = parseFloat(availableAmount.value);
		return (amount * 0.9).toFixed(2);
	});
	
	// 方法定义
	const goBack = () => {
		uni.navigateBack();
	};
	
	const confirmTransfer = () => {
		uni.showModal({
			title: '转出确认',
			content: `确定要转出 ${availableAmount.value} 元到我的收益吗？服务费为 ${serviceFee.value} 元，实际转出 ${actualAmount.value} 元`,
			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;
	}
	
	/* 转出至 */
	.transfer-to {
		background-color: #ffffff;
		margin-top: 20rpx;
		padding: 30rpx;
		flex-direction: row;
		align-items: center;
	}
	
	.transfer-label {
		font-size: 28rpx;
		color: #666666;
	}
	
	.transfer-target {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		margin-left: 10rpx;
	}
	
	/* 可转出金额 */
	.transfer-info {
		background-color: #ffffff;
		margin-top: 20rpx;
		padding: 30rpx;
	}
	
	.amount-section {
		margin-bottom: 30rpx;
	}
	
	.amount-label {
		font-size: 28rpx;
		color: #666666;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.amount-value {
		font-size: 48rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.fee-section {
		border-top: 1rpx solid #f0f0f0;
		padding-top: 20rpx;
	}
	
	.fee-item {
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}
	
	.fee-label {
		font-size: 26rpx;
		color: #666666;
	}
	
	.fee-value {
		font-size: 26rpx;
		color: #333333;
	}
	
	/* 确认转出按钮 */
	.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>