入住列表搜索区

pages/dormitory/studentDormInfo/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="page-container">
 		<!-- 搜索区 -->
-		<view class="fixed-search-wrap">
+		<view class="fixed-search-wrap" v-if="roleGroup != '学生'">
 			<!-- 搜索区内容 -->
 			<view class="search-content">
 				<view class="search-card">
@@ -42,23 +42,72 @@
 						</view>
 
 						<!-- 园区筛选 -->
-						<view class="filter-item">
+						<view class="filter-item" @click="isDorm('')">
 							<text class="filter-label">园区</text>
-							<picker mode="selector" :range="parkList" :range-key="'name'" :value="parkIndex" @change="handleParkChange"
-								class="filter-picker">
+							<picker mode="selector" :range="parkList" :range-key="'name'" :value="parkIndex"
+								:disabled="!queryParams.campusId" @change="handleParkChange" class="filter-picker"
+								id="park">
 								<view class="picker-content">
-									<text class="picker-text">{{ parkList[parkIndex] ? parkList[parkIndex].name : '全部' }}</text>
+									<text
+										class="picker-text">{{ parkList[parkIndex] ? parkList[parkIndex].name : '全部' }}</text>
 									<uni-icons type="bottom" size="20rpx" color="#999"></uni-icons>
 								</view>
 							</picker>
 						</view>
 
 						<!-- 宿舍号筛选 -->
-						<!-- <view class="filter-item">
+						<view class="filter-item">
 							<text class="filter-label">宿舍号</text>
-							<input v-model="queryParams.roomNo" placeholder="输入" @input="handleSearchInput"
-								class="filter-input" />
-						</view> -->
+							<view @click="addRecordsPopup" class="filter-input">
+								{{ dormOptions[dormIndex] ? dormOptions[dormIndex].roomNo : '请输入'}}
+							</view>
+						</view>
+						<uni-popup ref="popupTime" class="popup-time" background-color="#ffffff">
+							<view class="popup-content">
+								<view class="title">
+									宿舍号
+								</view>
+								<form @submit="topersonalReporting">
+									<view class="form-item">
+										<label>楼栋</label>
+										<picker range-key="name" :value="buildingIndex" :range="buildingOptions"
+											@change="handleBuildingChange">
+											<view class="uni-input">
+												<text
+													class="val">{{buildingOptions[buildingIndex] ? buildingOptions[buildingIndex].name : '全部'}}</text>
+												<uni-icons type="calendar" size="25" color="#202020"></uni-icons>
+											</view>
+										</picker>
+									</view>
+									<view class="form-item" @click="isDorm('楼层')">
+										<label>楼层</label>
+										<picker @change="handleFloorChange" :range="floorOptions" :range-key="'floor'"
+											:disabled="!queryParams.buildingId">
+											<view class="uni-input">
+												<text
+													class="val">{{floorOptions[floorIndex] ? floorOptions[floorIndex].floor : '全部'}}</text>
+												<uni-icons type="calendar" size="25" color="#202020"></uni-icons>
+											</view>
+										</picker>
+									</view>
+									<view class="form-item" @click="isDorm('宿舍号')">
+										<label>宿舍号</label>
+										<picker @change="handleDormChange" :range="dormOptions" :range-key="'roomNo'"
+											:disabled="!queryParams.floorId">
+											<view class="uni-input">
+												<text
+													class="val">{{dormOptions[dormIndex] ? dormOptions[dormIndex].roomNo : '全部'}}</text>
+												<uni-icons type="calendar" size="25" color="#202020"></uni-icons>
+											</view>
+										</picker>
+									</view>
+									<view class="btns">
+										<button type="default" @tap="onCancel">取消</button>
+										<button form-type="submit" type="primary">确定</button>
+									</view>
+								</form>
+							</view>
+						</uni-popup>
 					</view>
 
 					<!-- 操作按钮 -->
@@ -80,34 +129,38 @@
 		<view class="add" @click="addDormInfo">+</view>
 
 		<!-- 滚动容器 -->
