添加申请页面
This commit is contained in:
@@ -129,16 +129,21 @@ function goToDetail() {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
/* 添加右边距避免与删除按钮重叠 */
|
||||||
|
padding-right: 80rpx; /* 根据删除按钮大小调整 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #333;
|
color: #333;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
display: -webkit-box;
|
/* 移除固定行数限制，让内容自然换行 */
|
||||||
-webkit-box-orient: vertical;
|
display: block;
|
||||||
-webkit-line-clamp: 2;
|
overflow: visible;
|
||||||
overflow: hidden;
|
white-space: normal;
|
||||||
|
word-wrap: break-word;
|
||||||
|
/* 调整最小高度确保有足够空间 */
|
||||||
|
min-height: 80rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.specs {
|
.specs {
|
||||||
|
|||||||
942
src/pages/me/loan-application.vue
Normal file
942
src/pages/me/loan-application.vue
Normal file
@@ -0,0 +1,942 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
definePage({
|
||||||
|
style: {
|
||||||
|
navigationBarTitleText: '贷款申请',
|
||||||
|
navigationBarBackgroundColor: '#fff',
|
||||||
|
navigationBarTextStyle: 'black',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// 表单数据
|
||||||
|
const formData = ref({
|
||||||
|
// 个人信息
|
||||||
|
personalInfo: {
|
||||||
|
name: '',
|
||||||
|
phone: '',
|
||||||
|
idCard: '',
|
||||||
|
region: ['', '', ''], // 省、市、区
|
||||||
|
detailAddress: '',
|
||||||
|
},
|
||||||
|
// 经营信息
|
||||||
|
businessInfo: {
|
||||||
|
businessProject: '',
|
||||||
|
businessTime: '',
|
||||||
|
annualIncome: '',
|
||||||
|
hasDebt: 'no', // 'no' 或 'yes'
|
||||||
|
debtAmount: '',
|
||||||
|
loanDemand: '',
|
||||||
|
assets: [] as string[], // 家庭主要资产
|
||||||
|
},
|
||||||
|
// 证件信息
|
||||||
|
documentInfo: {
|
||||||
|
businessLicense: '', // 营业执照或租赁合同
|
||||||
|
otherMaterials: [] as string[], // 其他辅助材料
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// 表单验证错误
|
||||||
|
const formErrors = ref({
|
||||||
|
personalInfo: {
|
||||||
|
name: '',
|
||||||
|
phone: '',
|
||||||
|
idCard: '',
|
||||||
|
region: '',
|
||||||
|
detailAddress: '',
|
||||||
|
},
|
||||||
|
businessInfo: {
|
||||||
|
businessProject: '',
|
||||||
|
businessTime: '',
|
||||||
|
annualIncome: '',
|
||||||
|
debtAmount: '',
|
||||||
|
loanDemand: '',
|
||||||
|
assets: '',
|
||||||
|
},
|
||||||
|
documentInfo: {
|
||||||
|
businessLicense: '',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// 省市区选项（模拟数据）
|
||||||
|
const regionOptions = ref([
|
||||||
|
{
|
||||||
|
value: '110000',
|
||||||
|
label: '北京市',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: '110100',
|
||||||
|
label: '北京市',
|
||||||
|
children: [
|
||||||
|
{ value: '110101', label: '东城区' },
|
||||||
|
{ value: '110102', label: '西城区' },
|
||||||
|
{ value: '110105', label: '朝阳区' },
|
||||||
|
{ value: '110106', label: '丰台区' },
|
||||||
|
{ value: '110107', label: '石景山区' },
|
||||||
|
{ value: '110108', label: '海淀区' },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '310000',
|
||||||
|
label: '上海市',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: '310100',
|
||||||
|
label: '上海市',
|
||||||
|
children: [
|
||||||
|
{ value: '310101', label: '黄浦区' },
|
||||||
|
{ value: '310104', label: '徐汇区' },
|
||||||
|
{ value: '310105', label: '长宁区' },
|
||||||
|
{ value: '310106', label: '静安区' },
|
||||||
|
{ value: '310107', label: '普陀区' },
|
||||||
|
{ value: '310109', label: '虹口区' },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '440000',
|
||||||
|
label: '广东省',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
value: '440100',
|
||||||
|
label: '广州市',
|
||||||
|
children: [
|
||||||
|
{ value: '440103', label: '荔湾区' },
|
||||||
|
{ value: '440104', label: '越秀区' },
|
||||||
|
{ value: '440105', label: '海珠区' },
|
||||||
|
{ value: '440106', label: '天河区' },
|
||||||
|
{ value: '440111', label: '白云区' },
|
||||||
|
{ value: '440112', label: '黄埔区' },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '440300',
|
||||||
|
label: '深圳市',
|
||||||
|
children: [
|
||||||
|
{ value: '440303', label: '罗湖区' },
|
||||||
|
{ value: '440304', label: '福田区' },
|
||||||
|
{ value: '440305', label: '南山区' },
|
||||||
|
{ value: '440306', label: '宝安区' },
|
||||||
|
{ value: '440307', label: '龙岗区' },
|
||||||
|
{ value: '440308', label: '龙华区' },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
// 家庭主要资产选项
|
||||||
|
const assetOptions = [
|
||||||
|
{ value: 'house', label: '商品房' },
|
||||||
|
{ value: 'selfBuiltState', label: '自建房 (国有)' },
|
||||||
|
{ value: 'selfBuiltCollective', label: '自建房 (集体)' },
|
||||||
|
{ value: 'shop', label: '商铺' },
|
||||||
|
{ value: 'land', label: '土地' },
|
||||||
|
{ value: 'car', label: '车辆' },
|
||||||
|
{ value: 'other', label: '其他' },
|
||||||
|
{ value: 'none', label: '无' },
|
||||||
|
]
|
||||||
|
|
||||||
|
// 选择省市区
|
||||||
|
function handleRegionPicker() {
|
||||||
|
// 简化的省市区选择器，使用 uni.showActionSheet
|
||||||
|
const provinces = regionOptions.value.map(item => item.label)
|
||||||
|
|
||||||
|
uni.showActionSheet({
|
||||||
|
itemList: provinces,
|
||||||
|
success: (res) => {
|
||||||
|
if (res.tapIndex !== undefined) {
|
||||||
|
const selectedProvince = regionOptions.value[res.tapIndex]
|
||||||
|
formData.value.personalInfo.region[0] = selectedProvince.value
|
||||||
|
|
||||||
|
// 选择市
|
||||||
|
const cities = selectedProvince.children.map((item: any) => item.label)
|
||||||
|
uni.showActionSheet({
|
||||||
|
itemList: cities,
|
||||||
|
success: (cityRes) => {
|
||||||
|
if (cityRes.tapIndex !== undefined) {
|
||||||
|
const selectedCity = selectedProvince.children[cityRes.tapIndex]
|
||||||
|
formData.value.personalInfo.region[1] = selectedCity.value
|
||||||
|
|
||||||
|
// 选择区
|
||||||
|
const districts = selectedCity.children.map((item: any) => item.label)
|
||||||
|
uni.showActionSheet({
|
||||||
|
itemList: districts,
|
||||||
|
success: (districtRes) => {
|
||||||
|
if (districtRes.tapIndex !== undefined) {
|
||||||
|
const selectedDistrict = selectedCity.children[districtRes.tapIndex]
|
||||||
|
formData.value.personalInfo.region[2] = selectedDistrict.value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理资产选择
|
||||||
|
function handleAssetChange(value: string) {
|
||||||
|
const { assets } = formData.value.businessInfo
|
||||||
|
|
||||||
|
// 如果选择"无"，则取消其他所有选项
|
||||||
|
if (value === 'none') {
|
||||||
|
formData.value.businessInfo.assets = ['none']
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果选择了其他选项，则取消"无"选项
|
||||||
|
if (assets.includes('none')) {
|
||||||
|
const index = assets.indexOf('none')
|
||||||
|
assets.splice(index, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 切换选项
|
||||||
|
const index = assets.indexOf(value)
|
||||||
|
if (index > -1) {
|
||||||
|
assets.splice(index, 1)
|
||||||
|
} else {
|
||||||
|
assets.push(value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上传营业执照
|
||||||
|
function handleUploadBusinessLicense() {
|
||||||
|
uni.chooseImage({
|
||||||
|
count: 1,
|
||||||
|
sizeType: ['compressed'],
|
||||||
|
sourceType: ['album', 'camera'],
|
||||||
|
success: (res) => {
|
||||||
|
formData.value.documentInfo.businessLicense = res.tempFilePaths[0]
|
||||||
|
formErrors.value.documentInfo.businessLicense = ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上传其他材料
|
||||||
|
function handleUploadOtherMaterials() {
|
||||||
|
const currentCount = formData.value.documentInfo.otherMaterials.length
|
||||||
|
const maxCount = 5
|
||||||
|
|
||||||
|
if (currentCount >= maxCount) {
|
||||||
|
uni.showToast({
|
||||||
|
title: `最多上传${maxCount}张图片`,
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
uni.chooseImage({
|
||||||
|
count: maxCount - currentCount,
|
||||||
|
sizeType: ['compressed'],
|
||||||
|
sourceType: ['album', 'camera'],
|
||||||
|
success: (res) => {
|
||||||
|
if (Array.isArray(res.tempFilePaths)) {
|
||||||
|
formData.value.documentInfo.otherMaterials.push(...res.tempFilePaths)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除其他材料
|
||||||
|
function handleRemoveOtherMaterial(index: number) {
|
||||||
|
formData.value.documentInfo.otherMaterials.splice(index, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 预览图片
|
||||||
|
function handlePreviewImage(url: string) {
|
||||||
|
uni.previewImage({
|
||||||
|
urls: [url]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表单验证
|
||||||
|
function validateForm() {
|
||||||
|
let isValid = true
|
||||||
|
const errors = formErrors.value
|
||||||
|
|
||||||
|
// 重置错误信息
|
||||||
|
Object.keys(errors.personalInfo).forEach(key => {
|
||||||
|
errors.personalInfo[key as keyof typeof errors.personalInfo] = ''
|
||||||
|
})
|
||||||
|
Object.keys(errors.businessInfo).forEach(key => {
|
||||||
|
errors.businessInfo[key as keyof typeof errors.businessInfo] = ''
|
||||||
|
})
|
||||||
|
errors.documentInfo.businessLicense = ''
|
||||||
|
|
||||||
|
// 验证个人信息
|
||||||
|
if (!formData.value.personalInfo.name.trim()) {
|
||||||
|
errors.personalInfo.name = '请输入姓名'
|
||||||
|
isValid = false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.value.personalInfo.phone.trim()) {
|
||||||
|
errors.personalInfo.phone = '请输入联系方式'
|
||||||
|
isValid = false
|
||||||
|
} else if (!/^1[3-9]\d{9}$/.test(formData.value.personalInfo.phone)) {
|
||||||
|
errors.personalInfo.phone = '请输入正确的手机号'
|
||||||
|
isValid = false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.value.personalInfo.idCard.trim()) {
|
||||||
|
errors.personalInfo.idCard = '请输入身份证号码'
|
||||||
|
isValid = false
|
||||||
|
} else if (!/^\d{17}[\dXx]$/.test(formData.value.personalInfo.idCard)) {
|
||||||
|
errors.personalInfo.idCard = '请输入正确的身份证号码'
|
||||||
|
isValid = false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (formData.value.personalInfo.region.some(item => !item)) {
|
||||||
|
errors.personalInfo.region = '请选择省市区'
|
||||||
|
isValid = false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.value.personalInfo.detailAddress.trim()) {
|
||||||
|
errors.personalInfo.detailAddress = '请输入详细地址'
|
||||||
|
isValid = false
|
||||||
|
} else if (formData.value.personalInfo.detailAddress.trim().length < 5 || formData.value.personalInfo.detailAddress.trim().length > 100) {
|
||||||
|
errors.personalInfo.detailAddress = '详细地址长度应在5-100字之间'
|
||||||
|
isValid = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证经营信息
|
||||||
|
if (!formData.value.businessInfo.businessProject.trim()) {
|
||||||
|
errors.businessInfo.businessProject = '请输入经营项目'
|
||||||
|
isValid = false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.value.businessInfo.businessTime.trim()) {
|
||||||
|
errors.businessInfo.businessTime = '请输入经营时间'
|
||||||
|
isValid = false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.value.businessInfo.annualIncome.trim()) {
|
||||||
|
errors.businessInfo.annualIncome = '请输入最近1年经营收入'
|
||||||
|
isValid = false
|
||||||
|
} else if (isNaN(Number(formData.value.businessInfo.annualIncome)) || Number(formData.value.businessInfo.annualIncome) <= 0) {
|
||||||
|
errors.businessInfo.annualIncome = '请输入正确的金额'
|
||||||
|
isValid = false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (formData.value.businessInfo.hasDebt === 'yes' && !formData.value.businessInfo.debtAmount.trim()) {
|
||||||
|
errors.businessInfo.debtAmount = '请输入负债金额'
|
||||||
|
isValid = false
|
||||||
|
} else if (formData.value.businessInfo.hasDebt === 'yes' && (isNaN(Number(formData.value.businessInfo.debtAmount)) || Number(formData.value.businessInfo.debtAmount) <= 0)) {
|
||||||
|
errors.businessInfo.debtAmount = '请输入正确的金额'
|
||||||
|
isValid = false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!formData.value.businessInfo.loanDemand.trim()) {
|
||||||
|
errors.businessInfo.loanDemand = '请输入贷款需求'
|
||||||
|
isValid = false
|
||||||
|
} else if (isNaN(Number(formData.value.businessInfo.loanDemand)) || Number(formData.value.businessInfo.loanDemand) <= 0) {
|
||||||
|
errors.businessInfo.loanDemand = '请输入正确的金额'
|
||||||
|
isValid = false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (formData.value.businessInfo.assets.length === 0) {
|
||||||
|
errors.businessInfo.assets = '请至少选择一项家庭主要资产'
|
||||||
|
isValid = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证证件信息
|
||||||
|
if (!formData.value.documentInfo.businessLicense) {
|
||||||
|
errors.documentInfo.businessLicense = '请上传营业执照或租赁合同'
|
||||||
|
isValid = false
|
||||||
|
}
|
||||||
|
|
||||||
|
return isValid
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交表单
|
||||||
|
function handleSubmit() {
|
||||||
|
// 取消表单校验，直接提交
|
||||||
|
|
||||||
|
uni.showLoading({
|
||||||
|
title: '提交中...'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 模拟提交
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.hideLoading()
|
||||||
|
uni.showToast({
|
||||||
|
title: '提交成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
|
||||||
|
// 延迟返回
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateBack()
|
||||||
|
}, 1500)
|
||||||
|
}, 2000)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 返回上一页
|
||||||
|
function handleBack() {
|
||||||
|
uni.navigateBack()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="loan-application-page">
|
||||||
|
<!-- 个人信息模块 -->
|
||||||
|
<view class="form-card">
|
||||||
|
<view class="card-title">
|
||||||
|
<view class="title-bar"></view>
|
||||||
|
<text class="title-text">个人信息</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-content">
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">姓名</view>
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
v-model="formData.personalInfo.name"
|
||||||
|
placeholder="请输入姓名"
|
||||||
|
:maxlength="20"
|
||||||
|
/>
|
||||||
|
<text v-if="formErrors.personalInfo.name" class="error-text">{{ formErrors.personalInfo.name }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">联系方式</view>
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
v-model="formData.personalInfo.phone"
|
||||||
|
placeholder="请输入联系方式"
|
||||||
|
type="number"
|
||||||
|
:maxlength="11"
|
||||||
|
/>
|
||||||
|
<text v-if="formErrors.personalInfo.phone" class="error-text">{{ formErrors.personalInfo.phone }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">身份证号码</view>
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
v-model="formData.personalInfo.idCard"
|
||||||
|
placeholder="请输入身份证号码"
|
||||||
|
:maxlength="18"
|
||||||
|
/>
|
||||||
|
<text v-if="formErrors.personalInfo.idCard" class="error-text">{{ formErrors.personalInfo.idCard }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item" @click="handleRegionPicker">
|
||||||
|
<view class="label">经营地址</view>
|
||||||
|
<view class="picker-input">
|
||||||
|
<text v-if="formData.personalInfo.region.some(item => item)" class="picker-text">
|
||||||
|
{{ regionOptions.find(p => p.value === formData.personalInfo.region[0])?.label }}
|
||||||
|
{{ regionOptions.find(p => p.value === formData.personalInfo.region[0])?.children?.find(c => c.value === formData.personalInfo.region[1])?.label }}
|
||||||
|
{{ regionOptions.find(p => p.value === formData.personalInfo.region[0])?.children?.find(c => c.value === formData.personalInfo.region[1])?.children?.find(d => d.value === formData.personalInfo.region[2])?.label }}
|
||||||
|
</text>
|
||||||
|
<text v-else class="picker-placeholder">选择省,市,区</text>
|
||||||
|
<text class="i-carbon-chevron-right picker-arrow"></text>
|
||||||
|
</view>
|
||||||
|
<text v-if="formErrors.personalInfo.region" class="error-text">{{ formErrors.personalInfo.region }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">详细地址</view>
|
||||||
|
<textarea
|
||||||
|
class="textarea"
|
||||||
|
v-model="formData.personalInfo.detailAddress"
|
||||||
|
placeholder="请输入街道小区楼牌号等"
|
||||||
|
:maxlength="100"
|
||||||
|
/>
|
||||||
|
<text v-if="formErrors.personalInfo.detailAddress" class="error-text">{{ formErrors.personalInfo.detailAddress }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 经营信息模块 -->
|
||||||
|
<view class="form-card">
|
||||||
|
<view class="card-title">
|
||||||
|
<view class="title-bar"></view>
|
||||||
|
<text class="title-text">经营信息</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-content">
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">经营项目</view>
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
v-model="formData.businessInfo.businessProject"
|
||||||
|
placeholder="请输入经营项目"
|
||||||
|
/>
|
||||||
|
<text v-if="formErrors.businessInfo.businessProject" class="error-text">{{ formErrors.businessInfo.businessProject }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">经营时间</view>
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
v-model="formData.businessInfo.businessTime"
|
||||||
|
placeholder="请输入经营时间"
|
||||||
|
/>
|
||||||
|
<text v-if="formErrors.businessInfo.businessTime" class="error-text">{{ formErrors.businessInfo.businessTime }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">最近1年经营收入</view>
|
||||||
|
<view class="input-with-suffix">
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
v-model="formData.businessInfo.annualIncome"
|
||||||
|
placeholder="请输入金额"
|
||||||
|
type="digit"
|
||||||
|
/>
|
||||||
|
<text class="suffix">万元</text>
|
||||||
|
</view>
|
||||||
|
<text v-if="formErrors.businessInfo.annualIncome" class="error-text">{{ formErrors.businessInfo.annualIncome }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">负债情况</view>
|
||||||
|
<view class="radio-group">
|
||||||
|
<view
|
||||||
|
class="radio-item"
|
||||||
|
:class="{ active: formData.businessInfo.hasDebt === 'no' }"
|
||||||
|
@click="formData.businessInfo.hasDebt = 'no'"
|
||||||
|
>
|
||||||
|
<text class="radio-dot"></text>
|
||||||
|
<text>无负债</text>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="radio-item"
|
||||||
|
:class="{ active: formData.businessInfo.hasDebt === 'yes' }"
|
||||||
|
@click="formData.businessInfo.hasDebt = 'yes'"
|
||||||
|
>
|
||||||
|
<text class="radio-dot"></text>
|
||||||
|
<text>有负债</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view v-if="formData.businessInfo.hasDebt === 'yes'" class="debt-amount">
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
v-model="formData.businessInfo.debtAmount"
|
||||||
|
placeholder="请输入负债金额"
|
||||||
|
type="digit"
|
||||||
|
/>
|
||||||
|
<text v-if="formErrors.businessInfo.debtAmount" class="error-text">{{ formErrors.businessInfo.debtAmount }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">贷款需求</view>
|
||||||
|
<view class="input-with-suffix">
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
v-model="formData.businessInfo.loanDemand"
|
||||||
|
placeholder="请输入金额"
|
||||||
|
type="digit"
|
||||||
|
/>
|
||||||
|
<text class="suffix">万元</text>
|
||||||
|
</view>
|
||||||
|
<text v-if="formErrors.businessInfo.loanDemand" class="error-text">{{ formErrors.businessInfo.loanDemand }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">家庭主要资产</view>
|
||||||
|
<view class="checkbox-group">
|
||||||
|
<view
|
||||||
|
v-for="option in assetOptions"
|
||||||
|
:key="option.value"
|
||||||
|
class="checkbox-item"
|
||||||
|
:class="{ active: formData.businessInfo.assets.includes(option.value) }"
|
||||||
|
@click="handleAssetChange(option.value)"
|
||||||
|
>
|
||||||
|
<text class="checkbox-icon"></text>
|
||||||
|
<text>{{ option.label }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text v-if="formErrors.businessInfo.assets" class="error-text">{{ formErrors.businessInfo.assets }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 证件信息模块 -->
|
||||||
|
<view class="form-card">
|
||||||
|
<view class="card-title">
|
||||||
|
<view class="title-bar"></view>
|
||||||
|
<text class="title-text">证件信息</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-content">
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">营业执照(租赁合同)</view>
|
||||||
|
<view class="upload-area" @click="handleUploadBusinessLicense">
|
||||||
|
<image v-if="formData.documentInfo.businessLicense" :src="formData.documentInfo.businessLicense" class="uploaded-image" @click.stop="handlePreviewImage(formData.documentInfo.businessLicense)" />
|
||||||
|
<view v-else class="upload-placeholder">
|
||||||
|
<text class="i-carbon-camera upload-icon"></text>
|
||||||
|
<text class="upload-text">点击上传图片</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text v-if="formErrors.documentInfo.businessLicense" class="error-text">{{ formErrors.documentInfo.businessLicense }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">其他辅助材料</view>
|
||||||
|
<view class="upload-list">
|
||||||
|
<view
|
||||||
|
v-for="(image, index) in formData.documentInfo.otherMaterials"
|
||||||
|
:key="index"
|
||||||
|
class="upload-item"
|
||||||
|
>
|
||||||
|
<image :src="image" class="uploaded-image" @click="handlePreviewImage(image)" />
|
||||||
|
<view class="delete-btn" @click="handleRemoveOtherMaterial(index)">
|
||||||
|
<text class="i-carbon-close"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view
|
||||||
|
v-if="formData.documentInfo.otherMaterials.length < 5"
|
||||||
|
class="upload-area small"
|
||||||
|
@click="handleUploadOtherMaterials"
|
||||||
|
>
|
||||||
|
<text class="i-carbon-add upload-icon"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部提交按钮 -->
|
||||||
|
<view class="submit-bar">
|
||||||
|
<button class="submit-btn" @click="handleSubmit">提交资料</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.loan-application-page {
|
||||||
|
min-height: 100vh;
|
||||||
|
background: #F5F7FA;
|
||||||
|
padding-bottom: 120rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-card {
|
||||||
|
background: #FFFFFF;
|
||||||
|
margin: 20rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30rpx;
|
||||||
|
border-bottom: 1rpx solid #F0F0F0;
|
||||||
|
|
||||||
|
.title-bar {
|
||||||
|
width: 6rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
background: #FF6600;
|
||||||
|
border-radius: 3rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-content {
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
background: #F8F8F8;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textarea {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 120rpx;
|
||||||
|
background: #F8F8F8;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 24rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-input {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
background: #F8F8F8;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.picker-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-placeholder {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-arrow {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #CCCCCC;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-with-suffix {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.input {
|
||||||
|
flex: 1;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.suffix {
|
||||||
|
height: 80rpx;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
background: #F0F0F0;
|
||||||
|
border-top-right-radius: 8rpx;
|
||||||
|
border-bottom-right-radius: 8rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 40rpx;
|
||||||
|
|
||||||
|
.radio-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12rpx;
|
||||||
|
|
||||||
|
.radio-dot {
|
||||||
|
width: 36rpx;
|
||||||
|
height: 36rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2rpx solid #DDDDDD;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 18rpx;
|
||||||
|
height: 18rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #28C445;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.radio-dot {
|
||||||
|
border-color: #28C445;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.debt-amount {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20rpx;
|
||||||
|
|
||||||
|
.checkbox-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12rpx;
|
||||||
|
padding: 16rpx 24rpx;
|
||||||
|
background: #F8F8F8;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
|
||||||
|
.checkbox-icon {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
border: 2rpx solid #DDDDDD;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 16rpx;
|
||||||
|
height: 16rpx;
|
||||||
|
background: #28C445;
|
||||||
|
border-radius: 2rpx;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.checkbox-icon {
|
||||||
|
border-color: #28C445;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-area {
|
||||||
|
width: 100%;
|
||||||
|
height: 200rpx;
|
||||||
|
background: #F8F8F8;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&.small {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-placeholder {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16rpx;
|
||||||
|
|
||||||
|
.upload-icon {
|
||||||
|
font-size: 48rpx;
|
||||||
|
color: #CCCCCC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.uploaded-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.upload-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20rpx;
|
||||||
|
|
||||||
|
.upload-item {
|
||||||
|
position: relative;
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
|
||||||
|
.uploaded-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: -10rpx;
|
||||||
|
right: -10rpx;
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.i-carbon-close {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-text {
|
||||||
|
display: block;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #FF4D4F;
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-bar {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 20rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
background: #28C445;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -40,6 +40,13 @@ function navigateTo(url: string) {
|
|||||||
uni.navigateTo({ url })
|
uni.navigateTo({ url })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 跳转到贷款申请页面
|
||||||
|
function goToLoanApplication() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/me/loan-application'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// 退出登录
|
// 退出登录
|
||||||
function handleLogout() {
|
function handleLogout() {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
@@ -162,7 +169,7 @@ function handleLogout() {
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="card-footer">
|
<view class="card-footer">
|
||||||
<view class="apply-btn">立即申请</view>
|
<view class="apply-btn" @click="goToLoanApplication">立即申请</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -189,7 +196,7 @@ function handleLogout() {
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="card-footer">
|
<view class="card-footer">
|
||||||
<view class="apply-btn">立即申请</view>
|
<view class="apply-btn" @click="goToLoanApplication">立即申请</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -351,9 +351,12 @@ function handleCancel() {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
padding: 0 24rpx;
|
padding: 0 24rpx;
|
||||||
|
padding-left: calc(24rpx + env(safe-area-inset-left));
|
||||||
|
padding-right: calc(24rpx + env(safe-area-inset-right));
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||||||
gap: 20rpx;
|
gap: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
padding: 16rpx 40rpx;
|
padding: 16rpx 40rpx;
|
||||||
|
|||||||
Reference in New Issue
Block a user