<template>
|
<view class="dorm_index">
|
<view class="dorm_headers">
|
<view @click="buildingClick()" style="margin-right: 10px;">
|
<u--input placeholder="楼号" disabled disabledColor="#FFFFFF" placeholderStyle="color:#999999;padding-left:10px" v-model="search.buildNum" suffixIcon="arrow-down-fill" suffixIconStyle="color: #666666;font-size:20px;"></u--input>
|
</view>
|
<view @click="floorClick()" style="margin-right: 10px;">
|
<u--input placeholder="楼层" disabled disabledColor="#FFFFFF" placeholderStyle="color:#999999;padding-left:10px" v-model="search.floorNum" suffixIcon="arrow-down-fill" suffixIconStyle="color: #666666;font-size:20px;"></u--input>
|
</view>
|
<view @click="roomClick()" >
|
<u--input placeholder="房号" disabled disabledColor="#FFFFFF" placeholderStyle="color:#999999;padding-left:10px" v-model="search.dormNum" suffixIcon="arrow-down-fill" suffixIconStyle="color: #666666;font-size:20px;"></u--input>
|
</view>
|
</view>
|
<view class="dorm_main">
|
<scroll-view
|
scroll-y="true"
|
class="dorm_index_scroll"
|
:scroll-top="scrollTop"
|
refresher-enabled="true"
|
refresher-background="#EAEAEA"
|
:refresher-triggered="triggered"
|
@refresherpulling="refresherrefresh"
|
@scrolltolower="scrolltoLower">
|
<view class="dorm_main_list" v-for="(item,index) in dormLists" :key="index">
|
<view class="dorm_main_headers">
|
<view class="dorm_headers_left">{{item.buildNum}}#{{item.floorNum}}层{{item.dormNum}}号</view>
|
<view class="dorm_headers_right">
|
<view class="dorm_header_right_items">
|
<view class="dorm_header_right_titles1">床位：</view>
|
<view class="dorm_header_right_datas">{{item.bedNum}}</view>
|
</view>
|
<view class="dorm_header_right_items">
|
<view class="dorm_header_right_titles">空位：</view>
|
<view class="dorm_header_right_datas">{{item.bedNum-item.dormUserCount}}</view>
|
</view>
|
</view>
|
</view>
|
<view class="dorm_main_contents">
|
<view class="dorm_card_items" v-for="(names,nameIndex) in item.dormUserVos" :key="nameIndex">
|
<view class="dorm_card_phone">
|
<u-image src="@/static/man_icon.png" width="120rpx" height="120rpx" v-if="names.sex ===0"></u-image>
|
<u-image src="@/static/woman_icon.png" width="120rpx" height="120rpx" v-if="names.sex ===1"></u-image>
|
</view>
|
<view class="dorm_card_name">{{names.realName}}</view>
|
</view>
|
</view>
|
</view>
|
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
|
</scroll-view>
|
</view>
|
<u-picker
|
:show="showBuliding"
|
:columns="buildColumns"
|
keyName="buildNum"
|
@cancel="cancelBuliding"
|
@confirm="confirmBuliding">
|
</u-picker>
|
<u-picker
|
:show="showFloor"
|
:columns="floorColumns"
|
keyName="floorNum"
|
@cancel="cancelFloor"
|
@confirm="confirmFloor">
|
</u-picker>
|
<u-picker
|
:show="showRoom"
|
:columns="roomColumns"
|
keyName="dormNum"
|
@cancel="cancelDorm"
|
@confirm="confirmRoom">
|
</u-picker>
|
</view>
|
</template>
|
|
<script>
|
import { throttle} from '../../plugins/public.js';
|
export default{
|
data(){
|
return{
|
search:{
|
buildId:'',
|
roomId:''
|
},
|
showBuliding:false,//是否显示楼号
|
showFloor:false,//是否显示楼层
|
showRoom:false,//是否显示房间号
|
buildColumns:[],//楼号数据
|
floorColumns:[],//楼层号
|
roomColumns:[],//房间号
|
floors:[],
|
dormLists:[],//宿舍数据
|
pageNum: 1,
|
pageSize: 10,
|
loadPage: 0,
|
scrollTop: 0,
|
triggered: true,
|
status: 'loading',
|
loadText: {
|
loading: '努力加载中',
|
nomore: '没有更多数据了'
|
},
|
}
|
},
|
onLoad() {
|
this.getBuildingsList()
|
this.searchDormList()
|
},
|
methods:{
|
//获取楼号数据
|
getBuildingsList(){
|
this.$api.reboSystem.getRoomPulls({}).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.buildColumns = [res.data]
|
}else{
|
uni.$u.toast(res.statusMsg);
|
}
|
})
|
},
|
//点击楼号下拉
|
buildingClick(){
|
this.showBuliding = true
|
this.$set(this.search,'buildId','')
|
this.$set(this.search,'buildNum','')
|
this.$set(this.search,'floorNum','')
|
this.$set(this.search,'roomId','')
|
this.$set(this.search,'dormNum','')
|
},
|
//取消楼号下拉
|
cancelBuliding(){
|
this.showBuliding = false
|
this.searchDormList()
|
},
|
//确定选择的楼号
|
confirmBuliding({value}){
|
this.showBuliding = false
|
this.$set(this.search,'buildId',value[0].buildId)
|
this.$set(this.search,'buildNum',value[0].buildNum)
|
this.floorColumns = [value[0].floors]
|
this.searchDormList()
|
},
|
//取消楼层下拉查所有
|
cancelFloor(){
|
this.showFloor = false
|
this.searchDormList()
|
},
|
//点击楼层下拉
|
floorClick(){
|
this.showFloor = true
|
this.$set(this.search,'floorNum','')
|
},
|
//确定选择的楼层
|
confirmFloor({value}){
|
this.showFloor = false
|
this.$set(this.search,'floorNum',value[0].floorNum)
|
this.floors = [value[0].roomList]
|
this.roomColumns = [value[0].roomList]
|
this.$set(this.search,'roomId','')
|
this.$set(this.search,'dormNum','')
|
this.searchDormList()
|
},
|
//点击房间号下拉
|
roomClick(){
|
this.showRoom = true
|
this.$set(this.search,'roomId','')
|
this.$set(this.search,'dormNum','')
|
this.roomColumns = this.floors
|
},
|
//取消房间号下拉
|
cancelDorm(){
|
this.showRoom = false
|
this.searchDormList()
|
},
|
//确定选择的房间号
|
confirmRoom({value}){
|
this.showRoom = false
|
this.$set(this.search,'roomId',value[0].roomId)
|
this.$set(this.search,'dormNum',value[0].dormNum)
|
this.roomColumns = [value[0].roomList]
|
this.searchDormList()
|
},
|
//查询列表
|
searchDormList(){
|
this.triggered = true;
|
this.dormLists = [];
|
let params = Object.assign({},this.search,{
|
pageNum: this.pageNum,
|
pageSize:this.pageSize,
|
})
|
delete params.dormNum
|
this.$api.reboSystem.getDormNumsLists(params).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.dormLists = res.data.list
|
this.loadPage = res.data.pages;
|
this.triggered = false;
|
this.status = 'nomore';
|
}else{
|
uni.$u.toast(res.statusMsg);
|
}
|
}).catch((err) => {
|
uni.$u.toast('请检查网络服务或联系管理员！')
|
})
|
},
|
//自定义下拉刷新
|
refresherrefresh: throttle(function() {
|
this.status = 'loading';
|
this.pageNum = 1;
|
this.searchDutyList();
|
uni.$u.toast('刷新成功');
|
}, 500),
|
//触底刷新
|
scrolltoLower: throttle(function() {
|
this.status = 'loading';
|
if(this.pageNum >= this.loadPage) {
|
setTimeout(() => {
|
this.status = 'nomore'
|
uni.$u.toast('没有更多数据了');
|
},1000)
|
return
|
} else {
|
this.pageNum+=1
|
let params = Object.assign({},this.search,{
|
pageNum: this.pageNum,
|
pageSize:this.pageSize,
|
})
|
this.$api.reboSystem.getDormLists(params).then(res=>{
|
if(res.statusMsg === 'ok'){
|
this.dormLists.push(...res.data.list)
|
this.loadPage = res.data.pages;
|
this.triggered = false;
|
this.status = 'nomore';
|
}else{
|
uni.$u.toast(res.statusMsg);
|
}
|
}).catch((err) => {
|
uni.$u.toast('请检查网络服务或联系管理员！')
|
})
|
}
|
}, 1500),
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.dorm_index{
|
height: 100vh;
|
background-color: #F6F6F6;
|
padding: 10px 15px;
|
.dorm_headers{
|
line-height: 45px;
|
display: flex;
|
}
|
.dorm_main{
|
height: calc(100vh - 85px);
|
margin-top: 15px;
|
.dorm_index_scroll{
|
height: 90%;
|
|
.dorm_main_list{
|
display: flex;
|
flex-direction: column;
|
background-color: #FFFFFF;
|
border-radius: 6px;
|
margin-bottom: 15px;
|
.dorm_main_headers{
|
// display: flex;
|
// justify-content: space-between;
|
// align-items: center;
|
padding-bottom:16px;
|
line-height: 40px;
|
border-bottom: 1px solid #EAEAEA;
|
.dorm_headers_left{
|
// width:50%;
|
flex: none;
|
padding-left: 27px;
|
color: #333333;
|
font-size: 17px;
|
position: relative;
|
&::before{
|
content: "";
|
position: absolute;
|
width: 2px;
|
height: 17px;
|
top: 12px;
|
left: 15px;
|
background-color: #1977FF;
|
}
|
}
|
.dorm_headers_right{
|
width:50%;
|
line-height: 32px;
|
flex: none;
|
display: flex;
|
margin: 0 0 0 15px;
|
padding-left: 15px;
|
// margin-left: 15px;
|
background-color: rgba(25,119,255,.1);
|
.dorm_header_right_items{
|
display: flex;
|
align-items: center;
|
margin-right: 15px;
|
.dorm_header_right_titles{
|
flex: none;
|
color:#333333;
|
font-size: 17px;
|
}
|
.dorm_header_right_titles1{
|
flex: none;
|
padding-left: 28px;
|
color:#333333;
|
font-size: 17px;
|
position: relative;
|
&::before{
|
position: absolute;
|
content: "";
|
width: 50px;
|
height: 50px;
|
top: 8px;
|
left: 0px;
|
background: url('../../static/room_icon.png') no-repeat;
|
}
|
}
|
.dorm_header_right_datas{
|
color: #1977FF;
|
font-size: 17px;
|
}
|
}
|
}
|
}
|
.dorm_main_contents{
|
padding: 15px;
|
display: flex;
|
overflow: auto;
|
.dorm_card_items{
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
margin-right: 10px;
|
.dorm_card_phone{
|
display: flex;
|
justify-content: center;
|
}
|
.dorm_card_name{
|
flex: none;
|
margin-top: 5px;
|
text-align: center;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
