root/airz-uniapp
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 完成项目基础功能搭建与样式优化

Browse Source 
1.  新增评估选择组件、本地草稿存储与新闻/金融内容服务
2.  重构页面布局与样式：调整按钮阴影、图标尺寸、导航栏样式
3.  更新启动页、报告页、消息中心等页面UI与交互逻辑
4.  替换图标资源，调整禁用态透明度
5.  补充README文档与本地数据模拟实现
This commit is contained in:
hujun
2026-09-18 12:59:43 +08:00
parent b0ee4f9d7e
commit 94a4558290
30 changed files with 1376 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/matches/matches.uvue
+62 -39
View File
@@ -1,18 +1,21 @@
<template>
<view class="page" :style="pageStyle()">
<AppHeader title="为您匹配到 3 个方案" />
<view class="filter-bar"><view :class="filter == 'all' ? 'filter active' : 'filter'" @click="filter='all'"><text>综合排序</text></view><view :class="filter == 'amount' ? 'filter active' : 'filter'" @click="filter='amount'"><text>额度高</text></view><view :class="filter == 'rate' ? 'filter active' : 'filter'" @click="filter='rate'"><text>利率低</text></view></view>
<scroll-view scroll-y class="match-scroll" :style="contentStyle(318, false)">
<AppHeader title="匹配融资方案" />
<view class="filter-bar"><view v-for="item in filters" :key="item.id" :class="filter == item.id ? 'filter active' : 'filter'" @click="filter = item.id"><text :class="filter == item.id ? 'filter-label selected' : 'filter-label'">{{ item.label }}</text></view></view>
<scroll-view scroll-y :style="contentStyle(314, false)">
<view class="match-content">
<view v-if="loading" class="state-panel"><text>正在为您匹配方案...</text></view>
<view v-else-if="errorMessage.length > 0" class="state-panel error-panel"><text>{{ errorMessage }}</text><button class="retry-button" @click="loadMatches">重新加载</button></view>
<view class="match-card" v-for="item in matches" :key="item.rank">
<view :class="'rank rank-' + item.rank"><text>{{ item.rank }}</text></view>
<view class="bank-logo"><AppIcon name="building" :size="40" /></view>
<view class="match-main"><text class="bank-name">{{ item.bank }}</text><text class="match-tag">个人信用贷 · 资料简</text><view class="metrics"><view class="metrics-view"><text class="metric-value">{{ item.amount }}</text><text class="metric-label">最高额度</text></view><view class="metrics-view"><text class="metric-value rate-value">{{ item.rate }}</text><text class="metric-label">年利率</text></view><view class="metrics-view"><text class="metric-value">{{ item.term }}</text><text class="metric-label">贷款期限</text></view></view></view>
<button class="detail-button" @click="openProduct(item.rank)">查看详情</button>
<view v-if="loading" class="state-panel"><text class="state-text">正在匹配融资方案…</text></view>
<view v-else-if="errorMessage.length > 0" class="state-panel"><text class="state-text">{{ errorMessage }}</text><button class="retry-button" @click="loadMatches">重新加载</button></view>
<view v-else-if="matches.length == 0" class="state-panel"><text class="state-text">暂无可展示方案，请完善评估资料后重试</text></view>
<view v-else>
<text class="result-summary">共 {{ matches.length }} 个方案 · {{ isDemo ? '示例数据' : '按您的评估信息匹配' }}</text>
<view class="match-card" v-for="item in sortedMatches" :key="item.id" @click="openProduct(item.id)">
<view class="bank-row"><view class="bank-logo" :style="'background-color:' + item.color"><text class="bank-initial">{{ item.initials }}</text></view><view class="bank-copy"><text class="bank-name">{{ item.bank }}</text><text class="match-tag">个人信用融资</text></view><text class="match-score">{{ item.score }}%匹配</text></view>
<view class="metrics"><view class="metric"><text class="metric-value">{{ item.amount }}<text class="metric-unit"> 万</text></text><text class="metric-label">最高额度</text></view><view class="metric"><text class="metric-value rate-value">{{ item.rate.toFixed(2) }}%</text><text class="metric-label">年化利率（起）</text></view><view class="metric term-metric"><text class="term-value">{{ item.term }}</text><text class="metric-label">贷款期限</text></view></view>
<view class="card-footer"><text class="footer-hint">{{ item.advantages.join(' · ') }}</text><view class="detail-link"><text class="detail-label">查看详情</text><AppIcon name="chevron-right" :size="26" /></view></view>
</view>
</view>
<text class="list-tip">匹配结果基于您的评估信息，实际额度以机构审批为准</text>
<text class="list-tip">展示参数仅供参考，实际额度、利率及条件以机构审批为准。银行以文字简称标识。</text>
</view>
</scroll-view>
<BottomNav active="" />
@@ -21,48 +24,68 @@
<script setup lang="uts">
import { usePageLayout } from '@/services/layout.uts'
const { contentStyle, pageStyle } = usePageLayout()
import { FinanceProduct } from '@/services/finance.uts'
import { fetchMatches, API_BASE_URL } from '@/services/api.uts'
import AppHeader from '@/components/AppHeader.uvue'
import BottomNav from '@/components/BottomNav.uvue'
import { fetchMatches } from '@/services/api.uts'
import AppIcon from '@/components/AppIcon.uvue'
const { contentStyle, pageStyle } = usePageLayout()
type MatchFilter = { id: string, label: string }
const filters: MatchFilter[] = [{ id: 'all', label: '综合排序' }, { id: 'amount', label: '额度优先' }, { id: 'rate', label: '低息优先' }]
const filter = ref('all')
const matches = ref<UTSJSONObject[]>([])
const matches = ref<FinanceProduct[]>([])
const loading = ref(true)
const errorMessage = ref('')
const isDemo = API_BASE_URL.length == 0
const sortedMatches = computed((): FinanceProduct[] => {
const items = matches.value.slice()
items.sort((a: FinanceProduct, b: FinanceProduct): number => {
if (filter.value == 'amount') return b.amount - a.amount
if (filter.value == 'rate') return a.rate - b.rate
return b.score - a.score
})
return items
})
const loadMatches = async () => {
loading.value = true
errorMessage.value = ''
try { matches.value = await fetchMatches() } catch (error) { errorMessage.value = '匹配方案加载失败，请重试' }
try { matches.value = await fetchMatches() } catch (error) { errorMessage.value = '方案加载失败，请重试' }
loading.value = false
}
onMounted(() => { loadMatches() })
const openProduct = (rank: any | null) => { if (rank != null) uni.navigateTo({ url: '/pages/product/product?id=' + rank.toString() }) }
const openProduct = (id: string) => { uni.navigateTo({ url: '/pages/product/product?id=' + id }) }
</script>
<style>
.filter-bar { height: 92rpx; background-color: #fff; flex-direction: row; align-items: center; padding: 0 30rpx; border-bottom: 1rpx solid #e9eef6; }
.filter { flex: 1; height: 92rpx; align-items: center; justify-content: center; color: #758298; font-size: 24rpx; }
.filter.active { color: #0868f7; font-weight: 700; border-bottom: 4rpx solid #0868f7; }
.match-scroll { }
.match-content { padding: 24rpx 28rpx 150rpx; }
.match-card { min-height: 310rpx; border-radius: 18rpx; margin-bottom: 22rpx; background-color: #fff; border: 1rpx solid #e4ebf5; padding: 26rpx 22rpx 22rpx; position: relative; flex-direction: row; box-shadow: 0 8rpx 24rpx rgba(24, 54, 95, .05); }
.rank { position: absolute; left: -7rpx; top: 20rpx; width: 48rpx; height: 48rpx; color: white; border-radius: 0 24rpx 24rpx 0; align-items: center; justify-content: center; font-weight: 800; }
.rank-1 { background-color: #ff8a13; }
.rank-2 { background-color: #16b48a; }
.rank-3 { background-color: #ee3333; }
.bank-logo { width: 78rpx; height: 78rpx; border-radius: 50%; background-color: #e41e2b; color: white; align-items: center; justify-content: center; font-size: 30rpx; font-weight: 800; margin-left: 22rpx; margin-right: 18rpx; }
.match-main { flex: 1; }
.bank-name { font-size: 28rpx; font-weight: 800; }
.match-tag { color: #8794a7; font-size: 20rpx; margin-top: 8rpx; }
.metrics { flex-direction: row; justify-content: space-between; margin-top: 30rpx; }
.metrics-view { flex: 1; }
.metric-value { font-size: 26rpx; font-weight: 800; color: #1c2a41; }
.filter-bar { height: 88rpx; background-color: #fff; flex-direction: row; padding: 0 28rpx; border-bottom: 1rpx solid #e9eef6; }
.filter { flex: 1; align-items: center; justify-content: center; }
.active { border-bottom: 4rpx solid #0868f7; }
.filter-label { color: #718098; font-size: 25rpx; }
.selected { color: #0868f7; font-weight: 700; }
.match-content { padding: 24rpx 28rpx 90rpx; }
.result-summary { color: #6f7f96; font-size: 22rpx; margin-bottom: 20rpx; }
.match-card { border-radius: 18rpx; margin-bottom: 20rpx; background-color: #fff; border: 1rpx solid #e4ebf5; padding: 24rpx; }
.bank-row { flex-direction: row; align-items: center; }
.bank-logo { width: 64rpx; height: 64rpx; border-radius: 20rpx; align-items: center; justify-content: center; margin-right: 16rpx; flex-shrink: 0; }
.bank-initial { color: #fff; font-size: 30rpx; font-weight: 700; }
.bank-copy { flex: 1; }
.bank-name { font-size: 27rpx; font-weight: 700; color: #20324d; }
.match-tag { font-size: 21rpx; color: #7a899f; margin-top: 6rpx; }
.match-score { color: #178461; font-size: 20rpx; }
.metrics { flex-direction: row; margin-top: 26rpx; margin-bottom: 22rpx; }
.metric { flex: 1; }
.term-metric { align-items: flex-end; }
.metric-value { color: #20324d; font-size: 35rpx; font-weight: 800; line-height: 44rpx; }
.metric-unit { font-size: 23rpx; }
.rate-value { color: #0868f7; }
.metric-label { margin-top: 7rpx; font-size: 18rpx; color: #95a0b1; }
.detail-button { position: absolute; right: 22rpx; bottom: 18rpx; width: 160rpx; height: 62rpx; line-height: 62rpx; border-radius: 12rpx; margin: 0; padding: 0; background-color: #0868f7; color: white; font-size: 22rpx; font-weight: 700; }
.list-tip { text-align: center; color: #9ca8b8; font-size: 20rpx; line-height: 34rpx; margin: 12rpx 30rpx; }
.state-panel { min-height: 260rpx; align-items: center; justify-content: center; color: #8793a6; font-size: 24rpx; }
.error-panel { color: #e05a5a; }
.retry-button { margin-top: 20rpx; height: 64rpx; line-height: 64rpx; border-radius: 12rpx; color: #0868f7; background-color: #e8f2ff; font-size: 22rpx; }
.term-value { color: #20324d; font-size: 25rpx; font-weight: 600; line-height: 44rpx; }
.metric-label { margin-top: 7rpx; font-size: 21rpx; color: #7c8aa0; }
.card-footer { border-top: 1rpx solid #edf1f6; padding-top: 18rpx; flex-direction: row; align-items: center; justify-content: space-between; }
.footer-hint { flex: 1; margin-right: 16rpx; font-size: 20rpx; line-height: 32rpx; color: #78889f; }
.detail-link { flex-direction: row; align-items: center; flex-shrink: 0; }
.detail-label { font-size: 24rpx; color: #0868f7; font-weight: 600; margin-right: 6rpx; }
.list-tip { color: #7a899e; font-size: 21rpx; line-height: 34rpx; margin: 8rpx 8rpx 0; }
.state-panel { padding: 70rpx 20rpx; align-items: center; }
.state-text { font-size: 26rpx; line-height: 42rpx; color: #728197; text-align: center; }
.retry-button { margin-top: 20rpx; color: #0868f7; background-color: #e8f2ff; font-size: 24rpx; }
</style>