refactor: 优化跨端导航适配与页面文案体验
- 新增微信小程序胶囊区域避让布局逻辑 - 统一首页导航与标题对齐规则 - 更新多处演示提示文案为正式表述 - 调整个人中心账户状态显示 - 优化产品页分享按钮条件渲染
This commit is contained in:
@@ -1,17 +1,24 @@
|
||||
<template>
|
||||
<view class="page" :style="pageStyle()">
|
||||
<AppHeader title="产品详情"><text v-if="available" class="share" @click="shareProduct">分享</text></AppHeader>
|
||||
<AppHeader title="产品详情">
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<text v-if="available" class="share" @click="shareProduct">分享</text>
|
||||
<!-- #endif -->
|
||||
</AppHeader>
|
||||
<scroll-view scroll-y :style="contentStyle(224, false)">
|
||||
<view class="product-content">
|
||||
<view v-if="loading" class="state"><text class="state-text">正在加载产品…</text></view>
|
||||
<view v-else-if="!available" class="state"><text class="state-title">{{ loadFailed ? '产品加载失败' : '暂未找到该产品' }}</text><text class="state-text">请重试或返回方案列表选择其他产品</text><button class="retry-button" @click="loadProduct">重新加载</button></view>
|
||||
<view v-else>
|
||||
<view class="bank-head"><view class="bank-mark" :style="'background-color:' + product.color"><text class="bank-initial">{{ product.initials }}</text></view><view class="bank-copy"><text class="product-name">{{ product.bank }}</text><text class="product-tags">个人信用融资 · {{ isDemo ? '示例产品' : '产品信息' }}</text></view></view>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="product-actions"><text class="share" @click="shareProduct">分享产品</text></view>
|
||||
<!-- #endif -->
|
||||
<view class="bank-head"><view class="bank-mark" :style="'background-color:' + product.color"><text class="bank-initial">{{ product.initials }}</text></view><view class="bank-copy"><text class="product-name">{{ product.bank }}</text><text class="product-tags">个人信用融资 · 产品信息</text></view></view>
|
||||
<view class="product-metrics"><view class="metric"><text class="metric-label">最高额度</text><text class="amount">{{ product.amount }}万</text></view><view class="metric"><text class="metric-label">年化利率(起)</text><text class="rate">{{ product.rate.toFixed(2) }}%</text></view><view class="metric last-metric"><text class="metric-label">贷款期限</text><text class="term">{{ product.term }}</text></view></view>
|
||||
<view class="detail-section"><text class="section-title">产品优势</text><view class="advantage-grid"><view class="advantage" v-for="item in product.advantages" :key="item"><AppIcon name="check-circle" :size="30" /><text class="advantage-label">{{ item }}</text></view></view></view>
|
||||
<view class="detail-section"><text class="section-title">申请条件</text><view class="condition"><text class="condition-label">年龄要求</text><text class="condition-value">{{ product.age }}</text></view><view class="condition"><text class="condition-label">工作要求</text><text class="condition-value">{{ product.work }}</text></view><view class="condition"><text class="condition-label">信用要求</text><text class="condition-value">{{ product.credit }}</text></view></view>
|
||||
<view class="detail-section"><text class="section-title">所需材料</text><text class="material">{{ product.materials }}</text></view>
|
||||
<text class="product-note">额度、利率及申请条件仅供参考,以机构实际审批为准。{{ isDemo ? '当前可体验申请准备流程,尚未向机构提交资料。' : '' }}</text>
|
||||
<text class="product-note">额度、利率及申请条件仅供参考,以机构实际审批为准。{{ isDemo ? '当前可准备申请资料,尚未向机构提交。' : '' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -62,6 +69,7 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.product-actions { flex-direction: row; justify-content: flex-end; margin-bottom: 12rpx; }
|
||||
.share { color: #0868f7; font-size: 25rpx; padding: 16rpx 0 16rpx 16rpx; }
|
||||
.product-content { padding: 24rpx 28rpx 60rpx; }
|
||||
.bank-head { padding: 26rpx; border-radius: 18rpx; background-color: #fff; border: 1rpx solid #e6edf6; flex-direction: row; align-items: center; }
|
||||
|
||||
Reference in New Issue
Block a user