学生入住信息采集
This commit is contained in:
278
pages/dormitory/studentDormInfo/index.vue
Normal file
278
pages/dormitory/studentDormInfo/index.vue
Normal file
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<!-- 添加信息收集按钮 -->
|
||||
<view class="add" @click="addDormInfo">+</view>
|
||||
|
||||
<!-- 滚动容器（使用scroll-view确保事件生效） -->
|
||||
<scroll-view class="scroll-container" scroll-y @scrolltolower="loadNextPage" refresher-enabled
|
||||
@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 ? '宿舍长' : '' }}
|
||||
</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>
|
||||
<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>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
listStudent
|
||||
} from "@/api/dms/studentDormInfo/index.js"
|
||||
import {
|
||||
getUserProfile
|
||||
} from '@/api/system/user'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 5, // 每页5条，便于测试分页
|
||||
dormitoryId: null,
|
||||
bedId: null,
|
||||
stuNo: null,
|
||||
isDormitoryHead: null,
|
||||
status: null,
|
||||
checkinTime: null,
|
||||
inStatus: null,
|
||||
stuName: null,
|
||||
},
|
||||
dormInfo: [],
|
||||
isLoading: false,
|
||||
hasMore: true
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// 每次显示页面时重置数据并重新加载
|
||||
this.resetData()
|
||||
this.getUserProfile()
|
||||
},
|
||||
methods: {
|
||||
// 重置分页数据（用于刷新或重新加载）
|
||||
resetData() {
|
||||
this.queryParams.pageNum = 1
|
||||
this.dormInfo = []
|
||||
this.hasMore = true
|
||||
},
|
||||
|
||||
// 查询列表数据
|
||||
async getList() {
|
||||
if (this.isLoading || !this.hasMore) return
|
||||
this.isLoading = true
|
||||
|
||||
try {
|
||||
const res = await listStudent(this.queryParams)
|
||||
if (res.code === 200) {
|
||||
const newData = res.rows || []
|
||||
// 第一页覆盖数据，后续页追加
|
||||
this.dormInfo = this.queryParams.pageNum === 1 ?
|
||||
newData :
|
||||
[...this.dormInfo, ...newData]
|
||||
// 判断是否还有更多数据（当前页数据量等于页大小，说明可能有下一页）
|
||||
this.hasMore = newData.length === this.queryParams.pageSize
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载数据出错:', err)
|
||||
uni.showToast({
|
||||
title: '网络错误',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.isLoading = false
|
||||
// 停止下拉刷新
|
||||
uni.stopPullDownRefresh()
|
||||
}
|
||||
},
|
||||
|
||||
// 加载下一页
|
||||
loadNextPage() {
|
||||
console.log('触发加载下一页')
|
||||
if (this.hasMore) {
|
||||
this.queryParams.pageNum++
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
|
||||
// 下拉刷新
|
||||
handleRefresh() {
|
||||
console.log('触发下拉刷新')
|
||||
this.resetData()
|
||||
this.getList()
|
||||
},
|
||||
|
||||
// 获取用户信息
|
||||
async getUserProfile() {
|
||||
try {
|
||||
const res = await getUserProfile()
|
||||
console.log('当前用户信息:', res)
|
||||
if (res.roleGroup == "学生") {
|
||||
this.queryParams.stuName = res.data.nickName
|
||||
}
|
||||
this.getList()
|
||||
} catch (err) {
|
||||
console.error('获取用户信息失败:', err)
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转添加页面
|
||||
addDormInfo() {
|
||||
if (this.dormInfo.length > 0) {
|
||||
uni.showToast({
|
||||
title: '请勿重复提交',
|
||||
icon: 'none'
|
||||
});
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: `/pages/dormitory/studentDormInfo/informationCollection`
|
||||
})
|
||||
},
|
||||
|
||||
// 点击列表项
|
||||
handleItemClick(item) {
|
||||
console.log('点击学生信息:', item)
|
||||
// 可添加跳转详情页逻辑
|
||||
// uni.navigateTo({ url: `/pages/detail?id=${item.id}` })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
|
||||
/* 滚动容器 */
|
||||
.scroll-container {
|
||||
height: 100%;
|
||||
/* 必须设置高度才能滚动 */
|
||||
width: 100%;
|
||||
padding-bottom: 120rpx;
|
||||
/* 预留底部按钮空间 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 添加按钮 */
|
||||
.add {
|
||||
position: fixed;
|
||||
bottom: 50rpx;
|
||||
right: 50rpx;
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #1890FF;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 60rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.3);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/* 列表容器 */
|
||||
.dorm-list {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
/* 列表项 */
|
||||
.dorm-item {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 28rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.dorm-item:active {
|
||||
transform: scale(0.99);
|
||||
/* 点击反馈 */
|
||||
}
|
||||
|
||||
/* 列表项头部 */
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 16rpx;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 24rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.head-tag {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
/* 列表项内容 */
|
||||
.item-content {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.item-content view {
|
||||
margin-bottom: 14rpx;
|
||||
}
|
||||
|
||||
.item-content view:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading,
|
||||
.no-more,
|
||||
.no-data {
|
||||
text-align: center;
|
||||
padding: 30rpx 0;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
padding: 100rpx 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user