kxmall-ui/kxmall-rider-ui/pages/wallet/withdraw.vue

<template>
	<view class="withdraw-container">
		<!-- 顶部卡片 -->
		<view class="card balance-card">
			<view class="card-header">
				<text class="title">账户余额</text>
			</view>
			<view class="balance-display">
				<text class="amount">¥{{walletBalance}}</text>
			</view>
		</view>

		<!-- 提现表单 -->
		<view class="card withdraw-form">
			<view class="card-header">
				<text class="title">提现金额</text>
			</view>
			<view class="form-group">
				<text class="prefix">¥</text>
				<input class="input" type="digit" v-model="withdrawAmount" placeholder="请输入提现金额" placeholder-class="placeholder"
					@input="validateAmount" />
			</view>
			<view class="hint">
				<text>可提现余额 ¥{{walletBalance}}</text>
				<text class="all" @click="withdrawAll">全部提现</text>
			</view>

			<!-- 银行信息 -->
			<view class="bank-info" v-if="bankInfo">
				<view class="bank-item">
					<text class="label">银行名称</text>
					<text class="value">{{bankInfo.bankName}}</text>
				</view>
				<view class="bank-item">
					<text class="label">开户人</text>
					<text class="value">{{bankInfo.accountHolder}}</text>
				</view>
				<view class="bank-item">
					<text class="label">银行卡号</text>
					<text class="value">{{bankInfo.bankAccount}}</text>
				</view>
			</view>

			<button class="submit-btn" :class="{disabled: !canSubmit}" :disabled="!canSubmit" @click="submitWithdraw">
				申请提现
			</button>

			<view class="tips">
				<text>提现申请将在1-3个工作日内处理</text>
			</view>
		</view>

		<!-- 提现记录 -->
		<view class="card record-list">
			<view class="card-header">
				<text class="title">提现记录</text>
			</view>
			<view class="list">
				<view class="record-item" v-for="item in records" :key="item.id" @click="viewDetail(item)">
					<view class="left">
						<view class="status" :class="statusClassMap[item.status]">
							{{getStatusText(item.status)}}
						</view>
						<view class="time">{{item.createTime}}</view>
					</view>
					<view class="right">
						<text class="amount">-¥{{item.amount}}</text>
						<image class="arrow" src=""></image>
					</view>
				</view>

				<view class="load-more" @click="loadMore" v-if="hasMore">
					<text>{{loading ? '加载中...' : '加载更多'}}</text>
				</view>

				<view class="empty" v-if="!loading && records.length === 0">
					<image class="empty-icon" src=""></image>
					<text class="empty-text">暂无提现记录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		data() {
			return {
				walletBalance: 0,
				withdrawAmount: '',
				bankInfo: null,
				records: [],
				page: 1,
				pageSize: 10,
				total: 0,
				loading: false,
				hasMore: true
			};
		},
		computed: {
			...mapState(['token', 'userInfo']),
			canSubmit() {
				return this.withdrawAmount > 0 &&
					this.withdrawAmount <= this.walletBalance &&
					this.bankInfo;
			},
			statusClassMap() {
				return {
					0: 'pending',
					1: 'approved',
					2: 'rejected',
					3: 'paid'
				};
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			loadData() {
				this.getWalletInfo();
				this.getBankInfo();
				this.getWithdrawRecords();
			},

			getWalletInfo() {
				uni.showLoading({
					title: '加载中...'
				});
				this.request("get", "rider/wallet/info", this.token).then(res => {
					if (res.code === 200) {
						this.walletBalance = res.data.walletBalance || 0;
					}
				}).finally(() => {
					uni.hideLoading();
				});
			},

			getBankInfo() {
				this.request("get", "rider/app/profile", this.token).then(res => {
					if (res.code === 200) {
						this.bankInfo = res.data;
					}
				});
			},

			getWithdrawRecords(refresh = false) {
				if (this.loading) return;
				this.loading = true;

				if (refresh) {
					this.page = 1;
				}

				this.request("get", "rider/withdrawal/list", this.token, {
					page: this.page,
					size: this.pageSize
				}).then(res => {
					if (res.code === 200) {
						const newData = res.data.rows || [];
						this.records = refresh ? newData : [...this.records, ...newData];
						this.total = res.data.total || 0;
						this.hasMore = this.records.length < this.total;
					}
				}).finally(() => {
					this.loading = false;
				});
			},

			validateAmount() {
				// 限制只能输入数字和小数点
				this.withdrawAmount = this.withdrawAmount.replace(/[^\d.]/g, '');

				// 限制小数点后最多两位
				if (this.withdrawAmount.includes('.')) {
					const parts = this.withdrawAmount.split('.');
					if (parts[1].length > 2) {
						this.withdrawAmount = parts[0] + '.' + parts[1].substring(0, 2);
					}
				}

				// 限制最大金额
				if (parseFloat(this.withdrawAmount) > this.walletBalance) {
					this.withdrawAmount = this.walletBalance.toString();
				}
			},

			withdrawAll() {
				this.withdrawAmount = this.walletBalance.toString();
			},

			submitWithdraw() {
				if (!this.canSubmit) return;

				const amount = parseFloat(this.withdrawAmount);
				if (amount <= 0 || amount > this.walletBalance) {
					uni.showToast({
						title: '请输入正确的提现金额',
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '提交中...'
				});
				this.request("post", "rider/withdrawal/apply", this.token, {
					amount: amount
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '提现申请已提交',
							icon: 'success'
						});
						this.withdrawAmount = '';
						this.loadData(); // 刷新数据
					} else {
						uni.showToast({
							title: res.msg || '提现失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				}).finally(() => {
					uni.hideLoading();
				});
			},

			loadMore() {
				if (this.hasMore && !this.loading) {
					this.page++;
					this.getWithdrawRecords();
				}
			},

			viewDetail(item) {
				uni.navigateTo({
					url: `/pages/wallet/withdraw-detail?id=${item.id}`
				});
			},



			getStatusText(status) {
				const statusMap = {
					0: '审核中',
					1: '审核通过',
					2: '审核拒绝',
					3: '已打款'
				};
				return statusMap[status] || '未知状态';
			}
		}
	};
</script>

<style lang="scss" scoped>
	.withdraw-container {
		padding: 20rpx;
		min-height: 100vh;
		background-color: #f7f7f7;
		padding-bottom: 40rpx;
	}

	.card {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.card-header {
			padding: 24rpx 30rpx;
			border-bottom: 1rpx solid #f0f0f0;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
		}
	}

	.balance-card {
		.balance-display {
			padding: 40rpx 30rpx;
			text-align: center;

			.amount {
				font-size: 48rpx;
				font-weight: bold;
				color: #ff6b35;
			}
		}
	}

	.withdraw-form {
		padding-bottom: 30rpx;

		.form-group {
			display: flex;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;

			.prefix {
				font-size: 48rpx;
				font-weight: bold;
				color: #333;
				margin-right: 20rpx;
			}

			.input {
				flex: 1;
				font-size: 48rpx;
				height: 60rpx;
				line-height: 60rpx;
			}

			.placeholder {
				color: #ccc;
				font-size: 36rpx;
			}
		}

		.hint {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			font-size: 26rpx;
			color: #999;

			.all {
				color: #437CE8;
			}
		}

		.bank-info {
			padding: 0 30rpx;

			.bank-item {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #f0f0f0;

				&:last-child {
					border-bottom: none;
				}

				.label {
					font-size: 28rpx;
					color: #666;
				}

				.value {
					font-size: 28rpx;
					color: #333;
				}
			}
		}

		.submit-btn {
			margin: 40rpx 30rpx 20rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			background-color: #437CE8;
			color: #fff;
			font-size: 32rpx;

			&.disabled {
				opacity: 0.6;
			}
		}

		.tips {
			text-align: center;
			font-size: 24rpx;
			color: #999;
			padding: 0 30rpx;
		}
	}

	.record-list {
		.list {
			.record-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 25rpx 30rpx;
				border-bottom: 1rpx solid #f0f0f0;

				&:last-child {
					border-bottom: none;
				}

				.left {
					.status {
						font-size: 30rpx;
						margin-bottom: 8rpx;

						&.pending {
							color: #FF9800;
						}

						&.approved {
							color: #4CAF50;
						}

						&.rejected {
							color: #F44336;
						}

						&.paid {
							color: #2196F3;
						}
					}

					.time {
						font-size: 24rpx;
						color: #999;
					}
				}

				.right {
					display: flex;
					align-items: center;

					.amount {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}

					.arrow {
						width: 24rpx;
						height: 24rpx;
						margin-left: 20rpx;
					}
				}
			}

			.load-more {
				text-align: center;
				padding: 25rpx 0;
				color: #437CE8;
				font-size: 28rpx;
			}

			.empty {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 60rpx 0;

				.empty-icon {
					width: 200rpx;
					height: 200rpx;
					margin-bottom: 30rpx;
					opacity: 0.5;
				}

				.empty-text {
					font-size: 28rpx;
					color: #999;
				}
			}
		}
	}
</style>