Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 88651fbd 作者: 方治民
操作

feat: 优化助农金融页面调整后的详情展示

上级 92df79d5
正在显示 包含 160 行增加 和 89 行删除
src/pages/fuwu/fuwu.vue
......@@ -251,7 +251,14 @@
console.log('点击助农金融产品:', product)
// 在这里添加具体的产品点击逻辑
Navigate.to('/pages/zhunongjinrong/zhunongjinrong')
// 跳转到助农金融界面
if (product.name === '惠农贷') {
Navigate.to('/pages/zhunongjinrong/zhunongjinrong?id=1')
} else if (product.name === '灾害险') {
Navigate.to('/pages/zhunongjinrong/zhunongjinrong?id=3')
} else {
Navigate.to('/pages/zhunongjinrong/zhunongjinrong')
}
}
// 查看全部助农金融产品
......
src/pages/nongchang/nongchang.vue
......@@ -335,6 +335,8 @@
function onViewFinancialServices() {
console.log('查看金融服务')
// 在这里添加具体的查看逻辑
Navigate.to('/pages/zhunongjinrong/zhunongjinrong')
}
// 查看更多农技学习
......
src/pages/zhunongjinrong/zhunongjinrong.vue
<script>
export default {
components: {},
props: {},
data() {
return {}
<script setup lang="ts">
import { reactive } from 'vue'
// 定义按钮类型
interface Button {
id: number
name: string
active: boolean
}
onLoad((options) => {
console.log('onLoad', options)
if (options.id) {
// 获取按钮信息
const button = pageData.buttons.find((btn) => btn.id === Number(options.id))
if (button) {
// 将按钮设为激活状态
handleButtonClick(button)
}
}
})
// 页面数据
const pageData = reactive({
// 顶部按钮列表
buttons: [
{ id: 1, name: '惠农贷款', active: true },
{ id: 2, name: '振兴贷款', active: false },
{ id: 3, name: '灾害保险', active: false },
{ id: 4, name: '价格保险', active: false },
{ id: 5, name: '更多服务', active: false },
],
// 惠农贷款政策信息
policyInfo: {
title: '惠农贷款政策',
description: '面向新型农业经营主体，提供便捷资金支持',
},
// 政策特点
policyFeatures: [
{
id: 1,
icon: '/static/images/codefun/65805aa8bc30e1adb6350da711c623c5.png',
value: '5-50万',
description: '额度高',
},
{
id: 2,
icon: '/static/images/codefun/80992404de789827f849f53777c64863.png',
value: '3.85%起',
description: '利率低',
},
{
id: 3,
icon: '/static/images/codefun/c67aaf6f01b1cbde47843318ac8be555.png',
value: '最长3年',
description: '期限长',
},
],
// 申请条件
applicationConditions: [
{ id: 1, text: '年龄18-65周岁，具有完全民事行为能力' },
{ id: 2, text: '具有本地户籍或有效居住证明' },
{ id: 3, text: '从事农业生产经营或农产品加工活动' },
{ id: 4, text: '信用记录良好，无不良征信记录' },
],
// 办理流程
procedures: [
{ id: 1, step: '1', title: '提交申请' },
{ id: 2, step: '2', title: '资料审核' },
{ id: 3, step: '3', title: '签约授信' },
{ id: 4, step: '4', title: '放款到账' },
],
// 申请案例统计
caseStatistics: [
{ id: 1, value: '576人', description: '本县已申请' },
{ id: 2, value: '3天', description: '平均放款' },
{ id: 3, value: '98%', description: '满意度' },
],
// 申请案例
caseExample: {
name: '李**',
certification: '农户认证',
description: '种植大户，申请20万元贷款用于扩大生产模，3天放款，节省利息8000元/年',
date: '2025.09.10',
},
})
// 按钮点击事件处理
function handleButtonClick(button: Button) {
// 将所有按钮设为非激活状态
pageData.buttons.forEach((btn) => {
btn.active = false
})
methods: {},
// 将当前点击的按钮设为激活状态
button.active = true
}
const policyInfoTitle = computed(() => {
return (pageData.buttons.filter((btn) => btn.active)?.[0]?.name || '惠农贷款') + '政策'
})
</script>
<template>
<view class="codefun-flex-col page">
<view class="codefun-mt-14 codefun-flex-col group_2">
<view class="codefun-flex-row group_3">
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
<text class="font_2 text_2">惠农贷款</text>
</view>
<view class="codefun-ml-10 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2">
<text class="font_3 text_3">振兴贷款</text>
</view>
<view class="codefun-ml-10 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2">
<text class="font_3 text_4">灾害保险</text>
</view>
<view class="codefun-ml-10 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2">
<text class="font_3 text_5">价格保险</text>
</view>
<view class="codefun-flex-row group_3 gap-2 mr-3">
<view
class="codefun-ml-10 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2 view"
v-for="button in pageData.buttons"
:key="button.id"
class="codefun-flex-col codefun-justify-start codefun-items-center"
:class="button.active ? 'text-wrapper' : 'text-wrapper_2'"
@click="handleButtonClick(button)"
>
<text class="font_3 text_5">更多服务</text>
<text :class="button.active ? 'font_2 text_2' : 'font_3'">{{ button.name }}</text>
</view>
</view>
<view class="codefun-mt-22 codefun-flex-col section_2">
<text class="codefun-self-start font text_6">惠农贷款政策</text>
<text class="codefun-self-start font_2 text_7">面向新型农业经营主体，提供便捷资金支持</text>
<view class="mt-28rpx codefun-flex-col section_2">
<text class="codefun-self-start font text_6">{{ policyInfoTitle }}</text>
<text class="codefun-self-start font_2 text_7">{{ pageData.policyInfo.description }}</text>
<view class="codefun-flex-row equal-division">
<view class="codefun-flex-col codefun-items-center section_3 equal-division-item">
<image class="image_6" src="/static/images/codefun/65805aa8bc30e1adb6350da711c623c5.png" />
<text class="font_4 mt-11">5-50万</text>
<text class="font_5 mt-11">额度高</text>
</view>
<view class="codefun-flex-col codefun-items-center section_3 equal-division-item ml-11">
<image class="image_6" src="/static/images/codefun/80992404de789827f849f53777c64863.png" />
<text class="codefun-mt-10 font_4">3.85%起</text>
<text class="codefun-mt-10 font_5">利率低</text>
</view>
<view class="codefun-flex-col codefun-items-center section_3 equal-division-item ml-11">
<image class="image_6" src="/static/images/codefun/c67aaf6f01b1cbde47843318ac8be555.png" />
<text class="codefun-mt-10 font_4">最长3年</text>
<text class="codefun-mt-10 font_6">期限长</text>
<view
v-for="feature in pageData.policyFeatures"
:key="feature.id"
class="codefun-flex-col codefun-items-center section_3 equal-division-item"
>
<image class="image_6" :src="feature.icon" />
<text class="font_4 mt-11">{{ feature.value }}</text>
<text class="font_5 mt-11">{{ feature.description }}</text>
</view>
</view>
<text class="codefun-self-start font text_8">申请条件</text>
<view class="codefun-flex-col codefun-self-stretch section_4">
<view class="codefun-flex-row codefun-items-center">
<view class="section_5" />
<text class="font_2 text_9 ml-9">年龄18-65周岁，具有完全民事行为能力</text>
</view>
<view class="codefun-flex-row codefun-items-center mt-15">
<view class="section_5" />
<text class="font_2 text_10 ml-9">具有本地户籍或有效居住证明</text>
</view>
<view class="codefun-flex-row codefun-items-center mt-15">
<view class="section_5" />
<text class="font_2 text_11 ml-9">从事农业生产经营或农产品加工活动</text>
</view>
<view class="codefun-flex-row codefun-items-center mt-15">
<view class="codefun-flex-col codefun-self-stretch section_4 gap-2">
<view
v-for="condition in pageData.applicationConditions"
:key="condition.id"
class="codefun-flex-row codefun-items-center"
>
<view class="section_5" />
<text class="font_2 text_12 ml-9">信用记录良好，无不良征信记录</text>
<text class="font_2 ml-9">{{ condition.text }}</text>
</view>
</view>
<text class="codefun-self-start font text_13">办理流程</text>
<view class="codefun-flex-col codefun-self-stretch section_6">
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_4">
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3">
<text class="font_7 text_14">1</text>
</view>
<view class="section_7" />
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3">
<text class="font_7 text_15">2</text>
</view>
<view class="section_7" />
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3">
<text class="font_7 text_16">3</text>
</view>
<view class="section_7" />
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3 view_2">
<text class="font_7 text_17">4</text>
<view
v-for="procedure in pageData.procedures"
:key="procedure.id"
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3"
>
<text class="font_7">{{ procedure.step }}</text>
</view>
</view>
<view class="codefun-flex-row codefun-justify-between mt-9">
<text class="font_8 text_18">提交申请</text>
<text class="font_8 text_19">资料审核</text>
<text class="font_8 text_20">签约授信</text>
<text class="font_8 text_21">放款到账</text>
<text v-for="procedure in pageData.procedures" :key="procedure.id" class="font_8">
{{ procedure.title }}
</text>
</view>
</view>
<text class="codefun-self-start font text_22">申请案例</text>
<view class="codefun-flex-row equal-division_2">
<view class="codefun-flex-col codefun-items-center section_8 equal-division-item_2">
<text class="font_9">576人</text>
<text class="font_5 text_23 mt-11">本县已申请</text>
</view>
<view class="codefun-flex-col codefun-items-center section_8 equal-division-item_2 ml-11">
<text class="font_9">3天</text>
<text class="font_5 text_23 mt-11">平均放款</text>
</view>
<view class="codefun-flex-col codefun-items-center section_8 equal-division-item_2 ml-11">
<text class="font_9">98%</text>
<text class="font_6 text_23 mt-11">满意度</text>
<view
v-for="statistic in pageData.caseStatistics"
:key="statistic.id"
class="codefun-flex-col codefun-items-center section_8 equal-division-item_2"
>
<text class="font_9">{{ statistic.value }}</text>
<text class="font_5 text_23 mt-11">{{ statistic.description }}</text>
</view>
</view>
<view class="codefun-flex-col codefun-self-stretch section_9">
......@@ -119,16 +181,16 @@
class="codefun-shrink-0 image_7"
src="/static/images/codefun/a3188845d5d70f8bff3e95dcca8e2ff3.png"
/>
<text class="font_2 text_24 ml-9">李**</text>
<text class="font_2 text_24 ml-9">{{ pageData.caseExample.name }}</text>
</view>
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4">
<text class="font_5 text_25">农户认证</text>
<text class="font_5 text_25">{{ pageData.caseExample.certification }}</text>
</view>
</view>
<text class="codefun-mt-10 codefun-self-stretch font_2 text_26">
种植大户，申请20万元贷款用于扩大生产模，3天放款，节省利息8000元/年
{{ pageData.caseExample.description }}
</text>
<text class="codefun-mt-10 codefun-self-start font_5 text_27">2025.09.10</text>
<text class="codefun-mt-10 codefun-self-start font_5 text_27">{{ pageData.caseExample.date }}</text>
</view>
</view>
</view>
......@@ -251,7 +313,7 @@
}
.section_2 {
margin-right: 28rpx;
padding: 16rpx 24rpx 24rpx;
padding: 24rpx 24rpx;
background-color: #ffffff;
border-radius: 17.54rpx;
mix-blend-mode: NOTTHROUGH;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论