<template>
<uni-popup type="bottom" ref="popup">
<view class="region-container">
<view class="titles">
<view @click="close" class="close">
<image src="/static/image/icon_close.png"></image>
</view>
<view>请选择房间</view>
<view class="config" @click="onPopupConfirm">确定</view>
</view>
<view class="nav-list">
<block v-for="(currKey,index) in navList" :key="index">
<view class="item line1" :class="{'selected':currKey.isLeafNode==1}"
@click="changeNav(currKey,index)">
{{currKey.groupName}}
</view>
</block>
<view class="item line1 selected"
v-if="navList.length===0 || (navList.length>0&&navList[navList.length-1].isLeafNode == 0)">请选择
</view>
</view>
<scroll-view class="room-list" scroll-y>
<block>
<view class="a-item" hover-class="hover" v-for="(item,index) in roomList" :key="index"
@click="selectItem(item)"
:class="{'on':navList.length>0&&navList[navList.length-1].groupId === item.groupId}">
<view class="text line1">{{item.groupName}}</view>
<image class="selected-icon" src="/static/image/selected_room.png"
v-if="navList.length>0&&navList[navList.length-1].groupId === item.groupId"></image>
</view>
<view v-if="roomList.length<1" class="a-item">
<view class="no-data">暂无数据</view>
</view>
</block>
<!-- </block> -->
</scroll-view>
</view>
</uni-popup>
</template>
<script>
export default {
components: {},
created() {},
props: {
defaultRoom: {
type: Object,
default: () => {
return {
}
}
}
},
data() {
return {
roomList: [],
navList: [],
selectRoomName: '', // 已选择的房间名称
selectRoom: [], // 已选择的房间
currentRoomId: 32, //获取第一级默认传32
roomPopup: {
selectId: [],
selecValue: [], // 已选择的房间
lastChild: false, // 是否最后一个节点
roomChildList: [], // 可选择数据
},
roomInfo: {}
}
},
methods: {
open() {
if (this.selectRoom.length <= 0) {
// this.init()
this.getData(this.currentRoomId)
this.$refs.popup.open()
} else {
// this.getData(this.currentRoomId)
this.$refs.popup.open()
}
},
// async init() {
// // 获取根部区域
// this.getData(32, (res) => {
// this.roomInfo = res.data
// console.log(this.roomInfo)
// this.$refs.popup.open()
// })
// },
getData(currentRoomId) {
uni.showLoading({
title: '加载中'
});
let params = {
parentId: currentRoomId
}
this.$http.serviceApi(params, 'all', "GET").then(res => {
uni.hideLoading();
console.log(res)
let roomId = currentRoomId;
let selectArr = this.roomPopup.selectId
if (selectArr.indexOf(roomId) == -1) {
selectArr.push(roomId)
}
this.roomPopup.selectId = selectArr
// this.`roomInfo.${roomId}` = res.data
this.roomInfo[roomId] = res.data
this.roomList = res.data
})
},
//重选房间
changeNav(currKey, index) {
const currLevel = currKey.isLeafNode
// isLeafNode 0:还有子级 1:最后一层
// 最后一层不可点击
if (currLevel == 1) {
return
}
// 点击其他导航
let arr = this.navList
const currIndex = index
arr = arr.slice(0, currIndex + 1)
this.navList = arr
this.getData(arr[currIndex].groupId)
},
// changeNav2(currKey) {
// this.finish = false
// this.navKey = null
// for (let i = 0; i < this.roomKeys.length; i++) {
// if (this.selectedInfo[this.roomKeys[i]] == null) {
// this.listKey = this.roomKeys[i]
// return
// }
// }
// },
//选择房间
selectItem(item) {
console.log('点击项:', item)
let arr = this.navList
// isLeafNode 0:还有子级 1:最后一层
if (item.isLeafNode == 1) {
if (arr.length > 0) {
const last = arr[arr.length - 1]
if (last.isLeafNode == 1) {
arr = arr.slice(0, arr.length - 1)
}
}
}
arr.push(item)
this.navList = arr
if (item.isLeafNode != 1) {
this.getData(item.groupId)
}
},
// 完成选择
onPopupConfirm() {
if (this.navList.length <= 0 || this.navList[this.navList.length - 1].isLeafNode != 1) {
uni.showToast({
title: '请选择房间',
icon: 'none'
});
return
}
let text = []
this.navList.map(item => {
text.push(item.groupName)
})
this.selectRoom = this.navList
this.selectRoomName = text.join('-')
this.$emit('finish', this.selectRoom)
this.close()
},
close() {
this.$refs.popup.close()
// this.navList = []
// this.currentRoomId = 32
// this.roomInfo = {}
},
}
}
</script>
<style lang="scss" scoped>
.region-container {
background-color: #FFFFFF;
border-radius: 32rpx 32rpx 0 0;
height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
.line1 {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.titles {
color: #222;
font-size: 34rpx;
padding: 40rpx 0 10rpx;
text-align: center;
// position: relative;
font-weight: 500;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 32rpx;
padding-right: 32rpx;
margin-bottom: 20rpx;
.close {
width: 44rpx;
height: 44rpx;
image {
width: 24rpx;
height: 24rpx;
}
}
.config {
color: #2582FF;
}
}
.nav-list {
width: 100%;
padding: 0 40rpx;
display: flex;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
border-bottom: 1rpx solid #F1F1F1;
.item {
margin-right: 30rpx;
color: #222;
font-size: 30rpx;
position: relative;
padding: 20rpx 0;
transition: font-weight 0.3s;
&::after {
content: '';
display: block;
height: 6rpx;
width: 100%;
position: absolute;
bottom: 0rpx;
left: 50%;
transform: translateX(-50%);
background-color: transparent;
transition: background-color 0.3s;
}
&.selected {
font-weight: 500;
&::after {
background: linear-gradient(90deg, #406FFD 0%, #5890FF 100%);
border-radius: 4rpx;
}
}
}
}
::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
background-color: transparent !important;
}
.room-list {
position: relative;
// flex: 1;
// height: 1px;
width: 100%;
height: 600rpx;
.a-item {
padding: 0 40rpx;
height: 88rpx;
color: #222;
font-size: 32rpx;
transition: background-color 0.1s;
display: flex;
justify-content: space-between;
align-items: center;
&.on {
color: #3377FF;
}
.text {
width: 90%;
}
.selected-icon {
width: 24rpx;
height: 24rpx;
}
&.hover {
background-color: #e9e9e9;
}
}
.search-box {
width: calc(100% - 80rpx);
margin: 40rpx 40rpx 0;
height: 72rpx;
background: #F7F7F7;
border-radius: 8rpx;
justify-content: flex-start;
image {
margin-left: 24rpx;
margin-right: 10rpx;
width: 24rpx;
height: 24rpx;
}
input {
font-size: 28rpx;
color: #666;
background-color: transparent;
}
.input-placeholder {
font-size: 26rpx;
color: #CCCCCC;
}
}
.roomnum-list {
width: calc(100% - 80rpx);
padding: 40rpx 40rpx 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
.num-item {
width: 140rpx;
height: 72rpx;
line-height: 72rpx;
text-align: center;
border: 2rpx solid #EEEEEE;
border-radius: 8rpx;
font-size: 26rpx;
color: #666;
margin-right: calc((100% - 560rpx) / 4);
margin-bottom: 30rpx;
&.on {
border-color: #3377FF;
color: #3377FF;
}
}
.num-item:nth-child(4n) {
margin-right: 0;
}
}
}
.no-data {
color: #999;
}
}
</style>
组织机构组件-自用
于 2023-12-26 15:07:06 首次发布