From ccbeddbb830d0be49db320035b542d6061338a27 Mon Sep 17 00:00:00 2001
From: interest <17800500956@163.com>
Date: Tue, 14 Oct 2025 14:08:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=B7=AF=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                   |  18 ++-
 pages/finance/finance.vue    | 221 +++++++++++++++++++++++++++++++-
 pages/finance/production.vue | 239 +++++++++++++++++++++++++++++++++++
 3 files changed, 474 insertions(+), 4 deletions(-)
 create mode 100644 pages/finance/production.vue

diff --git a/pages.json b/pages.json
index 1fd57af..ad1b144 100644
--- a/pages.json
+++ b/pages.json
@@ -36,12 +36,23 @@
 				"enablePullDownRefresh": true
 			}
 		},
+		
 		{
 			"path": "pages/finance/finance",
 			"style": {
-				"navigationBarTitleText": "金融"
+				"navigationBarTitleText": "金融理财",
+				"navigationStyle": "custom"
 			}
 		},
+		
+{
+			"path":"pages/finance/production",
+			"style": {
+				"navigationBarTitleText": "金融产品详情",
+				"navigationStyle": "custom"
+			}
+		},
+		
 		{
 			"path": "pages/register/register",
 			"style": {
@@ -100,6 +111,11 @@
 				}
 			}
 		}
+		
+		
+		
+		
+		
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
diff --git a/pages/finance/finance.vue b/pages/finance/finance.vue
index a0d95b0..fadfd61 100644
--- a/pages/finance/finance.vue
+++ b/pages/finance/finance.vue
@@ -1,10 +1,225 @@
 <template>
-	<Tabbar></Tabbar>
+	<view class="finance-container">
+		<u-navbar :is-back="false" title="金融理财" :background="{ background: 'transparent' }" title-color="#FFFFFF"></u-navbar>
+		<!-- 可滚动的内容区域 -->
+		<view class="content-container" :style="'height:'+height+'px'">
+			<view class="searchFilter" id="searchFilterId">
+				<view class="search">
+					<u-search :show-action="false" placeholder="输入产品名称" v-model="params.keyword" bgColor="#CADBFF"
+						@search="handleSearch"></u-search>
+				</view>
+			</view>
+
+			<view class="product-list" :style="'height:'+scrollHeight+'px'">
+				<scroll-view scroll-y="true" style="height: 100%;" v-if="productList.length!=0" @scrolltolower="loadData">
+					<view class="product-item" v-for="item in productList" >
+						
+							<view class="product-name">
+								{{item.name}}
+							</view>
+							<view class="product-rate">
+								利率：{{item.rate}}%
+							</view>
+						
+						<view class="product-intro">
+							产品简介：{{item.introduction}}
+						</view>
+						<view class="product-detail-link" @click="handleproduction" >
+							查看详情
+						</view>
+					</view>
+					<u-loadmore color="#666" :status="status" />
+					<view class="box-div"></view>
+				</scroll-view>
+
+				<view style="height: 100%;" v-else>
+					<u-empty></u-empty>
+				</view>
+			</view>
+		</view>
+
+<Tabbar id="tabbarId"></Tabbar>
+	</view>
 </template>
 
 <script setup lang="ts">
