jurong_circle_front_app/pages/program/program.vue

<template>
	<view class="message-container">
		<!-- 可滚动的内容区域 -->
		<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>
				<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="时间筛选"
						:options="timeOptions"></u-dropdown-item>
					<u-dropdown-item class="u-dropdown" v-model="typeFilter" title="类型筛选"
						:options="typeOptions"></u-dropdown-item>
				</u-dropdown>
			</view>

			<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="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 color="#fff" :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';
	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({
			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 keyword = ref('')
	const areaFilter = ref('')
	const timeFilter = ref('')
	const typeFilter = ref('')

	const areaOptions = [
		{
			label: '默认排序',
			value: 1,
		},
		{
			label: '距离优先',
			value: 2,
		},
		{
			label: '价格优先',
			value: 3,
		}]
	const timeOptions = [
		{
			label: '默认排序',
			value: 1,
		},
		{
			label: '距离优先',
			value: 2,
		},
		{
			label: '价格优先',
			value: 3,
		}]
	const typeOptions = [
		{
			label: '默认排序',
			value: 1,
		},
		{
			label: '距离优先',
			value: 2,
		},
		{
			label: '价格优先',
			value: 3,
		}]

	// 列表
	const programList = ref([])
	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
		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()
	})
</script>

<style lang="scss" scoped>
	.message-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: 80rpx 42rpx 0;
				}
			}

			::v-deep .dropdown {
				.u-dropdown__menu__item__text {
					color: #fff !important;
				}
			}

			.program-list {
				margin-top: 20rpx;

				.program-item {
					background-color: #F0F3FF;
					border-radius: 20rpx;
					padding: 20rpx 42rpx;
					margin-bottom: 20rpx;

					display: flex;

					.program-avatar {
						width: 20%;
						width: 100rpx;
						height: 100rpx;
					}

					.program-info {
						width: 80%;
						margin-left: 20rpx;

						.program-name {
							font-family: SF Pro;
							font-weight: 400;
							font-style: Regular;
							font-size: 32rpx;
							leading-trim: NONE;
							line-height: 48rpx;
							letter-spacing: 0%;
							margin-bottom: 10rpx;
						}

						.company-name {
							font-family: Work Sans;
							font-weight: 400;
							font-size: 26rpx;
							leading-trim: NONE;
							line-height: 100%;
							letter-spacing: -2%;
							margin-bottom: 10rpx;
						}

						.program-address {
							font-family: Work Sans;
							font-weight: 300;
							font-style: Light;
							font-size: 24rpx;
							leading-trim: NONE;
							line-height: 100%;
							letter-spacing: -2%;
							color: #000;
							margin-bottom: 10rpx;
						}

						.program-contact {
							font-family: Work Sans;
							font-weight: 300;
							font-style: Light;
							font-size: 20rpx;
							leading-trim: NONE;
							line-height: 100%;
							letter-spacing: -2%;
							color: #000;
							margin-bottom: 10rpx;
						}

						.program-introduction {
							font-family: Work Sans;
							font-weight: 400;
							font-size: 20rpx;
							leading-trim: NONE;
							line-height: 100%;
							letter-spacing: -2%;
							color: #000;
							margin-bottom: 10rpx;

							/* 关键样式 */
							white-space: nowrap;
							/* 不换行 */
							overflow: hidden;
							/* 超出隐藏 */
							text-overflow: ellipsis;
							/* 显示省略号 */
						}
					}
				}

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