uniapp-ZHSQ/packages/community/choseCommunity/index.vue

<template>
	<div class="container">
		<div class="currentAdd">
			<div class="currentAdd_left">河北省衡水市桃城区</div>
			<div class="currentAdd_right" @click="changeAddress">
				切换城市
				<image src="http://192.168.0.172:5500/com_choseAddress.png"></image>
			</div>
		</div>

		<div class="communityBox" v-if="step == 1">
			<div class="search">
				<input type="text" placeholder="请输入小区名称" v-model="communityName">
				<image @click="searchByName" src="http://192.168.0.172:5500/com_communitySearchIcon.png"></image>
			</div>

			<div class="communityList">
				<div class="communityItem" v-for="item in communityList">
					<div class="communityItem_left">
						<div class="communityItem_tit">{{item.name}}</div>
						<div class="communityItem_address">{{item.addr}}</div>
					</div>
					<div class="communityItem_right">
						<image @click="nextStep(item)"
							src="http://192.168.0.172:5500/com_communityMore.png"></image>
					</div>
				</div>
			</div>

			<div class="empty" v-if="!communityList">
				<image src="http://192.168.0.172:5500/com_noSearch.png"></image>
				<span>未找到相关信息的小区</span>
			</div>
		</div>

		<!-- <div class="communityBox" v-if="step == 2">
			<div class="search">
				<input type="text" placeholder="请输入楼栋名称">
				<image src="http://192.168.0.172:5500/com_communitySearchIcon.png"></image>
			</div>

			<div class="floorList">
				<div @click="nextStep(item)" class="floorItem" v-for="(item,index) in foloorList" :key="index">
					{{item.label}}
				</div>
			</div>

			<div class="empty" v-if="!foloorList">
				<image src="http://192.168.0.172:5500/com_noSearch.png"></image>
				<span>未找到相关信息的楼栋</span>
			</div>
		</div> -->

		<div class="communityBox" v-if="step == 2">
			<div class="search">
				<input v-model="searchQuery" type="text" placeholder="请输入楼栋名称">
				<image @click="searchName" src="http://192.168.0.172:5500/com_communitySearchIcon.png"></image>
			</div>

			<div class="floorList">
				<div @click="nextStep(item)" class="floorItem" v-for="(item, index) in filteredFloorsList" :key="index">
					{{ item.label }}
				</div>
			</div>

			<div class="empty" v-if="filteredFloorsList.length === 0">
				<image src="http://192.168.0.172:5500/com_noSearch.png"></image>
				<span>未找到相关信息的楼栋</span>
			</div>
		</div>

		<div class="communityBox" v-if="step == 3">
			<div class="search">
				<input v-model="searchQuery" type="text" placeholder="请输入楼层名称">
				<image @click="searchName" src="http://192.168.0.172:5500/com_communitySearchIcon.png"></image>
			</div>

			<div class="roomList">
				<!-- <div class="roomItem" v-for="(item,index) in 5" :class="index == 1?'active2':''"> -->
				<div @click="nextStep(item)" class="roomItem" v-for="(item,index) in filteredFloorsList" :key="index">
					{{item.label}}
				</div>
			</div>

			<div class="empty" v-if="filteredFloorsList.length === 0">
				<image src="http://192.168.0.172:5500/com_noSearch.png"></image>
				<span>未找到相关信息的楼层</span>
			</div>
		</div>

		<div class="communityBox" v-if="step == 4">
			<div class="search">
				<input v-model="searchQuery" type="text" placeholder="请输入房间名称">
				<image @click="searchName" src="http://192.168.0.172:5500/com_communitySearchIcon.png"></image>
			</div>

			<div class="roomList">
				<!-- <div class="roomItem" v-for="(item,index) in 5" :class="index == 1?'active2':''"> -->
				<div @click="nextStep(item)" class="roomItem" v-for="(item,index) in filteredFloorsList" :key="index">
					{{item.label}}
				</div>
			</div>

			<div class="empty" v-if="filteredFloorsList.length === 0">
				<image src="http://192.168.0.172:5500/com_noSearch.png"></image>
				<span>未找到相关信息的房间</span>
			</div>
		</div>


		<areaPopup :show="show" @selectArea="selectArea" @close="close"></areaPopup>

		<div class="dialogBox" v-if="dialogBoxShow">
			<div class="dialogBoxCon">
				<div class="dialogBoxCon1">确认选择</div>
				<div class="dialogBoxCon2">{{cName}}</div>
				<div class="dialogBoxCon3">{{facilityName + fName + rName}}</div>
				<div class="dialogBoxConBtnList">
					<div class="dialogBoxConBtnItem1" @click="dialogBoxShow = false">取消</div>
					<div class="dialogBoxConBtnItem2">确定</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		apiArr
	} from '../../../api/community';
	import {
		request,
		picUrl,
		uniqueByField,
		menuButtonInfo,
		NavgateTo
	} from '../../../utils';

	export default {
		data() {
			return {
				show: false,
				step: "1",
				communityName: '',
				cName: '',
				fName: '',
				communityId: '',
				communityList: [],
				facilityName: '',
				// foloorList: [],
				// floorsList: [],
				rName: '',
				// roomList: [],
				page_num: 1,
				page_size: 10,
				dialogBoxShow: false,
				searchQuery: '',
				filteredFloorsList: [],
				searchList:[]
			}
		},
		methods: {
			changeAddress() {
				this.show = true
			},
			close() {
				this.show = false
			},
			selectArea(e1) {
				console.log(e1);
				this.show = false
			},
			async searchByName() {
				console.log(this.communityName)
				await request(apiArr.getAllList, "POST", {
					community_id: '',
					name: this.communityName,
					comm_code: '',
					ad_code: uni.getStorageSync('ad_code'),
					page_num: this.page_num,
					page_size: this.page_size
				}).then(res => {
					console.log(res.rows)
					this.communityList = res.rows
				})
			},
			async nextStep(item) {
				console.log(item)
				this.communityId = item.community_id ? item.community_id : this.communityId;
				this.facilityName = this.facilityName ? this.facilityName : item.label;
				this.fName = this.step == 4 ? this.fName : (this.facilityName ? item.label : '')
				await request(apiArr.commRoomSelect, "POST", {
					community_ids: item.community_id ? item.community_id : this.communityId,
					facility_names: this.facilityName,
					floors: this.facilityName ? (this.facilityName == this.fName ? '' : item.label) : '',
				}).then(res => {
					this.filteredFloorsList = this.step == 4 ? this.filteredFloorsList : res.rows
					this.searchList = res.rows
					this.searchQuery = ''
					if (this.step == '1') {
						this.step = '2';
						this.cName = item.name;
						// this.foloorList = res.rows
					} else if (this.step == '2') {
						this.step = '3';
						// this.floorsList = res.rows
					} else if (this.step == '3') {
						console.log(item.label);
						this.fName = item.label;
						// this.roomList = res.rows
						this.step = '4';
					} else {
				console.log(this.step)
						this.dialogBoxShow = true;
						this.rName = item.label
					}
				})
			},
			searchName() {
				// 根据输入框内容进行模糊查询
				this.filteredFloorsList = this.searchList.filter(item =>
					item.label.includes(this.searchQuery)
				);
			},
		},

		onLoad(options) {
			const meun = menuButtonInfo();
			this.searchByName()
		},

		onReachBottom() {

		},
	}
</script>

<style>
	@import url("./index.css");
</style>