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

<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar title="车辆品牌" left-icon="left" @clickLeft="goBackAdd" backgroundColor="transparent" :border="false">
		</uni-nav-bar>


		<scroll-view class="page" scroll-y>
			<!-- 搜索框 -->
			<view class="search-box">
				<input class="search-input" v-model="searchKey" placeholder="请输入名称"
					placeholder-class="input-placeholder" @input="onSearch" />
				<uni-icons type="search" size="20" color="#999" />
			</view>
			<!-- 小区列表 -->
			<view class="carBrand-list">
				<view v-if="filteredList.length === 0" class="empty-state">
					<uni-icons type="info" size="60" color="#ccc"></uni-icons>
					<text class="empty-text">
						{{ '暂无数据'}}
					</text>
				</view>
				<view class="carBrand-item" v-for="(item, index) in filteredList" :key="index"
					@click="selectCarBrand(item)">
					<text class="carBrand-name">{{ item.name }}</text>
					<text class="item-arrow"></text>
				</view>
			</view>
		</scroll-view>
	</view>



</template>

<script setup>
	import {
		ref,
		onMounted,

	} 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)

	const pageNum = ref(1)
	const pageSize = ref(10)
	// ==================== 获取列表数据 ====================
	const getList = async () => {
		// 防重复请求

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

		loadingMore.value = true
		try {
			const res = await getSystemDictData({
				pageNum: pageNum.value,
				pageSize: pageSize.value,
				dictType: 'user_car_brand'
			})

			const data = res
			const newList = data.rows || []

			// 第一页 → 覆盖数据
			if (pageNum.value === 1) {
				carBrandList.value = newList
			} else {
				// 后续页 → 追加数据
				carBrandList.value = [...carBrandList.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
		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.navigateTo({
			url: '/pageSubPack/my/addCar',
			success: res => {},
			fail: () => {},
			complete: () => {}
		});
	}

	const goBackAdd = () => {
		uni.removeStorageSync("carBrandId");
		uni.removeStorageSync("carBrandName");
		uni.navigateBack()
	}

	onShow(() => {})

	onUnload(() => {})

	onMounted(() => {})
</script>
<style lang="scss">
	page {
		background: #fff;
		overflow: hidden;
		height: 100vh;
	}
</style>

<style scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 关键：占满屏幕高度 */
		/* background-color: #fff; */
	}

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

	/* 底部按钮 */
	.bottom-btn {
		padding: 20rpx 30rpx 40rpx;
	}


	/* 搜索框 */
	.search-box {
		display: flex;
		align-items: center;
		background-color: #F3F3F3;
		border-radius: 20rpx;
		margin: 0rpx 0px 20rpx 0px;
		padding: 0 30rpx;
		height: 70rpx;
	}

	/* 空状态 */
	.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;
	}

	.search-input {
		flex: 1;
		height: 100%;
		font-size: 30rpx;
		border: none;
		background: transparent;
	}

	.input-placeholder {
		color: #999;
		font-size: 30rpx;
	}

	.search-icon {
		font-size: 36rpx;
		color: #999;
	}

	/* 小区列表 */
	.carBrand-list {
		padding: 0 30rpx;
	}

	.carBrand-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}



	.carBrand-name {
		font-size: 32rpx;
		color: #000;
		font-weight: 500;
	}

	.item-arrow {
		display: inline-block;
		width: 10rpx;
		height: 10rpx;
		border-top: 2rpx solid #999;
		border-right: 2rpx solid #999;
		transform: rotate(45deg);
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

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