-		<scroll-view class="scroll-container" scroll-y @scrolltolower="loadNextPage" @refresherrefresh="handleRefresh">
-			<!-- 入住收集列表 -->
-			<view class="dorm-list">
-				<view class="dorm-item" v-for="(item, index) in dormInfo"
-					:key="`${item.id}_${Math.ceil((index + 1) / queryParams.pageSize)}`" @click="handleItemClick(item)">
-					<view class="item-header">
-						<view class="name">姓名: {{ item.stuName }}</view>
-						<view class="tag" :class="item.isDormitoryHead === 1 ? 'head-tag' : ''">
-							{{ item.isDormitoryHead === 1 ? '宿舍长' : '' }}
+		<scroll-view ref="scrollRef" class="scroll-container" scroll-y @scrolltolower="loadNextPage"
+			@refresherrefresh="handleRefresh">
+			<view class="scroll-content">
+				<!-- 入住收集列表 -->
+				<view class="dorm-list">
+					<view class="dorm-item" v-for="(item, index) in dormInfo"
+						:key="`${item.id}_${Math.ceil((index + 1) / queryParams.pageSize)}`"
+						@click="handleItemClick(item)">
+						<view class="item-header">
+							<view class="name">姓名: {{ item.stuName }}</view>
+							<view class="tag" :class="item.isDormitoryHead === 1 ? 'head-tag' : ''">
+								{{ item.isDormitoryHead === 1 ? '宿舍长' : '' }}
+							</view>
 						</view>
-					</view>
-					<view class="item-content">
-						<view>学号: {{ item.stuNo }}</view>
-						<view>班级: {{ item.className }}</view>
-						<view>院系: {{ item.deptName }}</view>
-						<view>宿舍: {{ item.parkName }} {{ item.buildingName }}
-							{{ item.floorName }}楼{{ item.roomNo }}室
+						<view class="item-content">
+							<view>学号: {{ item.stuNo }}</view>
+							<view>班级: {{ item.className }}</view>
+							<view>院系: {{ item.deptName }}</view>
+							<view>宿舍: {{ item.parkName }} {{ item.buildingName }}
+								{{ item.floorName }}楼{{ item.roomNo }}室
+							</view>
+							<view>入住时间: {{ item.checkinTime }}</view>
+							<view>状态: {{ item.inStatus === '1' ? '已入住' : '未入住' }}</view>
 						</view>
-						<view>入住时间: {{ item.checkinTime }}</view>
-						<view>状态: {{ item.inStatus === '1' ? '已入住' : '未入住' }}</view>
 					</view>
 				</view>
-			</view>
 
-			<!-- 加载状态 -->
-			<view v-if="isLoading" class="loading">加载中...</view>
-			<view v-if="!hasMore && dormInfo.length > 0" class="no-more">已加载全部数据</view>
-			<view v-if="dormInfo.length === 0 && !isLoading" class="no-data">暂无数据</view>
+				<!-- 加载状态 -->
+				<view v-if="isLoading" class="loading">加载中...</view>
+				<view v-if="!hasMore && dormInfo.length > 0" class="no-more">已加载全部数据</view>
+				<view v-if="dormInfo.length === 0 && !isLoading" class="no-data">暂无数据</view>
+			</view>
 		</scroll-view>
 	</view>
 </template>
@@ -116,6 +169,9 @@
 	import {
 		listAllCampus,
 		listParkByCampus,
+		listBuildingByPark,
+		listFloorByBuilding,
+		listAllRoomByFloor,
 		listStudent
 	} from "@/api/dms/studentDormInfo/index.js"
 	import {
@@ -140,23 +196,39 @@
 					stuName: null,
 					gradeId: null,
 					campusId: null,
-					parkId:null,
+					parkId: null,
+					buildingId: null,
+					floorId: null,
+					dormitoryId: null,
 					dormArea: null, // 宿舍区筛选参数
 					parkName: null // 园区筛选参数
 				},
 				dormInfo: [],
 				isLoading: false,
 				hasMore: true,
+				total: 0, // 存储接口返回的总数据条数
 				// 筛选下拉选项数据
 				gradeList: [],
 				dormAreaList: [],
 				parkList: [],
+				// 楼栋选项（按园区联动）
+				buildingOptions: [],
+				// 楼层选项（下拉框）
+				floorOptions: [],
+				// 宿舍号选项（下拉框）
+				dormOptions: [],
 				// 筛选选中索引
 				gradeIndex: 0,
 				dormAreaIndex: 0,
 				parkIndex: 0,
+				buildingIndex: 0,
+				floorIndex: 0,
+				dormIndex: 0,
 				searchTimer: null,
