building-materials-shop-uniapp-241014/pages_order/mine/purse.vue

<template>
	<view class="purse">
		<navbar title="立即提现" leftClick @leftClick="$utils.navigateBack" 
		bgColor="#DC2828"
		color="#fff"
        />

		<!-- 水洗店 -->
		<view class="userShop">
			<userShopCommission purse />
		</view>

		<view class="from-body">
			<view>我要提现</view>
			<view class="from-line">
				<input 
					placeholder="请输入提现金额" 
					v-model="withdrawAmount"
					type="digit"
					@input="onAmountInput"
				/>
			</view>
			<view class="tips" v-if="userInfo.price">
				可提现金额：¥{{userInfo.price}}
			</view>
			
			<!-- 快捷金额选择 -->
			<view class="quick-amounts" v-if="userInfo.price && parseFloat(userInfo.price) > 0">
				<view class="quick-label">快捷选择：</view>
				<view class="amount-buttons">
					<view 
						class="amount-btn" 
						v-for="amount in quickAmounts" 
						:key="amount"
						:class="{'disabled': amount > parseFloat(userInfo.price)}"
						@click="selectQuickAmount(amount)"
					>
						¥{{amount}}
					</view>
					<view 
						class="amount-btn all" 
						@click="selectAllAmount"
					>
						全部
					</view>
				</view>
			</view>
			<!-- <view class="from-line">
				<input placeholder="请输入姓名" />
			</view>
			<view class="from-line">
				<input placeholder="请输入开户行" />
			</view>
			<view class="from-line">
				<input placeholder="请输入银行卡卡号" />
			</view> -->
			<view class="mt56">提现说明</view>
			<view style="line-height: 45rpx; font-size: 24rpx;color: #666666;" v-html="notice">
			</view>
			<!-- <p>1、本次提现必须通过银行卡提现，暂不支持其他途径。</p>
				<p>2、如若遇到24小时提现未到账，请联系客服。</p> -->
		</view>


		<view class="b-fiexd">
			<view 
				class="button-submit" 
				:class="{'disabled': isSubmitting || !withdrawAmount}"
				@click="submitWithdraw"
			>
				{{isSubmitting ? '提交中...' : '提交'}}
			</view>
		</view>
		
		<!-- <quick-order-entry
		ref="quickOrderEntry"
		/> -->

	</view>
</template>

