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
	} 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 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>