rtliveDoctor/pages_user/withdraw.vue

<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="nav-left" @click="goBack">
				<text class="back-icon"><</text>
			</view>
			<view class="nav-title">提现</view>
			<view class="nav-right">
				<text class="more-icon">...</text>
				<text class="eye-icon">O</text>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<scroll-view class="content" scroll-y>
			<!-- 提现至 -->
			<view class="withdraw-to-section">
				<view class="section-label">提现至</view>
				<view class="bank-info" @click="goSelectBank">
					<text>{{ bankCardInfo.bankName || '请选择银行卡' }}</text>
					<text class="card-tail" v-if="bankCardInfo.cardNumber">({{ getCardTail(bankCardInfo.cardNumber) }})</text>
					<text class="arrow-right">></text>
				</view>
			</view>
			
			<!-- 提现金额 -->
			<view class="amount-section">
				<view class="section-label">提现金额</view>
				<view class="amount-input-wrapper">
					<text class="currency">¥</text>
					<input 
						class="amount-input" 
						v-model="withdrawAmount" 
						type="digit"
						placeholder="0.00"
						@input="onAmountInput"
					/>
				</view>
				<view class="amount-footer">
					<text class="available-amount">可提现金额: ¥ {{ availableAmount || '0.00' }}</text>
					<text class="withdraw-all" @click="withdrawAll">全部提现</text>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部按钮和提示 -->
		<view class="bottom-bar">
			<view class="submit-btn" @click="handleSubmit">确认提现</view>
			<view class="tips">提现申请发起后,预计在3个工作日到账</view>
		</view>
	</view>
</template>

<script>
import { submitWithdraw, getWithdrawInfo } from '@/api-js/withdraw'
import { getBankCardInfo } from '@/api-js/bankCard'
export default {
	data() {
		return {
			withdrawAmount: '320.00',
			availableAmount: '320.00',
			bankCardInfo: {}
		}
	},
	onLoad() {
		this.loadData()
	},
	methods: {
		async loadData() {
			try {
				uni.showLoading({ title: '加载中...' })
				const [bankRes, withdrawRes] = await Promise.all([
					getBankCardInfo(),
					getWithdrawInfo()
				])
				uni.hideLoading()
				
				if (bankRes.code === 200 && bankRes.data) {
					this.bankCardInfo = bankRes.data
				}
				
				if (withdrawRes.code === 200 && withdrawRes.data) {
					this.availableAmount = (withdrawRes.data.availableAmount || 0).toFixed(2)
					this.withdrawAmount = this.availableAmount
				} else {
					// 示例数据
					this.availableAmount = '320.00'
					this.withdrawAmount = '320.00'
				}
				
				if (!this.bankCardInfo.id) {
					// 示例数据
					this.bankCardInfo = {
						bankName: '中国工商银行',
						cardNumber: '8869'
					}
				}
			} catch (e) {
				uni.hideLoading()
				console.error('加载数据失败', e)
				this.availableAmount = '320.00'
				this.withdrawAmount = '320.00'
				this.bankCardInfo = {
					bankName: '中国工商银行',
					cardNumber: '8869'
				}
			}
		},
		getCardTail(cardNumber) {
			if (!cardNumber) return ''
			if (cardNumber.length < 4) return cardNumber
			return cardNumber.substring(cardNumber.length - 4)
		},
		onAmountInput(e) {
			let value = e.detail.value
			// 限制只能输入数字和小数点
			value = value.replace(/[^\d.]/g, '')
			// 限制小数点后两位
			if (value.indexOf('.') > -1) {
				const parts = value.split('.')
				if (parts[1] && parts[1].length > 2) {
					value = parts[0] + '.' + parts[1].substring(0, 2)
				}
			}
			// 限制不能超过可提现金额
			const amount = parseFloat(value) || 0
			const available = parseFloat(this.availableAmount) || 0
			if (amount > available) {
				value = this.availableAmount
			}
			this.withdrawAmount = value
		},
		withdrawAll() {
			this.withdrawAmount = this.availableAmount
		},
		goBack() {
			uni.navigateBack()
		},
		goSelectBank() {
			uni.navigateTo({
				url: '/pages_user/bankCard'
			})
		},
		async handleSubmit() {
			// 验证银行卡
			if (!this.bankCardInfo.id) {
				uni.showToast({
					icon: 'none',
					title: '请先添加银行卡'
				})
				setTimeout(() => {
					this.goSelectBank()
				}, 1500)
				return
			}
			
			// 验证金额
			const amount = parseFloat(this.withdrawAmount) || 0
			if (amount <= 0) {
				uni.showToast({
					icon: 'none',
					title: '请输入提现金额'
				})
				return
			}
			
			const available = parseFloat(this.availableAmount) || 0
			if (amount > available) {
				uni.showToast({
					icon: 'none',
					title: '提现金额不能超过可提现金额'
				})
				return
			}
			
			try {
				uni.showLoading({ title: '提交中...' })
				const res = await submitWithdraw({
					amount: this.withdrawAmount,
					bankCardId: this.bankCardInfo.id
				})
				uni.hideLoading()
				if (res.code === 200) {
					uni.navigateTo({
						url: '/pages_user/withdrawSuccess'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg || '提现失败'
					})
				}
			} catch (e) {
				uni.hideLoading()
				uni.showToast({
					icon: 'none',
					title: '提现失败'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
}

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 24rpx;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.nav-left {
		width: 60rpx;
		
		.back-icon {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
		}
	}
	
	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.nav-right {
		display: flex;
		align-items: center;
		gap: 24rpx;
		width: 60rpx;
		justify-content: flex-end;
		
		.more-icon {
			font-size: 32rpx;
			color: #333;
		}
		
		.eye-icon {
			font-size: 32rpx;
			color: #333;
		}
	}
}

.content {
	flex: 1;
	padding-bottom: 200rpx;
}

.withdraw-to-section {
	background: #fff;
	padding: 32rpx 24rpx;
	margin: 24rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	.section-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}
	
	.bank-info {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-left: 24rpx;
		font-size: 28rpx;
		color: #333;
		
		.card-tail {
			margin: 0 8rpx;
		}
		
		.arrow-right {
			font-size: 32rpx;
			color: #999;
			margin-left: 8rpx;
		}
	}
}

.amount-section {
	background: #fff;
	padding: 32rpx 24rpx;
	margin: 0 24rpx 24rpx;
	border-radius: 16rpx;
	
	.section-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 24rpx;
	}
	
	.amount-input-wrapper {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		
		.currency {
			font-size: 48rpx;
			font-weight: bold;
			color: #333;
			margin-right: 8rpx;
		}
		
		.amount-input {
			flex: 1;
			font-size: 56rpx;
			font-weight: bold;
			color: #333;
			height: 80rpx;
			line-height: 80rpx;
		}
	}
	
	.amount-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.available-amount {
			font-size: 24rpx;
			color: #999;
		}
		
		.withdraw-all {
			font-size: 28rpx;
			color: #388BFF;
		}
	}
}

.bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	padding: 24rpx;
	border-top: 1rpx solid #f0f0f0;
	z-index: 100;
	
	.submit-btn {
		width: 100%;
		height: 88rpx;
		background: #388BFF;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 16rpx;
	}
	
	.tips {
		text-align: center;
		font-size: 24rpx;
		color: #999;
		line-height: 1.5;
	}
}
</style>