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

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

		<scroll-view class="page" scroll-y>
				<view v-if="dataList.length === 0" class="empty-state">
					<uni-icons type="info" size="60" color="#ccc"></uni-icons>
					<text class="empty-text">暂无数据</text>
				</view>
			<view class="parkingLot-grid">
				<view class="parkingLot-item"
					:class="{ active: (checkType == '停车场' && selectedParkingLot === item.id) || (checkType == '车位编号' && selectedParkingSpace === item.id) }"
					v-for="(item, index) in dataList" :key="index" @click="selectedParking(item)">
					<text class="parkingLot-text">{{ item.name }}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onUnload
	} from '@dcloudio/uni-app'
	import {
		getResidentCarAreaManageAreaListByVillageId,
		getResidentCarAreaManageParkingListByAreaId
	} from '@/pageSubPack/api/apiSub.js'

	const statusBarHeight = ref(20)
	const checkType = ref('')
	const dataList = ref([])
	const selectedParkingLot = ref(uni.getStorageSync('parkingLotId'))
	const selectedParkingSpace = ref(uni.getStorageSync('parkingSpaceId'))
	const isSubmitting = ref(false)
	let navTimer = null
	let lockTimer = null

	onMounted(() => {
		checkType.value = uni.getStorageSync('checkType')
		if (checkType.value == '停车场') {
			loadAreaList()
		} else if (checkType.value == '车位编号') {
			loadParkingList()
		}
	})

	const loadAreaList = () => {
		let communityId = uni.getStorageSync('communityId')
		if (!communityId) return
		getResidentCarAreaManageAreaListByVillageId({
			villageId: communityId
		}).then(res => {
			if (res.code === 200) {
				dataList.value = (res.rows || []).map(item => {
					return {
						id: item.id,
						name: item.name || item.areaName || ''
					}
				})
			}else {
				uni.showToast({
					title: `${res.msg}`,
					icon: 'none'
				});
			}
		})
	}

	const loadParkingList = () => {
		let parkingLotId = uni.getStorageSync('parkingLotId')
		if (!parkingLotId) return
		getResidentCarAreaManageParkingListByAreaId({
			areaId: parkingLotId,
			
		}).then(res => {
			if (res.code === 200) {
				dataList.value = (res.rows || []).map(item => {
					console.log(item);
					return {
						id: item.id,
						name: item.name || item.parkingCode || ''
					}
				})
			}else {
				uni.showToast({
					title: `${res.msg}`,
					icon: 'none'
				});
			}
		})
	}

	const selectedParking = (item) => {
		// 防重复点击锁：处理中直接返回，避免重复选择/重复跳转
		if (isSubmitting.value) return
		isSubmitting.value = true

		try {
			if (checkType.value == '停车场') {
				selectedParkingLot.value = item.id
				uni.setStorageSync('parkingLotId', item.id)
				uni.setStorageSync('parkingLotName', item.name)
				uni.removeStorageSync('parkingSpaceId')
				uni.removeStorageSync('parkingSpaceName')
				uni.setStorageSync('checkType', '车位编号')
			} else if (checkType.value == '车位编号') {
				selectedParkingSpace.value = item.id
				uni.setStorageSync('parkingSpaceId', item.id)
				uni.setStorageSync('parkingSpaceName', item.name)
			}

			uni.showToast({
				title: '选择成功',
				icon: 'success'
			})

			navTimer = setTimeout(() => {
				goFreash()
			}, 1500)
		} finally {
			// 正常跳转后页面会销毁，防止异常时锁死
			lockTimer = setTimeout(() => {
				isSubmitting.value = false
			}, 1500)
		}
	}

	const goFreash = () => {
		if (checkType.value != '车位编号') {
			// 选完停车场后替换当前页进入选车位编号，避免压栈
			uni.redirectTo({
				url: '/pageSubPack/my/selectParingLot'
			})
		} else {
			// 选完车位编号后返回原来的 addParkingSpace
			uni.navigateBack()
		}
	}

	const goBackAdd = () => {
		if (checkType.value == "停车场") {
			uni.removeStorageSync("parkingLotId")
			uni.removeStorageSync("parkingLotName")
		} else if (checkType.value == "车位编号") {
			uni.removeStorageSync("parkingSpaceId")
			uni.removeStorageSync("parkingSpaceName")
		}
		uni.navigateBack()
	}

	// 页面销毁时清理定时器，避免手势返回后延迟跳转仍触发
	onUnload(() => {
		if (navTimer) {
			clearTimeout(navTimer)
			navTimer = null
		}
		if (lockTimer) {
			clearTimeout(lockTimer)
			lockTimer = null
		}
	})
</script>

<style lang="scss">
	page {
		background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
		overflow: hidden;
		height: 100vh;
	}
</style>

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

	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}

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

	

	.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;
	}
	.parkingLot-grid {
		/* display: flex;
		flex-wrap: wrap;
		gap: 30rpx; */
		display: grid; 
		grid-template-columns: repeat(3, 1fr);
		gap: 30rpx
		
	}

	.parkingLot-item {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border: 1rpx solid #e5e5e5;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		transition: all 0.2s ease;
		/* padding: 0 24rpx; */
		overflow: hidden;
	    min-width: 0;
	}

	.parkingLot-item.active {
		background-color: #1677ff;
		border-color: #1677ff;
	}

	.parkingLot-item.active .parkingLot-text {
		color: #fff;
	}

	.parkingLot-text {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>