2026-09-10 10:57:40 +08:00
|
|
|
<template>
|
|
|
|
|
<view class="page page-white">
|
|
|
|
|
<AppHeader :title="titles[step]" />
|
|
|
|
|
<view class="assessment-content">
|
|
|
|
|
<view class="step-line"><view v-for="i in 4" :key="i" :class="i <= step + 1 ? 'step-segment done' : 'step-segment'"></view></view>
|
|
|
|
|
<text class="step-count">{{ step + 1 }}/4</text>
|
2026-09-11 20:23:10 +08:00
|
|
|
<view v-if="step == 0" class="form-list">
|
|
|
|
|
<view class="form-row"><text class="field-label">姓名</text><input v-model="form.name" class="field-input" placeholder="请输入姓名" placeholder-class="placeholder" /></view>
|
|
|
|
|
<view class="form-row"><text class="field-label">身份证号</text><input v-model="form.idCard" class="field-input" placeholder="请输入身份证号" placeholder-class="placeholder" /></view>
|
|
|
|
|
<view class="form-row"><text class="field-label">手机号</text><input v-model="form.phone" class="field-input" type="number" placeholder="请输入手机号" placeholder-class="placeholder" /></view>
|
|
|
|
|
<view class="form-row"><text class="field-label">所在城市</text><input v-model="form.city" class="field-input" placeholder="请选择所在城市" placeholder-class="placeholder" /><text class="field-arrow">⌄</text></view>
|
|
|
|
|
<view class="form-row"><text class="field-label">婚姻状况</text><input v-model="form.maritalStatus" class="field-input" placeholder="请选择" placeholder-class="placeholder" /><text class="field-arrow">⌄</text></view>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-else-if="step == 1" class="form-list">
|
|
|
|
|
<view class="form-row"><text class="field-label">职业类型</text><input v-model="form.occupation" class="field-input" placeholder="请选择" placeholder-class="placeholder" /><text class="field-arrow">⌄</text></view>
|
|
|
|
|
<view class="form-row"><text class="field-label">工作单位</text><input v-model="form.company" class="field-input" placeholder="请输入工作单位" placeholder-class="placeholder" /></view>
|
|
|
|
|
<view class="form-row"><text class="field-label">月收入（元）</text><input v-model="form.monthlyIncome" class="field-input" type="number" placeholder="请输入月收入" placeholder-class="placeholder" /></view>
|
|
|
|
|
<view class="form-row"><text class="field-label">社保缴纳</text><input v-model="form.socialSecurity" class="field-input" placeholder="请选择" placeholder-class="placeholder" /><text class="field-arrow">⌄</text></view>
|
|
|
|
|
<view class="form-row"><text class="field-label">公积金缴纳</text><input v-model="form.housingFund" class="field-input" placeholder="请选择" placeholder-class="placeholder" /><text class="field-arrow">⌄</text></view>
|
|
|
|
|
</view>
|
|
|
|
|
<view v-else-if="step == 2" class="form-list">
|
|
|
|
|
<view class="form-row"><text class="field-label">房产情况</text><input v-model="form.house" class="field-input" placeholder="请选择" placeholder-class="placeholder" /><text class="field-arrow">⌄</text></view>
|
|
|
|
|
<view class="form-row"><text class="field-label">车辆情况</text><input v-model="form.car" class="field-input" placeholder="请选择" placeholder-class="placeholder" /><text class="field-arrow">⌄</text></view>
|
|
|
|
|
<view class="form-row"><text class="field-label">存款情况</text><input v-model="form.savings" class="field-input" placeholder="请选择" placeholder-class="placeholder" /><text class="field-arrow">⌄</text></view>
|
|
|
|
|
<view class="form-row"><text class="field-label">信用卡使用情况</text><input v-model="form.creditCard" class="field-input" placeholder="请选择" placeholder-class="placeholder" /><text class="field-arrow">⌄</text></view>
|
|
|
|
|
<view class="form-row"><text class="field-label">其他资产</text><input v-model="form.otherAssets" class="field-input" placeholder="选填" placeholder-class="placeholder" /><text class="field-arrow">⌄</text></view>
|
2026-09-10 10:57:40 +08:00
|
|
|
</view>
|
|
|
|
|
<view v-else class="upload-area">
|
|
|
|
|
<text class="upload-title">上传资料（选填）</text>
|
2026-09-11 20:23:10 +08:00
|
|
|
<view class="upload-grid"><view class="upload-card" v-for="item in uploads" :key="item" @click="chooseImage(item)"><view class="upload-icon"><AppIcon name="upload" :size="38" /></view><text>{{ item }}</text><text class="upload-state">{{ uploaded[item] == true ? '已选择' : '点击上传' }}</text></view></view>
|
2026-09-10 10:57:40 +08:00
|
|
|
<text class="upload-title other-title">其他资料</text>
|
2026-09-11 20:23:10 +08:00
|
|
|
<view class="upload-grid"><view class="upload-card small-card" v-for="item in otherUploads" :key="item" @click="chooseImage(item)"><view class="file-icon"><AppIcon name="file-text" :size="30" /></view><text>{{ item }}</text></view></view>
|
2026-09-10 10:57:40 +08:00
|
|
|
<view class="consent" @click="consented = !consented"><view :class="consented ? 'checkbox checked' : 'checkbox'"><text v-if="consented">✓</text></view><text>我已阅读并同意《授权协议》</text></view>
|
|
|
|
|
</view>
|
2026-09-11 20:23:10 +08:00
|
|
|
<view class="bottom-action"><button v-if="step > 0" class="back-button" @click="previous">上一步</button><button class="primary-button next-button" @click="next">{{ step == 3 ? '确认信息' : '继续' }}</button></view>
|
2026-09-10 10:57:40 +08:00
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="uts">
|
|
|
|
|
import AppHeader from '@/components/AppHeader.uvue'
|
|
|
|
|
import AppIcon from '@/components/AppIcon.uvue'
|
|
|
|
|
const step = ref(0)
|
2026-09-11 20:23:10 +08:00
|
|
|
const assessmentType = ref('personal')
|
2026-09-10 10:57:40 +08:00
|
|
|
const consented = ref(true)
|
|
|
|
|
const titles = ['基本信息', '经营 / 收入信息', '资产 / 负债信息', '资料上传 / 授权']
|
|
|
|
|
const uploads = ['身份证正面', '银行卡', '收入证明']
|
|
|
|
|
const otherUploads = ['房产证', '营业执照', '其他文件']
|
2026-09-11 20:23:10 +08:00
|
|
|
const form = reactive({ name: '', idCard: '', phone: '', city: '', maritalStatus: '', occupation: '', company: '', monthlyIncome: '', socialSecurity: '', housingFund: '', house: '', car: '', savings: '', creditCard: '', otherAssets: '' })
|
|
|
|
|
const uploaded = reactive({ '身份证正面': false, '银行卡': false, '收入证明': false, '房产证': false, '营业执照': false, '其他文件': false })
|
|
|
|
|
const saveDraft = () => { uni.setStorageSync('assessmentDraft', { type: assessmentType.value, name: form.name, idCard: form.idCard, phone: form.phone, city: form.city, maritalStatus: form.maritalStatus, occupation: form.occupation, company: form.company, monthlyIncome: form.monthlyIncome, socialSecurity: form.socialSecurity, housingFund: form.housingFund, house: form.house, car: form.car, savings: form.savings, creditCard: form.creditCard, otherAssets: form.otherAssets, consented: consented.value, uploaded: uploaded }) }
|
|
|
|
|
const fillDraft = (saved: UTSJSONObject) => {
|
|
|
|
|
const read = (key: string): string => { const value = saved[key]; return value == null ? '' : value as string }
|
|
|
|
|
form.name = read('name'); form.idCard = read('idCard'); form.phone = read('phone'); form.city = read('city'); form.maritalStatus = read('maritalStatus'); form.occupation = read('occupation'); form.company = read('company'); form.monthlyIncome = read('monthlyIncome'); form.socialSecurity = read('socialSecurity'); form.housingFund = read('housingFund'); form.house = read('house'); form.car = read('car'); form.savings = read('savings'); form.creditCard = read('creditCard'); form.otherAssets = read('otherAssets')
|
|
|
|
|
const savedConsent = saved['consented']; if (savedConsent != null) consented.value = savedConsent as boolean
|
2026-09-10 10:57:40 +08:00
|
|
|
}
|
2026-09-11 20:23:10 +08:00
|
|
|
onLoad((options) => {
|
|
|
|
|
const routeType = options != null && options['type'] == 'enterprise' ? 'enterprise' : ''
|
|
|
|
|
const saved = uni.getStorageSync('assessmentDraft') as UTSJSONObject
|
|
|
|
|
if (routeType.length > 0) assessmentType.value = routeType
|
|
|
|
|
if (saved != null) {
|
|
|
|
|
const savedType = saved['type'] == null ? '' : saved['type'] as string
|
|
|
|
|
if (savedType.length > 0 && (routeType.length == 0 || savedType == routeType)) fillDraft(saved)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
onShow(() => {
|
|
|
|
|
const requestedStep = uni.getStorageSync('assessmentEditStep') as number
|
|
|
|
|
if (requestedStep != null && requestedStep >= 0 && requestedStep < 4) {
|
|
|
|
|
step.value = requestedStep
|
|
|
|
|
uni.removeStorageSync('assessmentEditStep')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
const chooseImage = (name: string) => { uploaded[name] = true; saveDraft(); uni.showToast({ title: name + '上传入口已预留', icon: 'none' }) }
|
|
|
|
|
const previous = () => { saveDraft(); if (step.value > 0) step.value-- }
|
|
|
|
|
const validateStep = (): boolean => {
|
|
|
|
|
if (step.value == 0) {
|
|
|
|
|
if (form.name.trim().length < 2) { uni.showToast({ title: '请输入正确姓名', icon: 'none' }); return false }
|
|
|
|
|
if (form.idCard.trim().length < 15) { uni.showToast({ title: '请输入正确身份证号', icon: 'none' }); return false }
|
|
|
|
|
if (form.phone.trim().length != 11 || !form.phone.startsWith('1')) { uni.showToast({ title: '请输入正确手机号', icon: 'none' }); return false }
|
|
|
|
|
if (form.city.trim().length == 0) { uni.showToast({ title: '请选择所在城市', icon: 'none' }); return false }
|
|
|
|
|
}
|
|
|
|
|
if (step.value == 1 && form.monthlyIncome.trim().length == 0) { uni.showToast({ title: '请输入月收入', icon: 'none' }); return false }
|
|
|
|
|
return true
|
|
|
|
|
}
|
|
|
|
|
const next = () => { if (!validateStep()) return; saveDraft(); if (step.value < 3) step.value++; else if (!consented.value) uni.showToast({ title: '请同意授权协议', icon: 'none' }); else uni.navigateTo({ url: '/pages/confirm/confirm' }) }
|
2026-09-10 10:57:40 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.assessment-content { min-height: calc(100vh - var(--status-bar-height) - 96rpx); padding: 24rpx 30rpx 190rpx; position: relative; }.step-line { height: 8rpx; flex-direction: row; margin-right: 70rpx; }.step-segment { flex: 1; height: 8rpx; border-radius: 8rpx; background-color: #e8edf4; margin-right: 8rpx; }.step-segment.done { background-color: #0868f7; }.step-count { position: absolute; top: 16rpx; right: 30rpx; color: #7f8da2; font-size: 22rpx; }
|
|
|
|
|
.form-list { margin-top: 42rpx; }.form-row { min-height: 104rpx; flex-direction: row; align-items: center; border-bottom: 1rpx solid #edf1f6; }.field-label { width: 230rpx; font-size: 27rpx; color: #27354b; }.field-input { flex: 1; text-align: right; font-size: 26rpx; color: #18253d; }.placeholder { color: #b0bac9; }.field-arrow { color: #a5b0c0; margin-left: 10rpx; }
|
|
|
|
|
.upload-title { font-size: 29rpx; font-weight: 700; margin-top: 40rpx; }.upload-grid { flex-direction: row; margin-top: 22rpx; }.upload-card { flex: 1; height: 210rpx; margin-right: 14rpx; border-radius: 16rpx; background-color: #f2f7fd; align-items: center; justify-content: center; color: #35445a; font-size: 22rpx; }.upload-card:last-child { margin-right: 0; }.upload-icon { width: 70rpx; height: 70rpx; border-radius: 18rpx; background-color: #dfeeff; align-items: center; justify-content: center; margin-bottom: 14rpx; }.upload-state { color: #9ca8b9; font-size: 19rpx; margin-top: 8rpx; }.other-title { margin-top: 42rpx; }.small-card { height: 150rpx; }.file-icon { width: 54rpx; height: 54rpx; border-radius: 14rpx; background-color: #e6f0ff; align-items: center; justify-content: center; margin-bottom: 10rpx; }.consent { margin-top: 34rpx; flex-direction: row; align-items: center; color: #67758a; font-size: 22rpx; }.checkbox { width: 32rpx; height: 32rpx; border-radius: 50%; border: 2rpx solid #aeb9c8; align-items: center; justify-content: center; margin-right: 12rpx; }.checkbox.checked { background-color: #0868f7; border-color: #0868f7; color: white; }
|
|
|
|
|
.bottom-action { position: fixed; left: 0; right: 0; bottom: 0; padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom)); background-color: #fff; border-top: 1rpx solid #edf1f6; flex-direction: row; }.back-button { width: 180rpx; height: 92rpx; line-height: 92rpx; margin-right: 18rpx; border-radius: 16rpx; background-color: #eef3f9; color: #526075; font-size: 27rpx; }.next-button { flex: 1; margin: 0; }
|
|
|
|
|
</style>
|