+	import { ref, computed, getCurrentInstance, onMounted } from 'vue';
+	import {
+		onReady
+	} from '@dcloudio/uni-app';
+	import { onReady as onUniReady, onPullDownRefresh } from '@dcloudio/uni-app';
+
+	const instance = getCurrentInstance();
+
+	const height = ref(0)
+	const scrollHeight = ref(0)
+
+	const loadHeight = () => {
+		uni.getSystemInfo({
+			success(res) {
+				let screenHeight = res.screenHeight
+				uni.createSelectorQuery().in(instance.proxy).select("#tabbarId").boundingClientRect((data : any) => {
+					height.value = screenHeight - data.height
+				}).exec()
+				uni.createSelectorQuery().in(instance.proxy).select("#searchFilterId").boundingClientRect((data : any) => {
+					scrollHeight.value = height.value - data.height
+				}).exec()
+			}
+		})
+	}
+	
+	
+
+	// 列表
+	const productList = ref([
+		{
+			id: 1,
+			name: '理财产品名称',
+			rate: '3.5',
+			introduction: '这是一款稳健型理财产品，适合中长期投资，风险较低，收益稳定。'
+		},
+		{
+			id: 2,
+			name: '理财产品名称',
+			rate: '4.2',
+			introduction: '这是一款成长型理财产品，适合有一定风险承受能力的投资者。'
+		},
+		{
+			id: 3,
+			name: '理财产品名称',
+			rate: '2.8',
+			introduction: '这是一款保本型理财产品，适合保守型投资者，资金安全有保障。'
+		}
+	])
+	const defaultSize = 5
+	const params = ref({
+		page: 1,
+		size: defaultSize,
+		keyword: ''
+	})
+	const status = ref('loadmore')
+	const maxPage = ref()
+
+	// 加载数据
+	const loadData = () => {
+		if (status.value == 'nomore') return
+		// 模拟API调用
+		setTimeout(() => {
+			
+			status.value = 'nomore'
+			uni.stopPullDownRefresh()
+		}, 500)
+	}
+
+	// 查看详情
+	const handleproduction = () =>{
+		uni.navigateTo({
+			url: '/pages/finance/production'
+		});
+	}
+
+	// 查询
+	const handleSearch = () => {
+		params.value = {
+			page: 1,
+			size: defaultSize,
+			keyword: params.value.keyword
+		}
+		productList.value = []
+		loadData()
+	}
+
+	// 刷新
+	onPullDownRefresh(async () => {
+		// 全局刷新
+		params.value = {
+			page: 1,
+			size: defaultSize,
+			keyword: ''
+		}
+		productList.value = []
+		loadData()
+	})
+
+	onMounted(() => {
+		loadData()
+	})
+
+	onUniReady(() => {
+		loadHeight()
+	})
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.finance-container {
+		width: 100%;
+		height: 100vh;
+		background: linear-gradient(270deg, #65A7FF 0%, #458CF9 23.08%, #3F82FF 50%, #458CF9 71.15%, #65A7FF 100%);
 
-</style>
+		/* 内容滚动区域 */
+		.content-container {
+			width: 100%;
+
+			.searchFilter {
+				background-color: transparent;
+
+				.search {
+					padding: 20rpx 42rpx 0;
+					
+				}
+			}
+
+			.product-list {
+				padding: 20rpx 30rpx;
+
+				.product-item {
+					background-color: #fff;
+					border-radius: 20rpx;
+					padding: 30rpx;
+					margin-bottom: 20rpx;
+					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+
+					.product-header {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						margin-bottom: 20rpx;
+
+						.product-name {
+							font-size: 32rpx;
+							font-weight: 600;
+							color: #333;
+							margin-bottom: 15rpx;
+						}
+
+						.product-rate {
+							font-size: 28rpx;
+							color: #ff6b6b;
+							font-weight: 500;
+							margin-bottom: 20rpx;
+						}
+					}
+
+					.product-intro {
+						font-size: 26rpx;
+						color: #666;
+						line-height: 1.5;
+						margin-bottom: 20rpx;
+					}
+
+					.product-detail-link {
+						font-size: 24rpx;
+						color: #458cf9;
+						text-align: right;
+					}
+				}
+
+				.box-div {
+					padding: 30rpx 0rpx;
+				}
+			}
+		}
+
+		
+	}
+</style>
\ No newline at end of file
diff --git a/pages/finance/production.vue b/pages/finance/production.vue
new file mode 100644
index 0000000..8fe3a05
--- /dev/null
+++ b/pages/finance/production.vue
@@ -0,0 +1,239 @@
+<template>
+	<view class="detail-container">
+		<u-navbar :is-fixed="false" title="产品详情" :background="{background: 'transparent' }" :border-bottom="false"
+			back-icon-color="#fff" title-color="#fff">
+		</u-navbar>
+
+		<!-- 产品头部信息 -->
+		<view class="product-header">
+			<view class="product-name">
+				{{productInfo.name}}
+			</view>
+			<view class="product-date">
+				开始时间：{{productInfo.startDate}}
+			</view>
+			<view class="profit-info">
+				近期盈亏：{{productInfo.recentProfit}}
+			</view>
+		</view>
+
+		<!-- 基本信息卡片 -->
+		<view class="card">
+			<u-row class="u-m-b-20">
+				<u-col span="6" class="card-name">所在地</u-col>
+				<u-col span="6" class="card-value">{{productInfo.location}}</u-col>
+			</u-row>
+			<u-row class="u-m-b-20">
+				<u-col span="6" class="card-name">详细地址</u-col>
+				<u-col span="6" class="card-value">{{productInfo.detailAddress}}</u-col>
+			</u-row>
+			<u-row class="u-m-b-20">
+				<u-col span="6" class="card-name">联系人</u-col>
+				<u-col span="6" class="card-value">{{productInfo.contactPerson}}</u-col>
+			</u-row>
+			<u-row class="u-m-b-20">
+				<u-col span="6" class="card-name">结算方式</u-col>
+				<u-col span="6" class="card-value">{{productInfo.settlementMethod}}</u-col>
+			</u-row>
+			<u-row>
+				<u-col span="6" class="card-name">产品企业</u-col>
+				<u-col span="6" class="card-value">{{productInfo.company}}</u-col>
+			</u-row>
+		</view>
+
+		<!-- 产品需求 -->
+		<view class="card">
+			<view class="card-title">
+				产品需求<span>（4）</span>
+			</view>
+			<view class="card-body">
+				<u-row class="sub-title u-m-b-20">
+					<u-col span="12">需求名称</u-col>
+				</u-row>
+				<u-row class="u-m-b-20">
+					<u-col span="6" text-align="left" class="card-name">限制</u-col>
+					<u-col span="6" class="card-value">详情</u-col>
+				</u-row>
+				<u-row class="u-m-b-20">
+					<u-col span="6" text-align="left" class="card-name">限价</u-col>
+					<u-col span="6" class="card-value">详情</u-col>
+				</u-row>
+				<u-row class="u-m-b-20">
+					<u-col span="6" text-align="left" class="card-name">时间</u-col>
+					<u-col span="6" class="card-value">详情</u-col>
+				</u-row>
+				<u-row class="u-m-b-20">
+					<u-col span="6" text-align="left" class="card-name">其他要求</u-col>
+					<u-col span="6" class="card-value">详情</u-col>
+				</u-row>
+			</view>
+		</view>
+
+		<!-- 产品动态 -->
+		<view class="card">
+			<view class="card-title">
+				产品动态
+			</view>
+			<view class="card-body">
+				<u-row class="u-m-b-20">
+					<u-col span="6" text-align="left" class="card-name">发布时间</u-col>
+					<u-col span="6" class="card-value">{{productInfo.publishDate}}</u-col>
+				</u-row>
+				<u-row>
+					<u-col span="6" text-align="left" class="card-name">年化增长</u-col>
+					<u-col span="6" class="card-value">{{productInfo.annualGrowth}}%</u-col>
+				</u-row>
+			</view>
+		</view>
+
+		<!-- 底部按钮 -->
+		<view class="bottom-actions">
+			<u-button class="consult-btn" @click="handleConsult">立即咨询</u-button>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { ref, onMounted } from 'vue';
+	import { onLoad } from '@dcloudio/uni-app'
+
+	// 产品信息
+	const productInfo = ref({
+		name: '理财产品名称',
+		startDate: '2025/09/13',
+		recentProfit: 'XXXX',
+		location: '浙江-宁波',
+		detailAddress: 'xx区xx路xxx号',
+		contactPerson: 'XXX',
+		settlementMethod: '按月结算，次月支付50%',
+		company: 'xxxx公司',
+		publishDate: '2025-09-13',
+		annualGrowth: 'x.x' // 注意：图片中是 %0x，这里调整为更合理的格式
+	})
+
+	// 立即咨询
+	const handleConsult = () => {
+		uni.showToast({
+			title: '客服即将联系您',
+			icon: 'success'
+		})
+	}
+
+	onLoad((val) => {
+		// 如果有传递产品ID，可以在这里加载具体产品数据
+		if (val.productId) {
+			// loadProductData(val.productId)
+		}
+	})
+
+	onMounted(() => {
+		// 组件挂载后的逻辑
+	})
+</script>
+
+<style scoped lang="scss">
+	.detail-container {
+		width: 100%;
+		min-height: 100vh;
+		background: linear-gradient(180deg, #2F75F9 0%, #F0F3FF 34.13%);
+		padding-bottom: 120rpx;
+
+		// 产品头部信息
+		.product-header {
+			background: transparent;
+			color: #fff;
+			padding: 40rpx 30rpx 30rpx;
+			
+			.product-name {
+				font-size: 36rpx;
+				font-weight: 600;
+				margin-bottom: 20rpx;
+				line-height: 1.4;
+			}
+			
+			.product-date {
+				font-size: 28rpx;
+				margin-bottom: 15rpx;
+				opacity: 0.9;
+			}
+			
+			.profit-info {
+				font-size: 28rpx;
+				opacity: 0.9;
+			}
+		}
+
+		// 卡片样式
+		.card {
+			margin: 20rpx 30rpx;
+			background-color: #eeeeee;
+			padding: 30rpx;
+			border-radius: 16rpx;
+			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+
+			.card-title {
+				font-size: 32rpx;
+				font-weight: 600;
+				color: #333;
+				margin-bottom: 25rpx;
+				padding-bottom: 15rpx;
+				border-bottom: 2rpx solid #f0f0f0;
+				
+				span {
+					color: #666;
+					font-size: 28rpx;
+					margin-left: 8rpx;
+				}
+			}
+
+			.card-body {
+				.sub-title {
+					font-size: 28rpx;
+					font-weight: 600;
+					color: #333;
+					padding-bottom: 15rpx;
+					border-bottom: 1rpx solid #e8e8e8;
+				}
+			}
+
+			.card-name {
+				font-size: 28rpx;
+				color: #666;
+				font-weight: 400;
+			}
+
+			.card-value {
+				font-size: 28rpx;
+				color: #333;
+				font-weight: 500;
+				text-align: right;
+			}
+		}
+
+		// 底部按钮
+		.bottom-actions {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			background: #fff;
+			padding: 20rpx 30rpx;
+			border-top: 1rpx solid #f0f0f0;
+			
+			.consult-btn {
+				background: linear-gradient(270deg, #65A7FF 0%, #458CF9 100%);
+				color: #fff;
+				border: none;
+				height: 80rpx;
+				border-radius: 40rpx;
+				font-size: 32rpx;
+				font-weight: 500;
+			}
+		}
+	}
+
+	// 通用样式调整
+	.u-m-b-20 {
+		margin-bottom: 20rpx;
+	}
+</style>
\ No newline at end of file