我的车位，我的车辆

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

@@ -1,192 +1,218 @@
 <template>
-	<view class="contentStyle" style="">
+	<view class="contentStyle">
 		<view class="status-bar"></view>
 		<uni-nav-bar title="绑定车辆" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
 		</uni-nav-bar>
 
-
-
-		<!-- 表单区域 -->
 		<scroll-view class="page" scroll-y>
 			<view v-if="carList.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="car-item" v-for="(item, index) in carList" :key="index" @click="handleItemClick(item,index)"
+			<view class="car-item" v-for="(item, index) in carList" :key="index" @click="handleItemClick(item, index)"
 				:class="{ checked: selectedIndex === index }">
-				<!-- 左侧圆形占位 -->
-				<image :src="item.imgSrc" mode="aspectFill" class="car-avatar" @error="item.imgSrc = defaultCarImg" />
-				<!-- 中间车辆信息 -->
+				<image :src="item.carImageUrl" mode="aspectFill" class="car-avatar"
+					@error="item.carImageUrl = defaultCarImg" />
 				<view class="car-info">
-					<view class="car-plate">{{ item.plate }}</view>
-					<view class="car-model">{{ item.model }}·{{ item.color }}</view>
-				</view>
-
-				<!-- 右侧状态标签 -->
-				<view class="status-tag" :class="{ bound: item.status === '已绑定', unbound: item.status === '未绑定' }">
-					{{ item.status }}
+					<view class="car-plate">{{ item.carNum }}</view>
+					<view class="car-model">{{ item.carBrand }}·{{ item.carColor }}</view>
+					<view class="car-bindParkingSpace">{{ item.bindParkingSpace }}</view>
 				</view>
+				<!-- <view class="status-tag"
+					:class="{ underReview: item.certificationStatus === '审核中', unbound: item.certificationStatus === '未绑定', bounded: item.certificationStatus === ''}">
+					{{ item.certificationStatus }}
+				</view> -->
 			</view>
-
-
 		</scroll-view>
-		<!-- 底部确定绑定按钮 -->
 		<view class="bottom-btn">
 			<button class="confirm-btn" @click="confirmBind">确定绑定</button>
 		</view>
-
-
 	</view>
-
-
-
-
 </template>
 
