property-resident-side/property-uniapp-project/pageSubPack/my/selectResidentialCommunity.vue

<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar title="选择小区" left-icon="left" @clickLeft="goBackAdd" backgroundColor="transparent" :border="false">
		</uni-nav-bar>


		<scroll-view class="page" scroll-y>
			<!-- 搜索框 -->
			<view class="search-box">
				<input class="search-input" v-model="searchKey" placeholder="请输入名称"
					placeholder-class="input-placeholder" @input="onSearch" />
				<uni-icons type="search" size="20" color="#999" />
			</view>
			<!-- 小区列表 -->
			<view class="community-list">
				<view v-if="filteredList.length === 0" class="empty-state">
					<uni-icons type="info" size="60" color="#ccc"></uni-icons>
					<text class="empty-text">
						{{ '暂无数据'}}
					</text>
				</view>
				<view class="community-item" v-for="(item, index) in filteredList" :key="index"
					@click="selectCommunity(item)">
					<text class="community-name">{{ item.villageName }}</text>
					<text class="item-arrow"></text>
				</view>
			</view>
		</scroll-view>
	</view>



</template>


<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue'
	import {
		onReachBottom,
		onPullDownRefresh,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getVillageList
	} from '/pageSubPack/api/apiSub.js'



	const sourcePage = ref('')
	const searchKey = ref('')
	const communityList = ref([])
	// const refreshing = ref(false)
	const filteredList = computed(() => {
		if (!searchKey.value.trim()) {
			return communityList.value
		}
		return communityList.value.filter(item =>
			item.villageName.includes(searchKey.value.trim())
		)

	})




	onLoad((option) => {
		sourcePage.value = option.sourcePage;
		getList()
	})

	// ==================== 获取列表数据 ====================


	const getList = async () => {


		try {
			const res = await getVillageList({

			})
			console.log(res);
			const data = res
			communityList.value = data.data || []

		} catch (err) {
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
			console.error('列表接口报错：', err)
		} finally {

		}
	}

	// 搜索输入事件
	const onSearch = () => {
		// 实时过滤，computed 自动处理
	}

	// 选择小区
	const selectCommunity = (item) => {
		uni.setStorageSync('communityId', item.villageId);
		uni.setStorageSync('communityName', item.villageName);
		uni.setStorageSync('checkType', '楼栋');
		uni.removeStorageSync('buildingId');
		uni.removeStorageSync('buildingName');
		uni.removeStorageSync('unitId');
		uni.removeStorageSync('unitName');
		uni.removeStorageSync('floorId');
		uni.removeStorageSync('floorName');
		uni.removeStorageSync('houseNumberId');
		uni.removeStorageSync('houseNumberName');

		uni.removeStorageSync('bindHouseId');
		uni.removeStorageSync('bindHouseName');
		uni.removeStorageSync('parkingLotId');
		uni.removeStorageSync('parkingLotName');
		uni.removeStorageSync('parkingSpaceId');
		uni.removeStorageSync('parkingSpaceName');
		console.log(sourcePage.value);
		if (sourcePage.value == 'addHouse') {
			uni.navigateTo({
				url: '/pageSubPack/my/selectBuilding',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		} else if (sourcePage.value == 'addParkingSpace') {
			uni.setStorageSync('checkType', '停车场')
			uni.navigateTo({
				// url: '/pageSubPack/my/bindHouse',
				url: '/pageSubPack/my/selectParingLot',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		} else {

		}

	}
	const goBackAdd = () => {
		uni.removeStorageSync('communityId');
		uni.removeStorageSync('communityName');
		if (sourcePage.value == 'addHouse') {
			uni.navigateTo({
				url: '/pageSubPack/my/addHouse',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		} else if (sourcePage.value == 'addParkingSpace') {
			uni.navigateTo({
				url: '/pageSubPack/my/addParkingSpace',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		} else {

		}
	}
</script>


<style lang="scss">
	page {
		background: #f6f6f6;
		overflow: hidden;
		height: 100vh;
	}
</style>

<style scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 关键：占满屏幕高度 */
		background-color: #fff;
	}

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 40rpx;
		box-sizing: border-box;
	}

	/* 底部按钮 */
	/* .bottom-btn {
		padding: 20rpx 30rpx 40rpx;
	} */

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		color: #ccc;
	}

	.empty-text {
		font-size: 32rpx;
		color: #999;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}

	/* 搜索框 */
	.search-box {
		display: flex;
		align-items: center;
		background-color: #F3F3F3;
		border-radius: 20rpx;
		margin: 0rpx 0px 20rpx 0px;
		padding: 0 30rpx;
		height: 70rpx;
	}

	.search-input {
		flex: 1;
		height: 100%;
		font-size: 30rpx;
		border: none;
		background: transparent;
	}

	.input-placeholder {
		color: #999;
		font-size: 30rpx;
	}

	.search-icon {
		font-size: 36rpx;
		color: #999;
	}

	/* 小区列表 */
	.community-list {
		/* padding: 0 30rpx; */
	}

	.community-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}



	.community-name {
		font-size: 32rpx;
		color: #000;
		font-weight: 500;
	}

	.item-arrow {
		display: inline-block;
		width: 10rpx;
		height: 10rpx;
		border-top: 2rpx solid #999;
		border-right: 2rpx solid #999;
		transform: rotate(45deg);
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.status-bar {
		width: 100vw;
		height: 46px;
	}
</style>