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

<template>
	<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>
			</view>

			<view class="car-item" v-for="(item, index) in carList" :key="index" @click="handleItemClick(item, index)"
				:class="{ checked: selectedIndex === index }">
				<image :src="item.carImageUrl" mode="aspectFill" class="car-avatar"
					@error="item.carImageUrl = defaultCarImg" />
				<view class="car-info">
					<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 setup>
	import {
		ref,
		onMounted,

	} from 'vue'
	import {
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		getMyCarList,
		postCarBind
	} from '@/pageSubPack/api/apiSub.js'

	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 () => {
		// 防重复请求

		if (loadingMore.value || noMoreData.value) return

		loadingMore.value = true
		try {
			const res = await getMyCarList({
				pageNum: pageNum.value,
				pageSize: pageSize.value,
				userId: 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()
	})


	const handleItemClick = (item, index) => {
		selectedIndex.value = index
		selectedId.value = item.id
		selectedName.value = item.carNum
	}

	const confirmBind = () => {
		if (selectedIndex.value === -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'
					// 		})
					// 	}
					// })
				}
			}
		})
	}

	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	page {
		background: #f9f9f9;
		overflow: hidden;
	}
</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;
	}

	.bottom-btn {
		padding: 20rpx 30rpx 40rpx;
	}

	.car-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		margin-bottom: 20rpx;
		border: 1rpx solid #e6e9ff;
		border-radius: 16rpx;
		background-color: #fff;
		position: relative;
	}

	.car-item.checked {
		background: #f4f7ff;
		border-color: #1677ff;
	}

	.car-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #f0f4ff;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.status-tag {
		font-size: 24rpx;
		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;
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.status-tag.unbound {
		color: #999999;
	}

	.status-tag.bound {
		color: #1677ff;
	}

	.confirm-btn {
		width: 100%;
		height: 88rpx;
		background-color: #1677ff;
		color: #fff;
		border-radius: 12rpx;
		font-size: 34rpx;
		border: none;
		line-height: 88rpx;
	}
</style>