airz-uniapp/packages/finance/archive/archive.uvue

<template>
	<view class="page" :style="pageStyle()">
		<AppHeader title="我的融资档案" />
		<scroll-view scroll-y :style="contentStyle(96, false)"><view class="archive-content">
			<view class="archive-switch"><text :class="type == 'personal' ? 'switch-item switch-active' : 'switch-item'" @click="switchType('personal')">个人档案</text><text :class="type == 'enterprise' ? 'switch-item switch-active' : 'switch-item'" @click="switchType('enterprise')">企业档案</text></view>
			<view class="completion"><view class="completion-head"><text class="completion-title">档案完整度</text><text class="completion-score">{{ progress.percent }}<text class="score-unit">%</text></text></view><view class="progress-track"><view class="progress-bar" :style="'width:' + progress.percent + '%;'"></view></view><text class="completion-desc">{{ progress.percent == 100 ? '基础信息已完善，可继续查看评估方案。' : '完善基础信息，让融资评估更贴近您的情况。' }}</text></view>
			<view class="archive-list"><view class="archive-row" v-for="item in archiveItems" :key="item.step" @click="edit(item.step)"><AppIcon :name="item.icon" :size="48" /><view class="archive-labels"><text class="archive-name">{{ item.name }}</text><text class="archive-note">{{ item.note }}</text></view><text :class="item.done ? 'state state-done' : 'state'">{{ item.done ? (item.step == 3 ? '已选择' : '已完善') : (item.step == 3 ? '选填' : '待完善') }}</text><AppIcon name="chevron-right" :size="28" /></view></view>
			<button class="primary-button complete-button" @click="complete">{{ progress.percent == 100 ? '查看并确认信息' : '继续完善档案' }}</button>
			<text class="local-note">草稿保存在当前设备，资料与授权可自主选择。</text>
		</view></scroll-view>
	</view>
</template>

<script setup lang="uts">
	import { setUserStorage } from '@/services/storage.uts'

	import { usePageLayout } from '@/services/layout.uts'
	import AppHeader from '@/components/AppHeader.uvue'
	import AppIcon from '@/components/AppIcon.uvue'
	import { AssessmentProgress, activeAssessmentType, assessmentProgress } from '@/services/assessment.uts'
	const { pageStyle, contentStyle } = usePageLayout()
	type ArchiveItem = { icon: string, name: string, note: string, done: boolean, step: number }
	const type = ref('personal')
	const progress = ref<AssessmentProgress>({ percent: 0, basicDone: false, incomeDone: false, assetsDone: false, authorizationSelected: false })
	const archiveItems = computed((): ArchiveItem[] => [
		{ icon: 'file-text', name: '基本信息', note: type.value == 'enterprise' ? '企业与联系人信息' : '身份与联系方式', done: progress.value.basicDone, step: 0 },
		{ icon: 'income', name: type.value == 'enterprise' ? '经营信息' : '职业与收入', note: type.value == 'enterprise' ? '经营行业、年限与营收' : '职业、收入与缴纳情况', done: progress.value.incomeDone, step: 1 },
		{ icon: 'asset', name: '资产与负债', note: '贷款、信用卡额度与房车情况', done: progress.value.assetsDone, step: 2 },
		{ icon: 'authorization', name: '资料与授权', note: '本地资料与数据授权意向', done: progress.value.authorizationSelected, step: 3 }
	])
	const refresh = () => { progress.value = assessmentProgress(type.value) }
	onShow(() => { type.value = activeAssessmentType(); refresh() })
	const switchType = (next: string) => { type.value = next; setUserStorage('assessmentActiveType', next); refresh() }
	const edit = (step: number) => { setUserStorage('assessmentEditStep', step); uni.navigateTo({ url: '/packages/finance/assessment/assessment?type=' + type.value }) }
	const complete = () => {
		if (progress.value.percent == 100) uni.navigateTo({ url: '/packages/finance/confirm/confirm' })
		else if (!progress.value.basicDone) edit(0)
		else if (!progress.value.incomeDone) edit(1)
		else edit(2)
	}
</script>

<style>
	.archive-content { padding: 26rpx 30rpx 64rpx; }
	.archive-switch { flex-direction: row; background-color: #eaf0f8; border-radius: 16rpx; padding: 6rpx; margin-bottom: 24rpx; }
	.switch-item { flex: 1; text-align: center; font-size: 27rpx; color: #708099; padding: 18rpx 0; border-radius: 12rpx; }
	.switch-active { background-color: #fff; color: #0868f7; font-weight: 600; }
	.completion { padding: 30rpx; border-radius: 20rpx; background-color: #edf5ff; }
	.completion-head { flex-direction: row; justify-content: space-between; align-items: center; }
	.completion-title { font-size: 30rpx; font-weight: 600; color: #233d64; }
	.completion-score { color: #0868f7; font-size: 52rpx; line-height: 64rpx; font-weight: 800; }
	.score-unit { color: #0868f7; font-size: 28rpx; font-weight: 600; }
	.completion-desc { color: #6c819d; font-size: 25rpx; line-height: 38rpx; margin-top: 20rpx; }
	.progress-track { height: 12rpx; border-radius: 6rpx; background-color: #d9e6f8; margin-top: 20rpx; overflow: hidden; }
	.progress-bar { height: 12rpx; border-radius: 6rpx; background-color: #0868f7; }
	.archive-list { margin-top: 24rpx; background-color: #fff; border: 1rpx solid #e5ecf5; border-radius: 18rpx; padding: 0 22rpx; }
	.archive-row { min-height: 126rpx; flex-direction: row; align-items: center; border-bottom: 1rpx solid #edf1f6; }
	.archive-labels { flex: 1; min-width: 0; margin: 0 18rpx; }
	.archive-name { font-size: 28rpx; color: #26374e; font-weight: 500; }
	.archive-note { font-size: 23rpx; color: #8190a4; margin-top: 8rpx; line-height: 34rpx; }
	.state { font-size: 23rpx; color: #8c99ab; margin-right: 10rpx; flex-shrink: 0; }
	.state-done { color: #16a478; }
	.complete-button { margin-top: 32rpx; }
	.local-note { font-size: 23rpx; color: #8795a8; line-height: 36rpx; margin-top: 22rpx; text-align: center; }
</style>