jurong_circle_front_app/pages/finance/finance.vue

<template>
	<view class="finance-container">
		<u-navbar :is-back="false" title="金融理财" :border-bottom="false" :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" :key="item.id"
						@click="handleproduction(item)">
						<view class="product-name">
							{{item.productName}}
						</view>
						<view class="product-rate">
							利率：{{item.expectedReturnRate}}%
						</view>
						<view class="product-intro">
							公司：{{item.company}}
						</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, 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 => {
			if (res.data && res.data.list) {
				productList.value = productList.value.concat(res.data.list)
			}
			status.value = 'nomore'
			uni.stopPullDownRefresh()
		}).catch(err => {
			status.value = 'nomore'
			uni.stopPullDownRefresh()
		})
	}

	// 查看详情 - 传递完整产品数据
	const handleproduction = (item : any) => {
		uni.navigateTo({
			url: `/pages/finance/production?id=${item.id}`
		})
	}

	// 查询
	const handleSearch = () => {
		params.value.page = 1
		productList.value = []
		status.value = 'loadmore'
		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-name {
						font-size: 32rpx;
						font-weight: 600;
						color: #333;
						margin-bottom: 15rpx;
					}

					.product-rate {
						font-size: 28rpx;
						color: #333;
						font-weight: 500;
						margin-bottom: 20rpx;
					}

					// 移除产品简介显示 */
					.product-intro {
						font-size: 26rpx;
						color: #666;
						line-height: 1.5;
						margin-bottom: 20rpx;
						display: block; // 确保显示
					}

					.product-detail-link {
						font-size: 24rpx;
						color: #458cf9;
						text-align: right;
						padding-top: 10rpx;
					}
				}

				.box-div {
					padding: 30rpx 0rpx;
				}
			}
		}
	}
</style>