-<script>
-	export default {
-		onReady: function(e) {},
-		components: {
+<script setup>
+	import {
+		ref,
+		onMounted,
 
-		},
+	} from 'vue'
+	import {
+		onReachBottom,
+		onPullDownRefresh
+	} from '@dcloudio/uni-app'
+	import {
+		getMyCarList,
+		postCarBind
+	} from '@/pageSubPack/api/apiSub.js'
 
-		computed: {
+	const statusBarHeight = ref(20)
+	const defaultCarImg = "http://47.104.199.163:9090/images/propertyImgs/defaultCarImg.png"
+	const selectedId = ref('')
+	const selectedName = ref('')
+	const selectedIndex = ref(-1)
+	const carList = ref([])
 
+	const loadingMore = ref(false)
+	const noMoreData = ref(false)
 
-		},
+	const pageNum = ref(1)
+	const pageSize = ref(10)
+	// ==================== 获取列表数据 ====================
+	const getList = async () => {
+		// 防重复请求
 
-		created() {
+		if (loadingMore.value || noMoreData.value) return
 
-		},
-		onShow() {
-
-		},
-		onUnload() {
-
-		},
-		mounted() {},
-		data() {
-			return {
-				/* 设定状态栏默认高度 */
-				statusBarHeight: 20,
-				defaultCarImg: "http://47.104.199.163:9090/images/propertyImgs/defaultCarImg.png",
-				searchKey: "",
-				selectedId: '',
-				selectedName: '',
-				selectedIndex: -1, // 当前选中的索引
-
-				// 模拟车辆数据
-				carList: [{
-						id: '1',
-						imgSrc: 'http://47.104.199.163:9090/images/propertyImgs/carImg.png',
-						plate: "京A88888",
-						model: "宝马X5",
-						color: "白色",
-						status: "已绑定"
-					},
-					{
-						id: '2',
-						imgSrc: 'https://错误地址2.png',
-						plate: "京A88888",
-						model: "宝马X5",
-						color: "白色",
-						status: "未绑定"
-					},
-					{
-						id: '3',
-						imgSrc: 'https://错误地址3.png',
-						plate: "京A88888",
-						model: "宝马X5",
-						color: "白色",
-						status: "未绑定"
-					}
-				]
+		loadingMore.value = true
+		try {
+			const res = await getMyCarList({
+				pageNum: pageNum.value,
+				pageSize: pageSize.value,
+				residentId: uni.getStorageSync('userId')
+			})
 
+			const data = res
+			const newList = data.rows || []
 
+			// 第一页 → 覆盖数据
+			if (pageNum.value === 1) {
+				carList.value = newList
+			} else {
+				// 后续页 → 追加数据
+				carList.value = [...carList.value, ...newList]
 			}
-		},
+			// 判断是否没有更多数据
+			if (newList.length < pageSize.value) {
+				noMoreData.value = true
+			} else {
+				pageNum.value++
+			}
+		} catch (err) {
+			uni.showToast({
+				title: '加载失败',
+				icon: 'none'
+			})
+			console.error('列表接口报错：', err)
+		} finally {
+			loadingMore.value = false
+			uni.stopPullDownRefresh() // 关闭下拉刷新
+		}
+	}
+
+	// ==================== 上拉加载更多（页面生命周期） ====================
+	onReachBottom(() => {
+		getList()
+	})
+
+	// ==================== 下拉刷新 ====================
+	const refresh = () => {
+		// 重置所有状态
+		pageNum = 1
+		pageSize = 10
+		noMoreData = false
+		carList = []
+		loadingMore = false
+		getList()
+	}
+	onPullDownRefresh(() => {
+		refresh()
+	})
+
+	// 页面加载时请求第一页
+	onMounted(() => {
+		getList()
+	})
 
 
-		methods: {
+	const handleItemClick = (item, index) => {
+		selectedIndex.value = index
+		selectedId.value = item.id
+		selectedName.value = item.carNum
+	}
 
-			// 选择绑定车辆
-			handleItemClick(item, index) {
-				this.selectedIndex = index;
-				this.selectedId = item.id;
-				this.selectedName = item.plate;
-			},
+	const confirmBind = () => {
+		if (selectedIndex.value === -1) {
+			return uni.showToast({
+				title: "请先选择绑定车辆",
+				icon: "none"
+			})
+		}
 
-			// 确定绑定
-			confirmBind() {
-				if (this.selectedIndex === -1) {
-					return uni.showToast({
-						title: "请先选择绑定车辆",
-						icon: "none",
-					});
+		uni.showModal({
+			title: "确认选择",
+			content: `确定绑定该车辆吗？`,
+			success: (res) => {
+				if (res.confirm) {
+					uni.showLoading({
+						title: '绑定中...',
+						mask: true
+					})
+					setTimeout(() => {
+						uni.showToast({
+							title: '绑定成功',
+							icon: 'success'
+						})
+					}, 500)
+					setTimeout(() => {
+						uni.showToast({
+							title: '绑定成功',
+							icon: 'success'
+						})
+						uni.setStorageSync('bindCarId', selectedId.value)
+						uni.setStorageSync('bindCarName', selectedName.value)
+						goBack()
+					}, 1500)
+					// postCarBind({
+					// 	carId: selectedId.value
+					// }).then(bindRes => {
+					// 	uni.hideLoading()
+					// 	if (bindRes.code === 200) {
+					// 		uni.showToast({
+					// 			title: '绑定成功',
+					// 			icon: 'success'
+					// 		})
+					// 		setTimeout(() => {
+					// 			uni.setStorageSync('bindCarId', selectedId.value)
+					// 			uni.setStorageSync('bindCarName', selectedName.value)
+					// 			goBack()
+					// 		}, 1500)
+					// 	} else {
+					// 		uni.showToast({
+					// 			title: bindRes.msg || '绑定失败',
+					// 			icon: 'none'
+					// 		})
+					// 	}
+					// })
 				}
+			}
+		})
+	}
 
-				uni.showModal({
-					title: "确认选择",
-					content: `确定绑定该车辆吗？`,
-					success: (res) => {
-						if (res.confirm) {
-							uni.showLoading({
-								title: '绑定中...',
-								mask: true
-							});
-							setTimeout(() => {
-								uni.showToast({
-									title: '绑定成功',
-									icon: 'success'
-								});
-							}, 1000);
-							setTimeout(() => {
-								// 提交成功后跳转列表页
-								uni.hideLoading();
-								uni.setStorageSync('bindCarId', this.selectedId);
-								uni.setStorageSync('bindCarName', this.selectedName);
-								this.goBack();
-							}, 2500);
-
-
-
-
-						}
-					},
-				});
-			},
-			goBack() {
-				uni.redirectTo({
-					url: '/pageSubPack/my/addParkingSpace',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-			},
-
-		},
-
-
+	const goBack = () => {
+		uni.redirectTo({
+			url: '/pageSubPack/my/addParkingSpace'
+		})
 	}
 </script>
+
 <style lang="scss">
 	page {
 		background: #f9f9f9;
 		overflow: hidden;
-		// height: 100vh;
 	}
 </style>
 
 <style scoped>
+	.status-bar {
+		width: 100vw;
+		height: 46px;
+	}
+
 	.contentStyle {
 		display: flex;
 		flex-direction: column;
 		height: 100vh;
-		/* 关键：占满屏幕高度 */
-		/* background-color: #fff; */
 	}
 
 	.page {
@@ -196,7 +222,6 @@
 		box-sizing: border-box;
 	}
 
-	/* 空状态 */
 	.empty-state {
 		display: flex;
 		flex-direction: column;
@@ -213,96 +238,10 @@
 		margin-bottom: 10rpx;
 	}
 
-	/* 底部按钮 */
 	.bottom-btn {
 		padding: 20rpx 30rpx 40rpx;
 	}
 
-
-
-
-
-	/* 通用输入框样式 */
-	.input-item {
-		font-size: 30rpx;
-		color: #333;
-	}
-
-	.input-placeholder {
-		color: #999;
-		font-size: 30rpx;
-	}
-
-	/* 确定按钮 */
-	.submit-btn {
-		width: 100%;
-		height: 88rpx;
-		line-height: 88rpx;
-		background-color: #1677ff;
-		color: #fff;
-		font-size: 28rpx;
-		border-radius: 8rpx;
-		border: none;
-		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: 32rpx;
-		font-weight: bold;
-		margin-bottom: 20rpx;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.toast-text {
-		color: #fff;
-		font-size: 28rpx;
-	}
-</style>
-<style scoped>
-	/* 页面整体 */
-
-	/* ====================== 列表容器 ====================== */
-	.list-container {
-		/* flex: 1; */
-		padding: 40rpx;
-		min-height: calc(100vh - 105px);
-		overflow-y: scroll;
-	}
-
-	/* ====================== 绑定车辆卡片 ====================== */
-	/* 单个车辆项 */
 	.car-item {
 		display: flex;
 		align-items: center;
@@ -316,11 +255,9 @@
 
 	.car-item.checked {
 		background: #f4f7ff;
-		/* 浅蓝色背景 */
 		border-color: #1677ff;
 	}
 
-	/* 左侧圆形头像占位 */
 	.car-avatar {
 		width: 100rpx;
 		height: 100rpx;
@@ -330,34 +267,57 @@
 		flex-shrink: 0;
 	}
 
-	/* 中间信息区域 */
-	.car-info {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-	}
-
-	/* 车牌号 */
-	.car-plate {
-		font-size: 32rpx;
-		font-weight: bold;
-		color: #000;
-		line-height: 1.4;
-		margin-bottom: 8rpx;
-	}
-
-	/* 车型+颜色 */
-	.car-model {
-		font-size: 28rpx;
-		color: #666;
-		line-height: 1.4;
-	}
-
-	/* 状态标签 */
 	.status-tag {
 		font-size: 24rpx;
-		padding: 6rpx14rpx;
+		padding: 6rpx 14rpx;
+		border-radius: 6rpx;
+		font-weight: 500;
+		flex-shrink: 0;
+		position: absolute;
+		right: 30rpx;
+		top: 30rpx;
+	}
+
+	.status-tag.unbound {
+		color: #999;
+	}
+
+	.status-tag.bounded {
+		color: #2F77FD;
+	}
+
+	.status-tag.underReview {
+		color: #FF8F40;
+	}
+
+	.status-tag.unpass {
+		color: red;
+	}
+
+	.car-info {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
+
+	.car-plate {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #000;
+		line-height: 1.4;
+		margin-bottom: 8rpx;
+	}
+
+	.car-model {
+		font-size: 28rpx;
+		color: #666;
+		line-height: 1.4;
+	}
+
+	.status-tag {
+		font-size: 24rpx;
+		padding: 6rpx 14rpx;
 		border-radius: 6rpx;
 		font-weight: 500;
 		flex-shrink: 0;
@@ -366,22 +326,14 @@
 		top: 30rpx;
 	}
 
-	/* 未绑定状态（浅绿色背景+绿色文字） */
 	.status-tag.unbound {
-		/* background-color: #e6f7e6; */
 		color: #999999;
 	}
 
-	/* 已绑定状态（可扩展，比如蓝色） */
 	.status-tag.bound {
-		/* background-color: #e6f0ff; */
 		color: #1677ff;
 	}
 
-
-	/* ====================== 底部按钮 ====================== */
-
-
 	.confirm-btn {
 		width: 100%;
 		height: 88rpx;
@@ -392,9 +344,4 @@
 		border: none;
 		line-height: 88rpx;
 	}
-
-	.status-bar {
-		width: 100vw;
-		height: 46px;
-	}
 </style>