commit
This commit is contained in:
hujun
@@ -0,0 +1,59 @@
|
||||
<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>
|
||||
<view v-if="step < 3" class="form-list">
|
||||
<view class="form-row" v-for="item in fieldGroups[step]" :key="item.label">
|
||||
<text class="field-label">{{ item.label }}</text>
|
||||
<input class="field-input" :placeholder="item.placeholder" placeholder-class="placeholder" />
|
||||
<text v-if="item.select" class="field-arrow">⌄</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="upload-area">
|
||||
<text class="upload-title">上传资料（选填）</text>
|
||||
<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">点击上传</text></view>
|
||||
</view>
|
||||
<text class="upload-title other-title">其他资料</text>
|
||||
<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>
|
||||
<view class="consent" @click="consented = !consented"><view :class="consented ? 'checkbox checked' : 'checkbox'"><text v-if="consented">✓</text></view><text>我已阅读并同意《授权协议》</text></view>
|
||||
</view>
|
||||
<view class="bottom-action">
|
||||
<button v-if="step > 0" class="back-button" @click="step--">上一步</button>
|
||||
<button class="primary-button next-button" @click="next">{{ step == 3 ? '下一步' : '继续' }}</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import AppHeader from '@/components/AppHeader.uvue'
|
||||
import AppIcon from '@/components/AppIcon.uvue'
|
||||
const step = ref(0)
|
||||
const consented = ref(true)
|
||||
const titles = ['基本信息', '经营 / 收入信息', '资产 / 负债信息', '资料上传 / 授权']
|
||||
const fieldGroups = [
|
||||
[{ label: '姓名', placeholder: '请输入姓名', select: false }, { label: '身份证号', placeholder: '请输入身份证号', select: false }, { label: '手机号', placeholder: '请输入手机号', select: false }, { label: '所在城市', placeholder: '请选择所在城市', select: true }, { label: '婚姻状况', placeholder: '请选择', select: true }],
|
||||
[{ label: '职业类型', placeholder: '请选择', select: true }, { label: '工作单位', placeholder: '请输入工作单位', select: false }, { label: '月收入（元）', placeholder: '请输入月收入', select: false }, { label: '社保缴纳', placeholder: '请选择', select: true }, { label: '公积金缴纳', placeholder: '请选择', select: true }],
|
||||
[{ label: '房产情况', placeholder: '请选择', select: true }, { label: '车辆情况', placeholder: '请选择', select: true }, { label: '存款情况', placeholder: '请选择', select: true }, { label: '信用卡使用情况', placeholder: '请选择', select: true }, { label: '其他资产', placeholder: '选填', select: true }]
|
||||
]
|
||||
const uploads = ['身份证正面', '银行卡', '收入证明']
|
||||
const otherUploads = ['房产证', '营业执照', '其他文件']
|
||||
const chooseImage = (name: string) => { uni.showToast({ title: name + '上传入口已预留', icon: 'none' }) }
|
||||
const next = () => {
|
||||
if (step.value < 3) step.value++
|
||||
else if (!consented.value) uni.showToast({ title: '请同意授权协议', icon: 'none' })
|
||||
else uni.navigateTo({ url: '/pages/confirm/confirm' })
|
||||
}
|
||||
</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>
|
||||
Reference in New Issue
Block a user