我的车位，我的车辆

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

@@ -33,93 +33,141 @@
 
 </template>
 
-<script>
-	export default {
-		onReady: function(e) {},
-		components: {
+<script setup>
+	import {
+		ref,
+		onMounted,
 
-		},
-		computed: {
-			// 过滤后的列表（搜索功能）
-			filteredList() {
-				if (!this.searchKey.trim()) {
-					return this.carBrandList
-				}
-				return this.carBrandList.filter(item =>
-					item.name.includes(this.searchKey.trim())
-				)
-			},
+	} from 'vue'
+	import {
+		onReachBottom,
+		onPullDownRefresh
+	} from '@dcloudio/uni-app'
+	import {
+		getSystemDictData
+	} from '/pageSubPack/api/apiSub.js'
 
 
-		},
+	/* 设定状态栏默认高度 */
+	const statusBarHeight = ref(20)
+	const searchKey = ref('')
+	const carBrandList = ref()
+	const loadingMore = ref(false)
+	const noMoreData = ref(false)
 
-		created() {
+	const pageNum = ref(1)
+	const pageSize = ref(10)
+	// ==================== 获取列表数据 ====================
+	const getList = async () => {
+		// 防重复请求
 
-		},
-		onShow() {
+		if (loadingMore.value || noMoreData.value) return
 
-		},
-		onUnload() {
+		loadingMore.value = true
+		try {
+			const res = await getSystemDictData({
+				pageNum: pageNum.value,
+				pageSize: pageSize.value,
+				dictType: 'user_car_brand'
+			})
 
-		},
-		onLoad(option) {
+			const data = res
+			const newList = data.rows || []
 
-		},
-		mounted() {},
-		data() {
-			return {
-				/* 设定状态栏默认高度 */
-				statusBarHeight: 20,
-				searchKey: '',
-				carBrandList: [{
-						id: 1,
-						name: '宝马'
-					},
-					{
-						id: 2,
-						name: '奥迪'
-					},
-				]
+			// 第一页 → 覆盖数据
+			if (pageNum.value === 1) {
+				carBrandList.value = newList
+			} else {
+				// 后续页 → 追加数据
+				carBrandList.value = [...carBrandList.value, ...newList]
 			}
-		},
-
-
-		methods: {
-			// 搜索输入事件
-			onSearch() {
-				// 实时过滤，computed 自动处理
-			},
-
-			// 选择小区
-			selectCarBrand(item) {
-				uni.setStorageSync('carBrandId', item.id);
-				uni.setStorageSync('carBrandName', item.name);
-
-				uni.redirectTo({
-					url: '/pageSubPack/my/addCar',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-
-			},
-			goBackAdd() {
-				uni.removeStorageSync('carBrandId');
-				uni.removeStorageSync('carBrandName');
-
-				uni.redirectTo({
-					url: '/pageSubPack/my/addCar',
-					success: res => {},
-					fail: () => {},
-					complete: () => {}
-				});
-
-			},
-
-		},
-
-
+			// 判断是否没有更多数据
+			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
+		carBrandList = []
+		loadingMore = false
+		getList()
+	}
+	onPullDownRefresh(() => {
+		refresh()
+	})
+
+	// 页面加载时请求第一页
+	onMounted(() => {
+		getList()
+	})
+
+	// 过滤后的列表（搜索功能）
+	const filteredList = computed(() => {
+		if (!searchKey.value.trim()) {
+			return carBrandList.value
+		}
+		return carBrandList.value.filter(item =>
+			item.name.includes(searchKey.value.trim())
+		)
+	})
+
+	// 搜索输入事件
+	const onSearch = () => {
+		// 实时过滤，computed 自动处理
+	}
+
+	// 选择小区
+	const selectCarBrand = (item) => {
+		uni.setStorageSync('carBrandId', item.id);
+		uni.setStorageSync('carBrandName', item.name);
+
+		uni.redirectTo({
+			url: '/pageSubPack/my/addCar',
+			success: res => {},
+			fail: () => {},
+			complete: () => {}
+		});
+	}
+
+	const goBackAdd = () => {
+		uni.removeStorageSync('carBrandId');
+		uni.removeStorageSync('carBrandName');
+
+		uni.redirectTo({
+			url: '/pageSubPack/my/addCar',
+			success: res => {},
+			fail: () => {},
+			complete: () => {}
+		});
+	}
+
+	onShow(() => {})
+
+	onUnload(() => {})
+
+	onMounted(() => {})
 </script>
 <style lang="scss">
 	page {