2025-09-28

pages/program/program.vue

@@ -1,16 +1,13 @@
 <template>
 	<view class="message-container">
-		<!-- 固定背景的容器 -->
-		<view class="background-container"></view>
-
 		<!-- 可滚动的内容区域 -->
 		<view class="content-container" :style="'height:'+height+'px'">
-
-			<view class="searchFilter">
+			<view class="searchFilter" id="searchFilterId">
 				<view class="search">
-					<u-search :show-action="false" placeholder="输入项目名称、企业名称" v-model="keyword"></u-search>
+					<u-search :show-action="false" placeholder="输入项目名称、企业名称" v-model="params.keyword" bgColor="#CADBFF"
+						@search="handleSearch"></u-search>
 				</view>
-				<u-dropdown :duration="0">
+				<u-dropdown :duration="0" class="dropdown">
 					<u-dropdown-item class="u-dropdown" v-model="areaFilter" title="区域筛选"
 						:options="areaOptions"></u-dropdown-item>
 					<u-dropdown-item class="u-dropdown" v-model="timeFilter" title="时间筛选"
@@ -20,33 +17,39 @@
 				</u-dropdown>
 			</view>
 
-			<view class="program-list">
-				<view class="program-item" v-for="item in programList" @click="handleDetail(item)">
-					<view class="program-avatar">
-						<image style="width: 100%;height: 100%;border-radius: 50%;" src="/static/ceshi_avatar.jpg"
-							mode=""></image>
-					</view>
-					<view class="program-info">
-						<view class="program-name">
-							{{item.programName}}
+			<view class="program-list" :style="'height:'+scrollHeight+'px'">
+				<scroll-view scroll-y="true" style="height: 100%;" v-if="programList.length!=0" @scrolltolower="loadData">
+					<view class="program-item" v-for="item in programList" @click="handleDetail(item)">
+						<view class="program-avatar">
+							<image style="width: 100%;height: 100%;border-radius: 50%;"
+								:src="getImageUrl(item.user.avatar)" mode=""></image>
 						</view>
-						<view class="company-name">
-							{{item.companyName}}
-						</view>
-						<view class="program-address">
-							项目地点：{{item.programAddress}}
-						</view>
-						<view class="program-contact">
-							项目联系人：{{item.contact}}
-						</view>
-						<view class="program-introduction">
-							项目简介：{{item.introduction}}
+						<view class="program-info">
+							<view class="program-name">
+								{{item.name}}
+							</view>
+							<view class="company-name">
+								{{item.company}}
+							</view>
+							<view class="program-address">
+								项目地点：{{item.address}}
+							</view>
+							<view class="program-contact">
+								项目联系人：{{maskPhoneNumber(item.user.username)}}
+							</view>
+							<view class="program-introduction">
+								项目简介：{{item.introduction}}
+							</view>
 						</view>
 					</view>
+					<u-loadmore :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>
@@ -54,14 +57,17 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, computed, getCurrentInstance } from 'vue';
+	import { ref, computed, getCurrentInstance, onMounted } from 'vue';
 	import {
 		onReady
 	} from '@dcloudio/uni-app';
-	import { onReady as onUniReady } from '@dcloudio/uni-app';
+	import { onReady as onUniReady, onPullDownRefresh } from '@dcloudio/uni-app';
+	import { programAPI } from '../../api/program';
+	import { getImageUrl, maskPhoneNumber } from '../../util/common';
 	const instance = getCurrentInstance();
 
 	const height = ref(0)
+	const scrollHeight = ref(0)
 
 	const loadHeight = () => {
 		uni.getSystemInfo({
@@ -70,6 +76,9 @@
 				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()
 			}
 		})
 	}
@@ -122,74 +131,99 @@
 
 	// 列表
 	const programList = ref([])
+	const defaultSize = 5
+	const params = ref({
+		page: 1,
+		size: defaultSize,
+		keyword: ''
+	})
+	const status = ref('loadmore')
+	const maxPage = ref()
 
-	const mockData = () => {
-		for (var i = 0; i < 20; i++) {
-			programList.value.push({
-				programName: "项目名称" + (i + 1),
-				companyName: "公司名称" + (i + 1),
-				programAddress: "xx省xx市xxx区",
-				contact: "联系人" + (i + 1),
-				introduction: "在 Vue 3 + TypeScript 中使用 v-for=item in Range(1,20)报错，是因为 JavaScript/TypeScript 中没有内置 Range 函数（这是 Python 中的语法）。需要自己实现一个范围生成函数，并在模板中使用。"
-			})
-		}
-	}
-	const handleDetail = (item) => {
-		uni.navigateTo({
-			url: '/pages/program/programDetail'
+	// 加载数据
+	const loadData = () => {
+		if (status.value == 'nomore') return
+		programAPI.getList(params.value).then(res => {
+			programList.value = programList.value.concat(res.data.list)
+			maxPage.value = res.data.pages
+			params.value.page++
+			if (params.value.page > maxPage.value) {
+				status.value = 'nomore'
+			}
+		}).finally(() => {
+			uni.stopPullDownRefresh()
 		})
 	}
 
+	// 查看详情
+	const handleDetail = (item) => {
+		uni.navigateTo({
+			url: '/pages/program/programDetail?programId=' + item.id
+		})
+	}
+
+	// 查询
+	const handleSearch = () => {
+		params.value = {
+			page: 1,
+			size: defaultSize,
+			keyword: params.value.keyword
+		}
+		programList.value = []
+		loadData()
+	}
+
+	// 刷新
+	onPullDownRefresh(async () => {
+		// 全局刷新
+		params.value = {
+			page: 1,
+			size: defaultSize,
+			keyword: ''
+		}
+		programList.value = []
+		loadData()
+	})
+
+	onMounted(() => {
+		loadData()
+	})
+
 	onUniReady(() => {
 		loadHeight()
-		mockData()
 	})
 </script>
 
 <style lang="scss" scoped>
 	.message-container {
 		width: 100%;
-		position: fixed;
-		top: 0;
-		left: 0;
-		height: 100%;
-		overflow: hidden;
-		/* 防止容器本身滚动 */
-
-		/* 固定背景 */
-		.background-container {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			background: #F0F3FF;
-			z-index: 1;
-			/* 确保背景在内容下方 */
-		}
+		height: 100vh;
+		background: linear-gradient(270deg, #65A7FF 0%, #458CF9 23.08%, #3F82FF 50%, #458CF9 71.15%, #65A7FF 100%);
 
 		/* 内容滚动区域 */
 		.content-container {
-			position: relative;
-			z-index: 2;
-			/* 确保内容在背景上方 */
 			width: 100%;
-			overflow-y: scroll;
-			height: 100%;
 
 			.searchFilter {
-				background-color: #fff;
+				background-color: transparent;
 
 				.search {
 					padding: 60rpx 42rpx 0;
 				}
 			}
 
+			::v-deep .dropdown {
+				.u-dropdown__menu__item__text {
+					color: #fff !important;
+				}
+			}
+
 			.program-list {
 				margin-top: 20rpx;
 
 				.program-item {
-					background-color: #fff;
+					background-color: #F0F3FF;
+					border-radius: 20rpx;
 					padding: 20rpx 42rpx;
 					margin-bottom: 20rpx;
 
@@ -270,6 +304,10 @@
 						}
 					}
 				}
+
+				.box-div {
+					padding: 30rpx 0rpx;
+				}
 			}
 		}
 	}