我的车位，我的车辆

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

@@ -1,254 +1,166 @@
 <template>
-	<view class="contentStyle" style="">
+	<view class="contentStyle">
 		<view class="status-bar"></view>
-		<uni-nav-bar :title="'选择'+checkType" left-icon="left" @clickLeft="goBackAdd" backgroundColor="transparent"
+		<uni-nav-bar :title="'选择' + checkType" left-icon="left" @clickLeft="goBackAdd" backgroundColor="transparent"
 			:border="false">
 		</uni-nav-bar>
 
 		<scroll-view class="page" scroll-y>
-			<!-- 停车场网格列表 -->
-
-			<view class="parkingLot-grid">
 				<view v-if="dataList.length === 0" class="empty-state">
 					<uni-icons type="info" size="60" color="#ccc"></uni-icons>
-					<text class="empty-text">
-						{{ '暂无数据'}}
-					</text>
+					<text class="empty-text">暂无数据</text>
 				</view>
+			<view class="parkingLot-grid">
 				<view class="parkingLot-item"
-					:class="{ active:(checkType=='停车场'&& selectedParkingLot === item.id)||(checkType=='车位编号'&& selectedParkingSpace === item.id)}"
+					: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>
-	export default {
-		onReady: function(e) {},
-		components: {
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	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'))
 
-		computed: {
-
-
-		},
-		created() {
-
-		},
-		onShow() {
-
-		},
-		onUnload() {},
-		mounted() {
-
-			if (this.checkType == '停车场') {
-				this.dataList = this.parkingLotList
-
-			} else if (this.checkType == '车位编号') {
-				this.dataList = this.parkingSpaceList
+	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: 'error'
+				});
 			}
-		},
-		data() {
-			return {
-				/* 设定状态栏默认高度 */
-				statusBarHeight: 20,
-				checkType: uni.getStorageSync('checkType'),
-				dataList: [],
-				// 停车场列表（可动态生成/接口返回）
-				parkingLotList: [{
-						id: 1,
-						name: '地上停车场'
-					},
-					{
-						id: 2,
-						name: '地下停车场'
-					},
-
-				],
-
-				parkingSpaceList: [{
-						id: 13,
-						name: '01'
-					},
-					{
-						id: 14,
-						name: '02'
-					},
-					{
-						id: 15,
-						name: '03'
-					},
-					{
-						id: 16,
-						name: '04'
-					}, {
-						id: 17,
-						name: '05'
-					},
-					{
-						id: 18,
-						name: '06'
-					},
-					{
-						id: 19,
-						name: '07'
-					},
-					{
-						id: 20,
-						name: '08'
-					}, {
-						id: 21,
-						name: '09'
-					},
-					{
-						id: 22,
-						name: '10'
-					},
-					{
-						id: 23,
-						name: '11'
-					},
-					{
-						id: 24,
-						name: '12'
-					}, {
-						id: 25,
-						name: '13'
-					},
-					{
-						id: 26,
-						name: '14'
-					},
-					{
-						id: 27,
-						name: '15'
-					},
-					{
-						id: 28,
-						name: '16'
-					},
-					{
-						id: 29,
-						name: '17'
-					},
-					{
-						id: 30,
-						name: '18'
-					},
-					{
-						id: 31,
-						name: '19'
-					},
-					{
-						id: 32,
-						name: '20'
-					},
-
-				],
-
-				// 选中的停车场
-				selectedParkingLot: uni.getStorageSync('parkingLotId'),
-				// 选中的车位编号
-				selectedParkingSpace: uni.getStorageSync('parkingSpaceId'),
-
-
+		})
+	}
 
+	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: 'error'
+				});
 			}
