You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
357 lines
9.3 KiB
357 lines
9.3 KiB
<template>
|
|
<view class="select-room-page">
|
|
<u-sticky bgColor="white">
|
|
<u-tabs :list="tabList" @click="changeTab" :scrollable="false" :current="tabIndex"/>
|
|
<!-- 搜索框 -->
|
|
<view class="search-container">
|
|
<view class="search-box">
|
|
<text class="search-icon">🔍</text>
|
|
<input
|
|
class="search-input"
|
|
v-model="searchKeyword"
|
|
:placeholder="`搜索${tabIndex === 0 ? '楼栋' : (tabIndex === 1 ? '单元' : '房屋')}信息`"
|
|
@input="onSearchInput"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="flex justify-start items-center text-25 p-20" v-if="building">
|
|
<text class="mr-15" v-if="building">{{ building.name }}</text>
|
|
<template v-if="unit">
|
|
<u-icon name="arrow-right" size="20rpx"/>
|
|
<text class="mx-15">{{ unit.name }}</text>
|
|
</template>
|
|
<template v-if="room">
|
|
<u-icon name="arrow-right" size="20rpx"/>
|
|
<text class="mx-15" v-if="room">{{ room.roomNumber }}</text>
|
|
</template>
|
|
</view>
|
|
</u-sticky>
|
|
<view class="room-list">
|
|
<template v-if="tabIndex === 0">
|
|
<view
|
|
class="room-item"
|
|
v-for="(item, index) in buildingListFilter"
|
|
:key="index"
|
|
@click="selectBuilding(item)"
|
|
>
|
|
<view class="room-info">
|
|
<view class="room-name" :style="{color: building.buildCode === item.buildCode ? '#98C147' : ''}">{{
|
|
item.name
|
|
}}
|
|
</view>
|
|
</view>
|
|
<view class="room-arrow">›</view>
|
|
</view>
|
|
</template>
|
|
<template v-else-if="tabIndex === 1">
|
|
<view
|
|
class="room-item"
|
|
v-for="(item, index) in unitListFilter"
|
|
:key="index"
|
|
@click="selectUnit(item)"
|
|
>
|
|
<view class="room-info">
|
|
<view class="room-name" :style="{color: unit.unitCode === item.unitCode ? '#98C147' : ''}">{{
|
|
item.name
|
|
}}
|
|
</view>
|
|
</view>
|
|
<view class="room-arrow">›</view>
|
|
</view>
|
|
</template>
|
|
<template v-else-if="tabIndex === 2">
|
|
<view
|
|
class="room-item" :style="{color: room.roomCode === item.roomCode ? '#98C147' : ''}"
|
|
v-for="(item, index) in roomListFilter"
|
|
:key="index"
|
|
@click="selectRoom(item)"
|
|
>
|
|
<view class="room-info">
|
|
<view class="room-name">{{
|
|
item.roomNumber
|
|
}}
|
|
</view>
|
|
</view>
|
|
<view class="room-arrow">›</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
|
|
|
|
<!-- 房屋列表 -->
|
|
<!-- <view class="room-list" :style="{paddingTop: '120rpx'}">-->
|
|
<!-- <view-->
|
|
<!-- class="room-item"-->
|
|
<!-- v-for="(item, index) in filteredRoomList"-->
|
|
<!-- :key="index"-->
|
|
<!-- @click="selectRoom(item)"-->
|
|
<!-- >-->
|
|
<!-- <view class="room-info">-->
|
|
<!-- <view class="room-name">{{ item.title }}</view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="room-arrow">›</view>-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
|
|
<!-- <!– 加载状态 –>-->
|
|
<!-- <view class="loading-container" v-if="loading">-->
|
|
<!-- <text class="loading-text">加载中...</text>-->
|
|
<!-- </view>-->
|
|
|
|
<!-- <!– 空状态 –>-->
|
|
<!-- <view class="empty-container" v-if="!loading && filteredRoomList.length === 0">-->
|
|
<!-- <text class="empty-text">暂无房屋数据</text>-->
|
|
<!-- </view>-->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {miniRoomListReq, roomListReq} from '@/api/common.js'
|
|
import {listBuildingReq, listUnitReq} from "@/api/room";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
statusBarHeight: 0,
|
|
searchKeyword: '',
|
|
buildingList: [],
|
|
buildingListFilter: [],
|
|
unitList: [],
|
|
unitListFilter: [],
|
|
roomList: [],
|
|
roomListFilter: [],
|
|
filteredRoomList: [],
|
|
loading: true,
|
|
villageCode: '',
|
|
buildingCode: '',
|
|
unitCode: '',
|
|
tabList: [
|
|
{
|
|
name: '楼栋',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '单元',
|
|
disabled: true
|
|
},
|
|
{
|
|
name: '房号',
|
|
disabled: true
|
|
},
|
|
],
|
|
tabIndex: 0,
|
|
building: null,
|
|
unit: null,
|
|
room: null,
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
// 获取状态栏高度
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
this.statusBarHeight = systemInfo.statusBarHeight
|
|
|
|
// 获取传入的小区代码
|
|
if (options.villageCode) {
|
|
this.villageCode = options.villageCode
|
|
}
|
|
|
|
// 加载房屋列表
|
|
// this.loadRoomList()
|
|
this.getBuildingList()
|
|
const eventChannel = this.getOpenerEventChannel();
|
|
eventChannel.on('roomData', async data => {
|
|
console.log(data)
|
|
if (data) {
|
|
this.tabList[1].disabled = false
|
|
this.tabList[2].disabled = false
|
|
this.buildingCode = data.baseBuildingBuildCode
|
|
this.unitCode = data.baseUnitUnitCode
|
|
await this.getBuildingList()
|
|
this.building = this.buildingList.find(item => item.buildCode === data.baseBuildingBuildCode)
|
|
await this.getUnitList()
|
|
this.unit = this.unitList.find(item => item.unitCode === data.baseUnitUnitCode)
|
|
await this.getRoomList()
|
|
this.room = data
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
goBack() {
|
|
uni.navigateBack()
|
|
},
|
|
changeTab({index}) {
|
|
this.tabIndex = index
|
|
},
|
|
async getBuildingList() {
|
|
const {data} = await listBuildingReq({
|
|
baseVillageVillageCode: this.villageCode
|
|
})
|
|
const list = data.filter(item => item.isDeleted === 0)
|
|
this.buildingList = JSON.parse(JSON.stringify(list))
|
|
this.buildingListFilter = list
|
|
},
|
|
onSearchInput() {
|
|
console.log(this.searchKeyword)
|
|
if (this.tabIndex === 0) {
|
|
if (!this.searchKeyword) this.buildingListFilter = this.buildingList
|
|
else this.buildingListFilter = this.buildingList.filter(item => item.name.includes(this.searchKeyword))
|
|
} else if (this.tabIndex === 1) {
|
|
if (!this.searchKeyword) this.unitListFilter = this.unitList
|
|
else this.unitListFilter = this.unitList.filter(item => item.name.includes(this.searchKeyword))
|
|
} else if (this.tabIndex === 2) {
|
|
if (!this.searchKeyword) this.roomListFilter = this.roomList
|
|
else this.roomListFilter = this.roomList.filter(item => item.roomNumber.includes(this.searchKeyword))
|
|
}
|
|
this.$forceUpdate()
|
|
console.log(this.buildingListFilter)
|
|
},
|
|
selectBuilding(building) {
|
|
this.building = building
|
|
this.buildingCode = building.buildCode
|
|
this.tabList[1].disabled = false
|
|
this.tabIndex = 1
|
|
this.searchKeyword = ''
|
|
uni.pageScrollTo( {scrollTop: 0})
|
|
this.getUnitList()
|
|
},
|
|
async getUnitList() {
|
|
const {data} = await listUnitReq({
|
|
baseBuildingBuildCode: this.buildingCode
|
|
})
|
|
this.unitList = JSON.parse(JSON.stringify(data))
|
|
this.unitListFilter = data
|
|
},
|
|
selectUnit(unit) {
|
|
this.unit = unit
|
|
this.unitCode = unit.unitCode
|
|
this.tabList[2].disabled = false
|
|
this.tabIndex = 2
|
|
this.searchKeyword = ''
|
|
uni.pageScrollTo( {scrollTop: 0})
|
|
this.getRoomList()
|
|
},
|
|
async getRoomList() {
|
|
const {data} = await miniRoomListReq({
|
|
baseUnitUnitCode: this.unitCode
|
|
})
|
|
const list = data.map(item => {
|
|
item.title = ''
|
|
if (item.building) item.title = item.building
|
|
if (item.unit) item.title += item.unit
|
|
item.title += item.roomNumber
|
|
return item
|
|
}).filter(item => !item.owner )
|
|
this.roomList = JSON.parse(JSON.stringify(list))
|
|
this.roomListFilter = list
|
|
},
|
|
selectRoom(room) {
|
|
this.room = room
|
|
const eventChannel = this.getOpenerEventChannel();
|
|
eventChannel.emit('select', room);
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.select-room-page {
|
|
min-height: 100vh;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.search-container {
|
|
padding: 24rpx 32rpx;
|
|
background: #fff;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #f5f5f5;
|
|
border-radius: 48rpx;
|
|
padding: 0 32rpx;
|
|
height: 80rpx;
|
|
}
|
|
|
|
.search-icon {
|
|
font-size: 32rpx;
|
|
color: #999;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.search-input {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.room-list {
|
|
background: #fff;
|
|
margin-top: 16rpx;
|
|
min-height: calc(100vh - 200rpx);
|
|
}
|
|
|
|
.room-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 32rpx;
|
|
border-bottom: 1rpx solid #f5f5f5;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
&:active {
|
|
background: #f8f8f8;
|
|
}
|
|
}
|
|
|
|
.room-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.room-name {
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
font-weight: 500;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.room-detail {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.room-arrow {
|
|
font-size: 36rpx;
|
|
color: #ccc;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.loading-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 80rpx 0;
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.empty-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 120rpx 0;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
</style>
|