jurong_circle_front_app/pages/finance/finance.vue

<template>
	<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, onPullDownRefresh } from '@dcloudio/uni-app';
	import { financeAPI } from '../../api/finnancial';

	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<any[]>([])
	const defaultSize = 10
	const params = ref({
		page: 1,
		size: defaultSize,
		keyword: ''
	})
	const status = ref('loadmore')

	// 加载数据
	const loadData = () => {
		if (status.value == 'nomore') return
		
		financeAPI.getList(params.value).then(res => {
			console.log('API返回数据:', res)
			
			if (res.data && res.data.list) {
				// 检查数据结构并映射字段
				const mappedList = res.data.list.map((item: any) => ({
					name: item.productName || item.name || '未知产品',
					rate: item.interestRate || item.rate || '0',
					introduction: item.desc || item.introduction || item.productDesc || '暂无简介'
				}))
				
				productList.value = productList.value.concat(mappedList)
				console.log('当前产品列表:', productList.value)
			}
			
			status.value = 'nomore'
			uni.stopPullDownRefresh()
		}).catch(err => {
			console.error('API调用失败:', err)
			status.value = 'nomore'
			uni.stopPullDownRefresh()
		})
	}

	// 查看详情
	const handleproduction = (item: any) => {
		console.log('查看产品详情:', item)
		uni.navigateTo({
			url: `/pages/finance/production?name=${encodeURIComponent(item.name)}&rate=${item.rate}&intro=${encodeURIComponent(item.introduction)}`
		})
	}

	// 查询
	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()
	})

	onReady(() => {
		loadHeight()
	})
</script>

<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%);

		/* 内容滚动区域 */
		.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>