-		},
-		methods: {
-			selectedParking(item) {
-				if (this.checkType == '停车场') {
-					this.selectedParkingLot = item.id
-				} else if (this.checkType == '车位编号') {
-					this.selectedParkingSpace = item.id
-
-				}
-				let modalContent = '确认选择此' + this.checkType + '吗?'
-				uni.showModal({
-					title: "确认选择",
-					content: modalContent,
-					success: (res) => {
-						if (res.confirm) {
-							uni.showLoading({
-								title: '选择中...',
-								mask: true
-							});
-							setTimeout(() => {
-								uni.showToast({
-									title: '选择成功',
-									icon: 'success'
-								});
-								if (this.checkType == '停车场') {
-									uni.setStorageSync('parkingLotId', item.id);
-									uni.setStorageSync('parkingLotName', item.name);
-									uni.removeStorageSync('parkingSpaceId');
-									uni.removeStorageSync('parkingSpaceName');
-									uni.setStorageSync('checkType', '车位编号');
-								} else if (this.checkType == '车位编号') {
-									uni.setStorageSync('parkingSpaceId', item.id);
-									uni.setStorageSync('parkingSpaceName', item.name);
-								}
-							}, 1000);
-							setTimeout(() => {
-								// 提交成功后跳转列表页
-								uni.hideLoading();
-								this.goFreash()
-							}, 2500);
+		})
+	}
 
+	const selectedParking = (item) => {
+		if (checkType.value == '停车场') {
+			selectedParkingLot.value = item.id
+		} else if (checkType.value == '车位编号') {
+			selectedParkingSpace.value = item.id
+		}
 
+		uni.showModal({
+			title: "确认选择",
+			content: '确认选择此' + checkType.value + '吗?',
+			success: (res) => {
+				if (res.confirm) {
+					uni.showLoading({
+						title: '选择中...',
+						mask: true
+					})
+					setTimeout(() => {
+						uni.showToast({
+							title: '选择成功',
+							icon: 'success'
+						})
+						console.log(checkType.value);
+						
+						if (checkType.value == '停车场') {
+							uni.setStorageSync('parkingLotId', item.id)
+							uni.setStorageSync('parkingLotName', item.name)
+							uni.removeStorageSync('parkingSpaceId')
+							uni.removeStorageSync('parkingSpaceName')
+							uni.setStorageSync('checkType', '车位编号')
+						} else if (checkType.value == '车位编号') {
+							console.log(item.id);
+							uni.setStorageSync('parkingSpaceId', item.id)
+							uni.setStorageSync('parkingSpaceName', item.name)
 						}
-					},
-				});
-
-			},
-			goFreash() {
-				if (this.checkType != '车位编号') {
-					uni.redirectTo({
-						url: '/pageSubPack/my/selectParingLot',
-						success: res => {},
-						fail: () => {},
-						complete: () => {}
-					});
-				} else {
-					uni.redirectTo({
-						url: '/pageSubPack/my/addParkingSpace',
-						success: res => {},
-						fail: () => {},
-						complete: () => {}
-					});
-				}
-			},
-			goBackAdd() {
-				if (this.checkType == '停车场') {
-					uni.removeStorageSync('parkingLotId');
-					uni.removeStorageSync('parkingLotName');
-				} else if (this.checkType == '车位编号') {
-					uni.removeStorageSync('parkingSpaceId');
-					uni.removeStorageSync('parkingSpaceName');
+					}, 1000)
+					setTimeout(() => {
+						uni.hideLoading()
+						goFreash()
+					}, 2500)
 				}
+			}
+		})
+	}
 
-				uni.redirectTo({
-					url: '/pageSubPack/my/addParkingSpace',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
-
-		},
-
+	const goFreash = () => {
+		if (checkType.value != '车位编号') {
+			uni.redirectTo({
+				url: '/pageSubPack/my/selectParingLot'
+			})
+		} else {
+			uni.redirectTo({
+				url: '/pageSubPack/my/addParkingSpace'
+			})
+		}
+	}
 
+	const goBackAdd = () => {
+		if (checkType.value == '停车场') {
+			uni.removeStorageSync('parkingLotId')
+			uni.removeStorageSync('parkingLotName')
+		} else if (checkType.value == '车位编号') {
+			uni.removeStorageSync('parkingSpaceId')
+			uni.removeStorageSync('parkingSpaceName')
+		}
+		uni.redirectTo({
+			url: '/pageSubPack/my/addParkingSpace'
+		})
 	}
 </script>
+
 <style lang="scss">
 	page {
 		background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
@@ -258,12 +170,15 @@
 </style>
 
 <style scoped>
+	.status-bar {
+		width: 100vw;
+		height: 46px;
+	}
+
 	.contentStyle {
 		display: flex;
 		flex-direction: column;
 		height: 100vh;
-		/* 关键：占满屏幕高度 */
-		/* background-color: #fff; */
 	}
 
 	.page {
@@ -273,21 +188,13 @@
 		box-sizing: border-box;
 	}
 
-	/* 底部按钮 */
-	.bottom-btn {
-		padding: 20rpx 30rpx 40rpx;
-	}
-
-
-
-	/* 网格布局：3列 */
 	.parkingLot-grid {
 		display: grid;
+		
 		grid-template-columns: repeat(3, 1fr);
 		gap: 30rpx;
 	}
 
-	/* 空状态 */
 	.empty-state {
 		display: flex;
 		flex-direction: column;
@@ -304,7 +211,6 @@
 		margin-bottom: 10rpx;
 	}
 
-	/* 停车场按钮 */
 	.parkingLot-item {
 		height: 100rpx;
 		display: flex;
@@ -317,7 +223,6 @@
 		transition: all 0.2s ease;
 	}
 
-	/* 选中状态 */
 	.parkingLot-item.active {
 		background-color: #1677ff;
 		border-color: #1677ff;
@@ -327,59 +232,9 @@
 		color: #fff;
 	}
 
-	/* 停车场文字 */
 	.parkingLot-text {
 		font-size: 32rpx;
 		color: #333;
 		font-weight: 500;
 	}
-
-	/* 成功提示弹窗 */
-	.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;
-	}
-
-	.status-bar {
-		width: 100vw;
-		height: 46px;
-	}
 </style>