-				roleGroup: null
+				roleGroup: null,
+				// 存储搜索区高度（非学生有搜索区，学生无）
+				searchAreaHeight: 0,
+
 			}
 		},
 		onShow() {
@@ -165,6 +237,21 @@
 			this.getUserProfile()
 			this.listGrade()
 			this.listAllCampus()
+			this.scrollToTop()
+			// 页面渲染完成后，计算搜索区高度并设置内边距
+			this.$nextTick(() => {
+				this.calcSearchAreaHeight()
+				this.setScrollContentPadding()
+			})
+		},
+		watch: {
+			// 监听角色变化，重新设置内边距（防止角色切换导致适配问题）
+			roleGroup() {
+				this.$nextTick(() => {
+					this.calcSearchAreaHeight()
+					this.setScrollContentPadding()
+				})
+			}
 		},
 		methods: {
 			// 重置分页数据（用于刷新或重新加载）
@@ -172,8 +259,57 @@
 				this.queryParams.pageNum = 1
 				this.dormInfo = []
 				this.hasMore = true
+				this.total = 0 // 重置总条数
 			},
 
+			// 计算搜索区高度
+			calcSearchAreaHeight() {
+				if (this.roleGroup !== '学生') {
+					const query = uni.createSelectorQuery().in(this)
+					query.select('.fixed-search-wrap')
+						.boundingClientRect(rect => {
+							// 转换rpx为px（1rpx≈0.5px，根据实际设备像素比调整）
+							this.searchAreaHeight = rect ? Math.ceil(rect.height) : 145 // 145px≈290rpx
+						})
+						.exec()
+				} else {
+					this.searchAreaHeight = 0
+				}
+				console.log(this.searchAreaHeight);
+			},
+
+			// 动态设置滚动内容的顶部内边距
+			setScrollContentPadding() {
+				const scrollContent = document.querySelector('.scroll-content')
+				if (scrollContent) {
+					if (this.roleGroup !== '学生') {
+						// 非学生：内边距=搜索区高度 - 60rpx（额外间距）
+						const paddingTop = this.searchAreaHeight - 30 // 10px≈20rpx
+						scrollContent.style.paddingTop = `${paddingTop}px`
+					} else {
+						// 学生：内边距=20rpx（仅基础间距）
+						scrollContent.style.paddingTop = '10px' // 10px≈20rpx
+					}
+				}
+			},
+
+			// 滚动条回到顶部的方法
+			scrollToTop() {
+				// 1. scroll-view 自身回顶
+				if (this.$refs.scrollRef) {
+					this.$refs.scrollRef.scrollTo({
+						scrollTop: 0,
+						duration: 300
+					})
+				}
+				// 2. 页面级回顶（兜底）
+				uni.pageScrollTo({
+					scrollTop: 0,
+					duration: 300
+				})
+			},
+
+
 			// 查询列表数据
 			async getList() {
 				if (this.isLoading || !this.hasMore) {
@@ -187,13 +323,17 @@
 					const res = await listStudent(this.queryParams)
 					if (res.code === 200) {
 						const newData = res.rows || []
+						this.total = res.total || 0 // 从接口获取总数据条数（需确保接口返回 total）
+						// 第一页覆盖数据，后续页追加
 						this.dormInfo = this.queryParams.pageNum === 1 ? newData : [...this.dormInfo, ...newData]
-						this.hasMore = newData.length === this.queryParams.pageSize
+						// 关键判断：当前已加载条数 >= 总条数 → 无更多数据
+						this.hasMore = this.dormInfo.length < this.total
 					} else {
 						uni.showToast({
 							title: '加载失败',
 							icon: 'none'
 						})
+						this.hasMore = false // 加载失败时停止后续请求
 					}
 				} catch (err) {
 					console.error('加载数据出错:', err)
@@ -201,6 +341,7 @@
 						title: '网络错误',
 						icon: 'none'
 					})
+					this.hasMore = false // 异常时停止后续请求
 				} finally {
 					this.isLoading = false
 					// 最终兜底：无论如何都停止刷新
@@ -309,6 +450,8 @@
 				this.queryParams.gradeId = selectedGrade.gradeId || null
 				this.resetData()
 				this.getList()
+				this.scrollToTop()
+				this.$nextTick(() => this.setScrollContentPadding())
 			},
 
 			// 宿舍区筛选
@@ -318,7 +461,9 @@
 				this.queryParams.campusId = selectedArea.id || null
 				this.resetData()
 				this.getList()
-
+				this.resetDorm()
+				this.scrollToTop()
+				this.$nextTick(() => this.setScrollContentPadding())
 				if (this.queryParams.campusId) {
 					// 根据校区id获取园区
 					let res = await listParkByCampus(this.queryParams.campusId)
@@ -330,13 +475,119 @@
 				}
 			},
 