<script>
	import userShopCommission from '@/components/userShop/userShopCommission.vue'
	export default {
		components: {
			userShopCommission,
		},
		data() {
			return {
				notice: '',
				withdrawAmount: '', // 提现金额
				isSubmitting: false, // 是否正在提交
				quickAmounts: [10, 50, 100, 200, 500], // 快捷金额选项
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo || {};
			}
		},
        onLoad() {
            this.$store.commit('getUserInfo');
        },
		methods: {
			// 选择快捷金额
			selectQuickAmount(amount) {
				if (amount > parseFloat(this.userInfo.price)) return;
				this.withdrawAmount = amount.toString();
			},
			
			// 选择全部金额
			selectAllAmount() {
				if (this.userInfo.price) {
					this.withdrawAmount = parseFloat(this.userInfo.price).toString();
				}
			},
			
			// 金额输入处理
			onAmountInput(e) {
				let value = e.detail.value;
				// 只允许输入数字和小数点
				value = value.replace(/[^\d.]/g, '');
				// 只允许一个小数点
				const pointIndex = value.indexOf('.');
				if (pointIndex !== -1) {
					value = value.substring(0, pointIndex + 1) + value.substring(pointIndex + 1).replace(/\./g, '');
				}
				// 最多保留2位小数
				if (pointIndex !== -1 && value.length > pointIndex + 3) {
					value = value.substring(0, pointIndex + 3);
				}
				this.withdrawAmount = value;
			},
			
			// 验证提现金额
			validateAmount() {
				if (!this.withdrawAmount) {
					uni.showToast({
						title: '请输入提现金额',
						icon: 'none'
					});
					return false;
				}
				
				const amount = parseFloat(this.withdrawAmount);
				if (isNaN(amount) || amount <= 0) {
					uni.showToast({
						title: '请输入正确的提现金额',
						icon: 'none'
					});
					return false;
				}
				
				// 检查提现金额是否超过可用余额
				if (this.userInfo.price && amount > parseFloat(this.userInfo.price)) {
					uni.showToast({
						title: '提现金额不能超过可用余额',
						icon: 'none'
					});
					return false;
				}
				
				// 检查最小提现金额（假设最小提现1元）
				if (amount < 1) {
					uni.showToast({
						title: '最小提现金额为1元',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			},
			
			// 提交提现申请
			submitWithdraw() {
				if (this.isSubmitting) return;
				
				// 验证提现金额
				if (!this.validateAmount()) return;
				
				// 确认提现
				uni.showModal({
					title: '确认提现',
					content: `确定要提现 ¥${this.withdrawAmount} 元吗？`,
					success: (res) => {
						if (res.confirm) {
							this.doWithdraw();
						}
					}
				});
			},
			
			// 执行提现操作
			doWithdraw() {
				this.isSubmitting = true;
				
				const params = {
					money: parseFloat(this.withdrawAmount)
				};
				
				this.$api('openMoney', params, res => {
					this.isSubmitting = false;
					
					if (res.code === 200) {
						uni.showToast({
							title: '提现申请提交成功',
							icon: 'success',
							duration: 2000,
							success: () => {
								// 清空输入框
								this.withdrawAmount = '';
								// 刷新用户信息
								this.$store.commit('getUserInfo');
								// 延迟返回上一页或跳转到提现记录页面
								setTimeout(() => {
									uni.navigateBack();
								}, 2000);
							}
						});
					} else {
						uni.showModal({
							title: '提现失败',
							content: res.message || '提现申请提交失败，请重试',
							showCancel: false
						});
					}
				}, err => {
					this.isSubmitting = false;
					console.error('提现请求失败', err);
					uni.showModal({
						title: '网络错误',
						content: '网络连接失败，请检查网络后重试',
						showCancel: false
					});
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.purse{
		min-height: 100vh;
		background-color: #ffffff;
		.from-body {
			padding: 40rpx 20rpx;
		
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
			line-height: 40px;
			padding-bottom: 160rpx;
		
			.from-line {
				margin-top: 40rpx;
			}
		
			input {
				width: 612rpx;
				height: 90rpx;
				line-height: 90rpx;
				background: #F5F5F5;
				border-radius: 46rpx;
		
				padding: 0 50rpx;
		
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #333;
			}
			
			.tips {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #999;
				font-weight: 400;
			}
			
			.quick-amounts {
				margin-top: 30rpx;
				
				.quick-label {
					font-size: 26rpx;
					color: #666;
					margin-bottom: 20rpx;
					font-weight: 400;
				}
				
				.amount-buttons {
					display: flex;
					flex-wrap: wrap;
					gap: 20rpx;
					
					.amount-btn {
						padding: 16rpx 32rpx;
						background: #f5f5f5;
						border-radius: 30rpx;
						font-size: 26rpx;
						color: #333;
						text-align: center;
						border: 1rpx solid transparent;
						transition: all 0.3s;
						
						&:active {
							transform: scale(0.95);
						}
						
						&.disabled {
							opacity: 0.5;
							color: #999;
						}
						
						&.all {
							background: $uni-color;
							color: #fff;
						}
					}
				}
			}
		}
		
		.button-submit {
			width: 596rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: $uni-color;
			border-radius: 46rpx;
		
			margin: 20rpx auto;
		
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: center;
			color: #ffffff;
			transition: opacity 0.3s;
			
			&.disabled {
				opacity: 0.6;
				background: #ccc;
			}
		}
	}
	
</style>