HuiSuo-QhdAnErRan/h5/pages/user/recharge.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">最低充值10000元</text>
			</view>

			<!-- 上传截图 -->
			<view class="form-item">
				<text class="label">上传充值截图</text>
				<view class="upload-area" @click="chooseImage">
					<image v-if="imageUrl" :src="imageUrl" mode="aspectFit"></image>
					<span v-else>
						<text class="upload-text">点击上传截图</text>
						<text class="upload-tip">支持JPG、PNG格式</text>
					</span>
				</view>
			</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 {
		TransactionRecharge,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();
	}

	const chooseImage = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				const tempFilePath = res.tempFilePaths[0];
				 
				// 可以上传到服务器
				console.log('选择图片:', tempFilePath);
				uni.showLoading({
					title: ''
				})
				uni.uploadFile({
					url: UpFile(), // 替换为你的后端接口地址
					header: {
					    'Authorization': 'Bearer '+ sessionStorage.getItem('access_token')
					  },
					filePath: tempFilePath,
					name: 'file', // 后端接收字段名，通常叫 file、image、avatar 等
					success: (uploadRes) => {
						uni.hideLoading()
						console.log('上传成功:', uploadRes);
						const data = JSON.parse(uploadRes.data); // 注意：uploadRes.data 是字符串
						// 假设后端返回 { url: "https://xxx.jpg" }
				
						if (data.status === true && data.data) {
							imageUrl.value = GetBaseUrl() + data.data; // 使用服务器返回的真实 URL
							res_imageurl.value = data.data
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.error('上传失败:', err);
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						});
					}
				});
			},
			fail: () => {
				uni.showToast({
					title: '选择图片失败',
					icon: 'none'
				});
			}
		});
	}
 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) < 10000) {
			uni.showToast({
				title: '充值金额不能低于10000元',
				icon: 'none'
			});
			return;
		}

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

	 
		TransactionRecharge({
			amount:amount.value,
			img:res_imageurl.value
		}).then(res => {
			if (res.status) { 
				 uni.showToast({
				 	title: '提交完成',
				 	icon: 'success'
				 });
				 
				 // 示例：跳转或清空表单
				 setTimeout(() => {
				   uni.redirectTo({
				   	url:'/pages/user/user_center'
				   })
				 }, 1500);
			}
		})
		
	}
	
	 
	onLoad(()=>{
		 
		  
	})
</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>