+			// 宿舍区选择，重置园区等其他选择
+			resetDorm() {
+				this.parkList = []
+				this.parkIndex = 0
+				this.buildingOptions = []
+				this.buildingIndex = 0
+				this.floorIndex = 0
+				this.floorOptions = []
+				this.dormIndex = 0
+				this.dormOptions = []
+			},
+
+			// 判断是否选择上一个选项
+			isDorm(data) {
+				if (data == '楼层') {
+					if (this.queryParams.buildingId == null) {
+						uni.showToast({
+							title: '请先选择楼栋',
+							icon: 'none'
+						});
+						return
+					}
+				} else if (data == '宿舍号') {
+					if (this.queryParams.floorId == null) {
+						uni.showToast({
+							title: '请先选择楼层',
+							icon: 'none'
+						});
+						return
+					}
+				} else {
+					if (this.queryParams.campusId == null) {
+						uni.showToast({
+							title: '请先选择宿舍区',
+							icon: 'none'
+						});
+						return
+					}
+				}
+			},
+
 			// 园区筛选
-			handleParkChange(e) {
+			async handleParkChange(e) {
+
 				this.parkIndex = e.detail.value
 				const selectedPark = this.parkList[this.parkIndex]
 				this.queryParams.parkId = selectedPark.id || null
 				this.resetData()
 				this.getList()
+				this.scrollToTop()
+				this.$nextTick(() => this.setScrollContentPadding())
+				this.buildingOptions = []
+				this.buildingIndex = 0
+				this.floorIndex = 0
+				this.floorOptions = []
+				this.dormIndex = 0
+				this.dormOptions = []
+
+				if (this.queryParams.parkId) {
+					// 根据园区id获取楼栋
+					let res = await listBuildingByPark(this.queryParams.parkId)
+					if (res.code == 200) {
+						this.buildingOptions = [{
+							name: '全部'
+						}, ...res.data]
+					}
+				}
+			},
+
+			// 楼栋筛选
+			async handleBuildingChange(e) {
+				this.buildingIndex = e.detail.value
+				const selectedBuilding = this.buildingOptions[this.buildingIndex]
+				this.queryParams.buildingId = selectedBuilding.id || null
+				this.floorIndex = 0
+				this.floorOptions = []
+				this.dormIndex = 0
+				this.dormOptions = []
+				if (this.queryParams.buildingId) {
+					// 根据楼栋id获取楼层
+					let res = await listFloorByBuilding(this.queryParams.buildingId)
+					if (res.code == 200) {
+						this.floorOptions = [{
+							floor: '全部'
+						}, ...res.data]
+
+					}
+				}
+			},
+
+			// 楼层筛选
+			async handleFloorChange(e) {
+				this.floorIndex = e.detail.value
+				const selectedFloor = this.floorOptions[this.floorIndex]
+				this.queryParams.floorId = selectedFloor.id || null
+				this.dormIndex = 0
+				this.dormOptions = []
+				if (this.queryParams.floorId) {
+					// 根据楼栋id获取楼层
+					let res = await listAllRoomByFloor(this.queryParams.floorId)
+					if (res.code == 200) {
+						this.dormOptions = [{
+							roomNo: '全部'
+						}, ...res.data]
+					}
+				}
+			},
+
+			// 宿舍号筛选
+			handleDormChange(e) {
+				this.dormIndex = e.detail.value
+				const selectedDorm = this.dormOptions[this.dormIndex]
+				this.queryParams.dormitoryId = selectedDorm.id || null
 			},
 
 			// 重置筛选
@@ -344,6 +595,9 @@
 				this.gradeIndex = 0
 				this.dormAreaIndex = 0
 				this.parkIndex = 0
+				this.buildingIndex = 0
+				this.floorIndex = 0
+				this.dormIndex = 0
 				// 重置筛选参数，保留分页基础参数
 				this.queryParams = {
 					...this.queryParams,
@@ -351,17 +605,48 @@
 					dormArea: null,
 					parkName: null,
 					roomNo: null,
-					stuName: null
+					stuName: null,
+					campusId: null,
+					parkId: null,
+					buildingId: null,
+					floorId: null,
+					dormitoryId: null,
+					dormArea: null, // 宿舍区筛选参数
+					parkName: null // 园区筛选参数
 				}
 				this.resetData()
 				this.getList()
+				this.scrollToTop()
+				this.$nextTick(() => this.setScrollContentPadding())
 			},
 
 			// 手动搜索
 			handleSearch() {
 				this.resetData()
 				this.getList()
+				this.scrollToTop()
+				this.$nextTick(() => this.setScrollContentPadding())
 			},
