HuiSuo-QhdAnErRan/h5/pages/user/withdraw.vue

<template>
	<view class="recharge-container">
		<view class="recharge-box">
			<!-- 页面标题 -->
			<view class="title-box">
				<text class="title">提现</text>
				<uni-icons type="arrow-left" size="26" color="#666" @click="goBack"></uni-icons>

			</view>

			<!-- 提现金额 -->
			<view class="form-item">
				<text class="label">提现金额</text>
				<input v-model="amount" type="number" placeholder="请输入提现金额" class="input-box" :maxlength="10" />
				<text class="tip">当前可提现余额{{enable_balance}}元</text>
			</view>

			<!-- 验证码 -->
		<!-- 	<view class="form-item">
				<text class="label">验证码</text>
				<view class="code-box">
					<input v-model="code" type="text" placeholder="请输入验证码" class="code-input" maxlength="6" />
					 
					<image @click="getVerifyCode()" class="yanzhengma_img_k" :src="yanzhengma_image" mode="aspectFit"></image>
					 
					 
				</view>
			</view> -->

			<!-- 确认提现按钮 -->
			<button class="submit-btn" @click="confirmRecharge">
				确认提现
			</button>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		TransactionWithdraw,UpFile,GetBaseUrl,ImageVerificationGetCode,ImageVerificationCheckCode
	} from "@/api"
	import {
		onLoad
	} from "@dcloudio/uni-app"

	let amount = ref('')
	let code = ref('')
	let code_id=ref('')
	let verifyCode = ref('14JQ')
	let imageUrl = ref('')
    let res_imageurl=ref('')//上传图片后，服务器返回的url

	const goBack = () => {
		uni.navigateBack();
	}

	 
 let yanzhengma_image=ref('')
	const getVerifyCode = () => {
		code.value=''
		   ImageVerificationGetCode().then(res => {
		   	if (res.status) {
		   		yanzhengma_image.value=res.data.image
				code_id.value=res.data.code_id
		   	}
		   })
	}

	const confirmRecharge = () => {
		if (!amount.value || parseFloat(amount.value) < 0) {
			uni.showToast({
				title: '提现金额不能为0',
				icon: 'none'
			});
			return;
		}
		if ( parseFloat(amount.value) > parseFloat(enable_balance.value)) {
			uni.showToast({
				title: '提现金额不能大于'+enable_balance.value,
				icon: 'none'
			});
			return;
		}

		// if (!code.value) {
		// 	uni.showToast({
		// 		title: '请输入验证码',
		// 		icon: 'none'
		// 	});
		// 	return;
		// }

	 
		TransactionWithdraw({
			amount:amount.value
		}).then(res => {
			if (res.status) { 
				 uni.showToast({
				 	title: '提交完成',
				 	icon: 'success'
				 });
				 
				 // 示例：跳转或清空表单
				 setTimeout(() => {
				   uni.redirectTo({
				   	url:'/pages/user/user_center'
				   })
				 }, 1500);
			}
		})
		
		
	}
	
	let enable_balance=ref(0)
	onLoad((e)=>{
		enable_balance.value=e.mp
		// getVerifyCode()
		  
	})
</script>

<style scoped>
	.recharge-container {
		background-color: #f0f6ff;
		padding: 30rpx;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.recharge-box {
		background-color: #fff;
		padding: 40rpx;
		border-radius: 20rpx;

		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.title-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.title {
		font-size: 36rpx;
		color: #1a56db;
		font-weight: bold;
	}

	.back-icon {
		width: 24rpx;
		height: 24rpx;
		transform: rotate(180deg);
	}

	.form-item {
		margin-bottom: 60rpx;
	}

	.label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.input-box {
		width: 100%;
		height: 80rpx;
		border: 1px solid #ccc;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.tip {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
		display: block;
	}

	.upload-area {
		width: 100%;
		height: 200rpx;
		border: 2rpx dashed #ddd;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f8f9fa;
		cursor: pointer;
	}

	.upload-icon {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 10rpx;
	}

	.upload-text {
		font-size: 28rpx;
		color: #666;
		text-align: center;
	}

	.upload-tip {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.code-box {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.code-input {
		flex: 1;
		height: 80rpx;
		border: 1px solid #ccc;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.code-btn {
		width: 140rpx;
		height: 80rpx;
		background-color: #eee;
		color: #1a56db;
		font-size: 28rpx;
		border: none;
		border-radius: 10rpx;
		line-height: 80rpx;
		margin: 0;
	}

	.submit-btn {
		width: 100%;
		height: 80rpx;
		background-color: #1a56db;
		color: white;
		font-size: 30rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		line-height: 80rpx;
	}
	.yanzhengma_img_k{
		width: 160rpx;
		height: 70rpx;
	}
</style>