我的车位，我的车辆

property-uniapp-project/pageSubPack/my/bindHouse.vue

@@ -29,7 +29,7 @@
 					<!-- 小区名称 -->
 					<view class="community-name">
 						<text class="title-line"></text>
-						<text class="title-text">{{ item.community }}</text>
+						<text class="title-text">{{ item.villageName }}</text>
 					</view>
 					<!-- 选中对勾 -->
 					<view class="check-icon" :class="{ checked: selectedIndex === index }"></view>
@@ -66,162 +66,164 @@
 
 </template>
 
-<script>
-	export default {
-		onReady: function(e) {},
-		components: {
+<script setup>
+	import {
+		ref,
+		onMounted,
+		computed
+	} from 'vue'
+	import {
+		onReachBottom,
+		onPullDownRefresh,
+		onLoad
+	} from '@dcloudio/uni-app'
+	import {
+		getVillageList
+	} from '/pageSubPack/api/apiSub.js'
 
+	/* 设定状态栏默认高度 */
+	const statusBarHeight = 20
+	const searchKey = ref("")
+	const selectedId = ref('')
+	const selectedName = ref('')
+	const selectedIndex = ref(-1)
+
+	/* 搜索状态 */
+	const onSearch = () => {
+		// 实时过滤，computed 自动处理
+	}
+	onLoad(() => {
+
+		getList()
+	})
+	/* 房屋状态颜色映射 */
+	const statusColor = {
+		自住: "#409EFF",
+		闲置: "#67C23A",
+		租赁: "#E6A23C",
+		其他: "#909399",
+	}
+
+	/* 模拟房屋数据 */
+	const communityList = ref([{
+			id: 1,
+			villageName: "北境碧桂园小区（别墅）",
+			roomNo: "2号楼2层",
+			owner: "张三",
+			status: "自住",
 		},
-		computed: {
-			// 过滤后的列表（搜索功能）
-			filteredList() {
-				this.selectedIndex = -1
-				if (!this.searchKey.trim()) {
-					return this.houseList
+		{
+			id: 1,
+			villageName: "北境碧桂园小区（别墅）",
+			roomNo: "2号楼1层",
+			owner: "张三",
+			status: "闲置",
+		},
+	])
+
+	/* 过滤后的列表（搜索功能） */
+	const filteredList = computed(() => {
+		selectedIndex.value = -1
+		if (!searchKey.value.trim()) {
+			return communityList.value
+		}
+		return communityList.value.filter(item =>
+			item.villageName.includes(searchKey.value.trim())
+		)
+	})
+
+	/* 选择房屋 */
+	const selectHouse = (item, index) => {
+		selectedIndex.value = index
+		selectedId.value = item.id
+		selectedName.value = item.villageName + item.roomNo
+	}
+
+	/* 确定绑定 */
+	const confirmBind = () => {
+		if (selectedIndex.value === -1) {
+			return uni.showToast({
+				title: "请先选择房屋",
+				icon: "none",
+			})
+		}
+
+		uni.showModal({
+			title: "确认选择",
+			content: `确定绑定 ${selectedName.value} 吗？`,
+			success: (res) => {
+				if (res.confirm) {
+					uni.showLoading({
+						title: '绑定中...',
+						mask: true
+					})
+					setTimeout(() => {
+						uni.showToast({
+							title: '绑定成功',
+							icon: 'success'
+						})
+					}, 1000)
+					setTimeout(() => {
+						// 提交成功后跳转列表页
+						uni.hideLoading()
+						uni.setStorageSync('bindHouseId', selectedId.value)
+						uni.setStorageSync('bindHouseName', selectedName.value)
+						uni.setStorageSync('checkType', '停车场')
+						uni.removeStorageSync('paringLotId')
+						uni.removeStorageSync('paringLotName')
+						uni.removeStorageSync('parkingSpaceId')
+						uni.removeStorageSync('parkingSpaceName')
+						goNext()
+					}, 2500)
 				}
-				return this.houseList.filter(item =>
-					item.community.includes(this.searchKey.trim())
-				)
 			},
+		})
+	}
+
+	const getList = async () => {
 
 
-		},
+		try {
+			const res = await getVillageList({
 
+			})
+			console.log(res);
+			const data = res
+			communityList.value = data.data || []
 
-		created() {
-
-		},
-		onShow() {
-
-		},
-		onUnload() {
-
-		},
-		mounted() {},
-		data() {
-			return {
-				/* 设定状态栏默认高度 */
-				statusBarHeight: 20,
-				searchKey: "",
-				selectedId: '',
-				selectedName: '',
-				selectedIndex: -1, // 当前选中的索引
-				// 房屋状态颜色映射
-				statusColor: {
-					自住: "#409EFF",
-					闲置: "#67C23A",
-					租赁: "#E6A23C",
-					其他: "#909399",
-				},
-				// 模拟房屋数据
-				houseList: [{
-						id: 1,
-						community: "北境碧桂园小区（别墅）",
-						roomNo: "2号楼2层",
-						owner: "张三",
-						status: "自住",
-					},
-					{
-						id: 1,
-						community: "北境碧桂园小区（别墅）",
-						roomNo: "2号楼1层",
-						owner: "张三",
-						status: "闲置",
-					},
-				],
-
-
-			}
-		},
-
-
-		methods: {
-			// 搜索输入事件
-			onSearch() {
-				// 实时过滤，computed 自动处理
-			},
-
-			// 选择房屋
-			selectHouse(item, index) {
-				this.selectedIndex = index;
-				this.selectedId = item.id;
-				this.selectedName = item.community + item.roomNo;
-			},
-
-			// 确定绑定
-			confirmBind() {
-				if (this.selectedIndex === -1) {
-					return uni.showToast({
-						title: "请先选择房屋",
-						icon: "none",
-					});
-				}
-
-				uni.showModal({
-					title: "确认选择",
-					content: `确定绑定 ${this.selectedName} 吗？`,
-					success: (res) => {
-						if (res.confirm) {
-							uni.showLoading({
-								title: '绑定中...',
-								mask: true
-							});
-							setTimeout(() => {
-								uni.showToast({
-									title: '绑定成功',
-									icon: 'success'
-								});
-							}, 1000);
-							setTimeout(() => {
-								// 提交成功后跳转列表页
-								uni.hideLoading();
-								uni.setStorageSync('bindHouseId', this.selectedId);
-								uni.setStorageSync('bindHouseName', this.selectedName);
-								uni.setStorageSync('checkType', '停车场');
-								uni.removeStorageSync('paringLotId');
-								uni.removeStorageSync('paringLotName');
-								uni.removeStorageSync('parkingSpaceId');
-								uni.removeStorageSync('parkingSpaceName');
-								this.goNext();
-							}, 2500);
-
-
-						}
-					},
-				});
-
-
-
-			},
-
-
-			goNext() {
-				uni.redirectTo({
-					url: '/pageSubPack/my/selectParingLot',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
-			goBack() {
-				uni.redirectTo({
-					url: '/pageSubPack/my/addParkingSpace',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
-
-		},
+		} catch (err) {
+			uni.showToast({
+				title: '加载失败',
+				icon: 'none'
+			})
+			console.error('列表接口报错：', err)
+		} finally {
 
+		}
+	}
+	const goNext = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/my/selectParingLot',
+			success: res => {},
+			fail: () => {},
+			complete: () => {}
+		})
+	}
 
+	const goBack = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/my/addParkingSpace',
+			success: res => {},
+			fail: () => {},
+			complete: () => {}
+		})
 	}
 </script>
+
 <style lang="scss">
 	page {
 		background: #f9f9f9;
 		overflow: hidden;
-		// height: 100vh;
 	}
 </style>
 
@@ -230,8 +232,6 @@
 		display: flex;
 		flex-direction: column;
 		height: 100vh;
-		/* 关键：占满屏幕高度 */
-		/* background-color: #fff; */
 	}
 
 	.page {
@@ -246,8 +246,6 @@
 		padding: 20rpx 30rpx 40rpx;
 	}
 
-
-
 	/* 通用输入框样式 */
 	.input-item {
 		font-size: 30rpx;
@@ -272,55 +270,6 @@
 		margin-top: 20rpx;
 	}
 
-	/* 成功提示弹窗 */
-	.toast-mask {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background-color: transparent;
-		z-index: 9999;
-	}
-
-	.toast-content {
-		background-color: rgba(0, 0, 0, 0.8);
-		padding: 40rpx 60rpx;
-		border-radius: 8rpx;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.toast-icon {
-		width: 60rpx;
-		height: 60rpx;
-		line-height: 60rpx;
-		border-radius: 50%;
-		background-color: #fff;
-		color: #1677ff;
-		font-size: 40rpx;
-		font-weight: bold;
-		margin-bottom: 20rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.toast-text {
-		color: #fff;
-		font-size: 28rpx;
-	}
-</style>
-<style scoped>
-	/* 页面整体 */
-
-
-	/* ====================== 搜索框样式（1:1还原） ====================== */
 	/* 搜索框 */
 	.search-box {
 		display: flex;
@@ -350,8 +299,9 @@
 		color: #999;
 	}
 
-	/* ====================== 列表容器 ====================== */
+	/* 列表容器 */
 	.list-container {}
+
 	/* 空状态 */
 	.empty-state {
 		display: flex;
@@ -361,7 +311,7 @@
 		padding: 100rpx 0;
 		color: #ccc;
 	}
-	
+
 	.empty-text {
 		font-size: 32rpx;
 		color: #999;
@@ -369,7 +319,7 @@
 		margin-bottom: 10rpx;
 	}
 
-	/* ====================== 房屋卡片 ====================== */
+	/* 房屋卡片 */
 	.house-card {
 		border: 1rpx solid #e5e5e5;
 		border-radius: 12rpx;
@@ -418,21 +368,19 @@
 	.info-label {
 		width: 160rpx;
 		font-size: 28rpx;
-		/* font-weight: 600; */
 		color: #000;
 	}
 
 	.info-value {
 		font-size: 28rpx;
 		color: #333;
-		/* font-weight: 600; */
 	}
 
 	.status-text {
 		font-weight: 500;
 	}
 
-	/* ====================== 选中对勾 ====================== */
+	/* 选中对勾 */
 	.check-icon {
 		position: absolute;
 		right: 20rpx;
@@ -442,7 +390,6 @@
 		height: 52rpx;
 		border-radius: 50%;
 		border: 2rpx solid #ccc;
-		/* background-color: #ccc; */
 	}
 
 	.check-icon::after {
@@ -473,14 +420,6 @@
 		border: none;
 	}
 
-	.title-line {
-		width: 8rpx;
-		height: 36rpx;
-		background-color: #007AFF;
-		margin-right: 12rpx;
-		border-radius: 4rpx;
-	}
-
 	.status-bar {
 		width: 100vw;
 		height: 46px;