first commit

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

@@ -0,0 +1,213 @@
+<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 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>
+	export default {
+		onReady: function(e) {},
+		components: {
+
+		},
+		computed: {
+			// 过滤后的列表（搜索功能）
+			filteredList() {
+				if (!this.searchKey.trim()) {
+					return this.carBrandList
+				}
+				return this.carBrandList.filter(item =>
+					item.name.includes(this.searchKey.trim())
+				)
+			},
+
+
+		},
+
+		created() {
+
+		},
+		onShow() {
+
+		},
+		onUnload() {
+
+		},
+		onLoad(option) {
+
+		},
+		mounted() {},
+		data() {
+			return {
+				/* 设定状态栏默认高度 */
+				statusBarHeight: 20,
+				searchKey: '',
+				carBrandList: [{
+						id: 1,
+						name: '宝马'
+					},
+					{
+						id: 2,
+						name: '奥迪'
+					},
+				]
+			}
+		},
+
+
+		methods: {
+			// 搜索输入事件
+			onSearch() {
+				// 实时过滤，computed 自动处理
+			},
+
+			// 选择小区
+			selectCarBrand(item) {
+				uni.setStorageSync('carBrandId', item.id);
+				uni.setStorageSync('carBrandName', item.name);
+
+				uni.redirectTo({
+					url: '/pages/my/addCar',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+
+			},
+			goBackAdd() {
+				uni.removeStorageSync('carBrandId');
+				uni.removeStorageSync('carBrandName');
+
+				uni.redirectTo({
+					url: '/pages/my/addCar',
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+
+			},
+
+		},
+
+
+	}
+</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 20px;
+		box-sizing: border-box;
+	}
+
+	/* 底部按钮 */
+	.bottom-btn {
+		padding: 10px 15px 20px;
+	}
+
+
+	/* 搜索框 */
+	.search-box {
+		display: flex;
+		align-items: center;
+		background-color: #F3F3F3;
+		border-radius: 10px;
+		margin: 0rpx 0px 20rpx 0px;
+		padding: 0 30rpx;
+		height: 70rpx;
+	}
+
+	.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: 5px;
+		height: 5px;
+		border-top: 2rpx solid #999;
+		border-right: 2rpx solid #999;
+		transform: rotate(45deg);
+		margin-left: 10rpx;
+		margin-right: 5px;
+	}
+
+	.status-bar {
+		width: 100vw;
+		height: 46px;
+	}
+</style>