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

commit

Browse Source
This commit is contained in:
hujun
2026-09-10 10:57:40 +08:00
commit efb88e40d2
109 changed files with 22515 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/product/product.uvue
+29
View File
@@ -0,0 +1,29 @@
<template>
<view class="page">
<AppHeader title="产品详情"><text class="share">分享</text></AppHeader>
<scroll-view scroll-y class="product-scroll">
<view class="product-content">
<view class="bank-head"><view class="bank-mark"><AppIcon name="building" :size="42" /></view><view><text class="product-name">招商银行·闪电贷</text><text class="product-tags">个人信用贷　线上申请　快速放款</text></view></view>
<view class="product-metrics"><view><text class="metric-label">最高额度</text><text class="amount">50万</text></view><view><text class="metric-label">年利率</text><text class="rate">3.85%</text></view><view><text class="metric-label">贷款期限</text><text class="term">12-36期</text></view></view>
<view class="detail-section"><text class="section-title">产品优势</text><view class="advantage-grid"><view class="advantage" v-for="item in advantages" :key="item"><AppIcon name="check-circle" :size="30" /><text>{{ item }}</text></view></view></view>
<view class="detail-section"><text class="section-title">申请条件</text><view class="condition"><text>年龄要求</text><text>22-55周岁</text></view><view class="condition"><text>工作要求</text><text>现单位满6个月</text></view><view class="condition"><text>信用要求</text><text>近两年无严重逾期</text></view></view>
<view class="detail-section"><text class="section-title">所需材料</text><text class="material">身份证 · 银行卡 · 收入证明</text></view>
</view>
</scroll-view>
<view class="apply-bar"><button class="primary-button apply-button" @click="apply">立即申请</button></view>
</view>
</template>
<script setup lang="uts">
import AppHeader from '@/components/AppHeader.uvue'
import AppIcon from '@/components/AppIcon.uvue'
const advantages = ['线上申请', '额度高', '审批快速', '利率低', '无抵押', '无担保']
const apply = () => { uni.showModal({ title: '申请已记录', content: '机构申请接口已预留，接入后将提交您的授权资料。', showCancel: false }) }
</script>
<style>
.share { color: #0868f7; font-size: 23rpx; }.product-scroll { height: calc(100vh - var(--status-bar-height) - 220rpx); }.product-content { padding: 26rpx 28rpx 130rpx; }.bank-head { min-height: 150rpx; padding: 26rpx; border-radius: 18rpx; background-color: #fff; border: 1rpx solid #e6edf6; flex-direction: row; align-items: center; }.bank-mark { width: 84rpx; height: 84rpx; border-radius: 50%; background-color: #e8192c; align-items: center; justify-content: center; margin-right: 22rpx; }.bank-mark .app-icon { filter: brightness(0) invert(1); }.product-name { font-size: 30rpx; font-weight: 800; }.product-tags { color: #8794a8; font-size: 20rpx; margin-top: 11rpx; }
.product-metrics { min-height: 180rpx; margin-top: 20rpx; padding: 34rpx 15rpx; border-radius: 18rpx; background-color: #fff; border: 1rpx solid #e6edf6; flex-direction: row; }.product-metrics view { flex: 1; align-items: center; border-right: 1rpx solid #edf1f6; }.product-metrics view:last-child { border-right: 0; }.metric-label { color: #8491a5; font-size: 21rpx; }.amount, .rate, .term { margin-top: 16rpx; font-size: 34rpx; font-weight: 800; }.rate { color: #0868f7; }
.detail-section { margin-top: 22rpx; padding: 28rpx; background-color: #fff; border-radius: 18rpx; border: 1rpx solid #e6edf6; }.advantage-grid { margin-top: 25rpx; flex-direction: row; flex-wrap: wrap; }.advantage { width: 50%; flex-direction: row; align-items: center; margin-bottom: 22rpx; font-size: 24rpx; color: #435168; }.advantage .app-icon { margin-right: 12rpx; }.condition { height: 80rpx; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1rpx solid #edf1f6; color: #667489; font-size: 24rpx; }.condition text:last-child { color: #1e2c43; font-weight: 600; }.material { margin-top: 22rpx; font-size: 24rpx; color: #657389; }
.apply-bar { position: fixed; left: 0; right: 0; bottom: 0; padding: 18rpx 28rpx calc(18rpx + env(safe-area-inset-bottom)); background-color: #fff; border-top: 1rpx solid #e7edf6; }.apply-button { margin: 0; }
</style>