HuiSuo-QhdAnErRan/h5/pages/user/loan.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" />	
			</view>
			<view class="jiekuanshuoming">
				<view class="jksm_row"  >
					<view>借款利率</view>
					<view style="color: #6077C0;font-weight: 500;">{{rate}}%</view>
				</view>
				<view class="jksm_row" >
					<view>每日利息</view>
					<view style="color: #6077C0;font-weight: 500;">￥{{day_lixi}}</view>
				</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,watch
	} from "vue"
	import {
		LoanLoan,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
	let day_lixi=ref(0); //每日利息

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

	watch(amount, (newVal, oldVal) => {
	  day_lixi.value = parseFloat((newVal * (rate.value / 100)) / 365).toFixed(2);
	});
	 
 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 (!code.value) {
		// 	uni.showToast({
		// 		title: '请输入验证码',
		// 		icon: 'none'
		// 	});
		// 	return;
		// }

	 
	LoanLoan({
		amount:amount.value
	}).then(res => {
		if (res.status) { 
			 uni.showToast({
			 	title: '提交完成',
			 	icon: 'success'
			 });
			 
			 // 示例：跳转或清空表单
			 setTimeout(() => {
			   uni.redirectTo({
			   	url:'/pages/user/user_center'
			   })
			 }, 1500);
		}
	})
		
	}
	
	let rate=ref(0)//借款利率
	onLoad((e)=>{
		rate.value=e.rate
		// 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;
	}
	.jiekuanshuoming{
		padding: 20rpx 20rpx 10rpx 20rpx;
		background-color: #EBF4FA;
		border-radius: 16rpx;
		margin-top: -30rpx;
		margin-bottom: 30rpx;
	}
	.jksm_row{
		display: flex;
		justify-content: space-between;
		margin-bottom: 12rpx;
		font-size: 28rpx;
		color: #5e5e5e;
	}
</style>