+			addRecordsPopup() {
+				if (this.queryParams.parkId == null) {
+					uni.showToast({
+						title: '请先选择园区',
+						icon: 'none'
+					});
+					return
+				}
+				this.$refs.popupTime.open('center');
+			},
+			onCancel() {
+				this.$refs.popupTime.close();
+			},
+			topersonalReporting() {
+				this.resetData()
+				this.getList()
+				this.scrollToTop()
+				this.$nextTick(() => this.setScrollContentPadding())
+				this.$refs.popupTime.close();
+			}
 		},
 		destroyed() {
 			clearTimeout(this.searchTimer)
@@ -373,23 +658,24 @@
 	.page-container {
 		position: relative;
 		height: 100vh;
-		padding-top: 44px;
-		/* 预留原生title高度 */
 		background-color: #f5f7fa;
 		box-sizing: border-box;
+		/* 禁止页面滚动 */
+		overflow: hidden;
 	}
 
-	/* 固定搜索区：收缩时无空白 */
+	/* 固定搜索区*/
 	.fixed-search-wrap {
 		position: fixed;
 		top: 44px;
+		/* 原生title高度 */
 		left: 0;
 		right: 0;
 		z-index: 90;
 		background-color: #fff;
-		/* 背景改为白色，与页面融合 */
 		border-bottom: 1px solid #eee;
 		padding: 14px;
+		box-sizing: border-box;
 	}
 
 	/* 触发器：样式简洁，点击区域大 */
@@ -422,10 +708,25 @@
 
 	/* 滚动容器：调整顶部内边距，适应搜索区高度变化 */
 	.scroll-container {
-		height: 100%;
+		position: absolute;
+		top: 44px;
+		/* 与原生title对齐 */
+		left: 0;
+		right: 0;
+		bottom: 60px;
+		/* 预留添加按钮高度 */
 		width: 100%;
-		padding-top: 290rpx;
-		padding-bottom: 120rpx;
+		overflow-y: auto;
+		overflow-x: hidden;
+	}
+
+	/* 滚动内容容器：处理内边距，避免内容被遮挡 */
+	.scroll-content {
+		/* 底部预留加载状态高度 */
+		padding-bottom: 40rpx;
+		/* 左右内边距 */
+		padding-left: 20rpx;
+		padding-right: 20rpx;
 		box-sizing: border-box;
 	}
 
@@ -448,7 +749,8 @@
 	}
 
 	.dorm-list {
-		padding: 20rpx;
+		// padding: 20rpx;
+		padding: 0;
 	}
 
 	.dorm-item {
@@ -606,4 +908,85 @@
 	.btn-icon {
 		margin-right: 6rpx;
 	}
+
+	.popup-time,
+	.popup-audit {
+		width: 80%;
+
+		.popup-content {
+			width: 600rpx;
+			height: 750rpx;
+			padding: 40rpx 50rpx 40rpx;
+
+			.title {
+				text-align: center;
+				padding-bottom: 20rpx;
+				font-weight: bold;
+				font-size: 32rpx;
+				color: #3D3D3D;
+				border-bottom: 1px solid #F5F5F7;
+			}
+
+			.form-item {
+				width: 100%;
+				margin-top: 40rpx;
+				padding: 0 50rpx;
+
+				label {
+					font-weight: bold;
+					color: #202020;
+				}
+
+				picker {
+					margin-top: 20rpx;
+					border: 1px solid darkgray;
+					height: 72rpx;
+					line-height: 72rpx;
+					padding-left: 8px;
+					border-radius: 10rpx;
+
+					.uni-input {
+						display: flex;
+						color: #202020;
+
+						.val {
+							flex: 1;
+						}
+
+						.uni-icons {
+							margin: 0 20rpx;
+							opacity: 0.5;
+						}
+					}
+				}
+			}
+
+			.btns {
+				display: flex;
+				margin-top: 50rpx;
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				right: 0;
+
+				button {
+					flex: 1;
+					border-radius: 0;
+					height: 80rpx;
+					line-height: 80rpx;
+
+					&:first-child {
+						background-color: #ffffff;
+						border-top: 1px solid #F5F5F7;
+					}
+
+					&:last-child {
+						background-color: #258FE4;
+						border-top: 1px solid #258FE4;
+					}
+				}
+			}
+
+		}
+	}
 </style>