From a89e4290b60441b6bae1d27f0a8da74dbe3bf494 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=AF=85?= <1335909236@qq.com>
Date: Thu, 31 Jul 2025 09:11:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=91=E7=9A=84=E5=B0=8F=E5=8C=BA-=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E6=88=BF=E6=BA=90-=E6=A5=BC=E5=B1=82=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E5=8A=A0=E5=BA=95=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/community/choseCommunity/index.vue | 546 +++++++++++---------
 1 file changed, 307 insertions(+), 239 deletions(-)

diff --git a/packages/community/choseCommunity/index.vue b/packages/community/choseCommunity/index.vue
index 810add8f..78f88d6c 100644
--- a/packages/community/choseCommunity/index.vue
+++ b/packages/community/choseCommunity/index.vue
@@ -1,39 +1,57 @@
 <template>
-	<div class="container">
-		<div class="currentAdd">
-			<div class="currentAdd_left">{{city.region}}</div>
-			<div class="currentAdd_right" @click="changeAddress">
-				切换城市
-				<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_choseAddress.png"></image>
-			</div>
-		</div>
+  <div class="container">
+    <div class="currentAdd">
+      <div class="currentAdd_left">{{ city.region }}</div>
+      <div class="currentAdd_right" @click="changeAddress">
+        切换城市
+        <image
+          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
-			</div>
+    <div class="communityBox" v-if="step == 1">
+      <div class="search">
+        <input
+          type="text"
+          placeholder="请输入小区名称"
+          v-model="communityName"
+        />
+        <image
+          @click="searchByName"
+          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
+        ></image>
+      </div>
 
-			<!-- @click="chooseCommunity(item)" -->
-			<div class="communityList">
-				<div class="communityItem" v-for="item in communityList" :key="item.community_id"  @click="nextStep(item)">
-					<div class="communityItem_left">
-						<div class="communityItem_tit">{{item.name}}</div>
-						<div class="communityItem_address">{{item.addr}}</div>
-					</div>
-					<div class="communityItem_right">
-						<image  src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communityMore.png"></image>
-					</div>
-				</div>
-			</div>
+      <!-- @click="chooseCommunity(item)" -->
+      <div class="communityList">
+        <div
+          class="communityItem"
+          v-for="item in communityList"
+          :key="item.community_id"
+          @click="nextStep(item)"
+        >
+          <div class="communityItem_left">
+            <div class="communityItem_tit">{{ item.name }}</div>
+            <div class="communityItem_address">{{ item.addr }}</div>
+          </div>
+          <div class="communityItem_right">
+            <image
+              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communityMore.png"
+            ></image>
+          </div>
+        </div>
+      </div>
 
-			<div class="empty" v-if="communityList.length == 0">
-				<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"></image>
-				<span>未找到相关信息的小区</span>
-			</div>
-		</div>
+      <div class="empty" v-if="communityList.length == 0">
+        <image
+          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"
+        ></image>
+        <span>未找到相关信息的小区</span>
+      </div>
+    </div>
 
-		<!-- <div class="communityBox" v-if="step == 2">
+    <!-- <div class="communityBox" v-if="step == 2">
 			<div class="search">
 				<input type="text" placeholder="请输入楼栋名称">
 				<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
@@ -51,235 +69,285 @@
 			</div>
 		</div> -->
 
-		<div class="communityBox" v-if="step == 2">
-			<div class="search">
-				<input v-model="searchQuery" type="text" placeholder="请输入楼栋名称">
-				<image @click="searchName" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
-			</div>
+    <div class="communityBox" v-if="step == 2">
+      <div class="search">
+        <input v-model="searchQuery" type="text" placeholder="请输入楼栋名称" />
+        <image
+          @click="searchName"
+          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="floorList">
+        <div
+          @click="nextStep(item, index)"
+          :class="{ active: index === selectedFloorIndex }"
+          class="floorItem"
+          v-for="(item, index) in filteredFloorsList"
+          :key="index"
+        >
+          {{ item.label }}
+        </div>
+      </div>
 
-			<div class="empty" v-if="filteredFloorsList.length === 0">
-				<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"></image>
-				<span>未找到相关信息的楼栋</span>
-			</div>
-		</div>
+      <div class="empty" v-if="filteredFloorsList.length === 0">
+        <image
+          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
-			</div>
+    <div class="communityBox" v-if="step == 3">
+      <div class="search">
+        <input v-model="searchQuery" type="text" placeholder="请输入楼层名称" />
+        <image
+          @click="searchName"
+          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="roomList">
+        <!-- <div class="roomItem" v-for="(item,index) in 5" :class="index == 1?'active2':''"> -->
+        <div
+          @click="nextStep(item, index, 'room')"
+          :class="{ active2: index === selectedRoomIndex }"
+          class="roomItem"
+          v-for="(item, index) in filteredFloorsList"
+          :key="index"
+        >
+          {{ item.label }}
+        </div>
+      </div>
 
-			<div class="empty" v-if="filteredFloorsList.length === 0">
-				<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"></image>
-				<span>未找到相关信息的楼层</span>
-			</div>
-		</div>
+      <div class="empty" v-if="filteredFloorsList.length === 0">
+        <image
+          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
-			</div>
+    <div class="communityBox" v-if="step == 4">
+      <div class="search">
+        <input v-model="searchQuery" type="text" placeholder="请输入房间名称" />
+        <image
+          @click="searchName"
+          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="roomList">
+        <!-- <div class="roomItem" v-for="(item,index) in 5" :class="index == 1?'active2':''"> -->
+        <div
+          @click="nextStep(item, index, 'room')"
+          :class="{ active2: index === selectedRoomIndex }"
+          class="roomItem"
+          v-for="(item, index) in filteredFloorsList"
+          :key="index"
+        >
+          {{ item.label }}
+        </div>
+      </div>
 
-			<div class="empty" v-if="filteredFloorsList.length === 0">
-				<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"></image>
-				<span>未找到相关信息的房间</span>
-			</div>
-		</div>
+      <div class="empty" v-if="filteredFloorsList.length === 0">
+        <image
+          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"
+        ></image>
+        <span>未找到相关信息的房间</span>
+      </div>
+    </div>
 
+    <areaPopup :show="show" @selectArea="selectArea" @close="close"></areaPopup>
 
-		<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" @click="confirmComm">确定</div>
-				</div>
-			</div>
-		</div>
-	</div>
+    <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" @click="confirmComm">确定</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	import {
-		apiArr
-	} from '../../../api/community';
-	import {
-		request,
-		picUrl,
-		uniqueByField,
-		menuButtonInfo,
-		NavgateTo
-	} from '../../../utils';
+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: '',
-				roomId: '',
-				// roomList: [],
-				page_num: 1,
-				page_size: 10,
-				dialogBoxShow: false,
-				searchQuery: '',
-				filteredFloorsList: [],
-				searchList: [],
-				city:  uni.getStorageSync('location'),
-				currentCommunity:""
-			}
-		},
-		methods: {
-			changeAddress() {
-				this.show = true
-			},
-			close() {
-				this.show = false
-			},
-			selectArea(val) {
-				console.log(val);
-				this.city = {
-					region: val.confirmDist.ad_name.split(',').join(''),
-					...val.confirmDist
-				}
-				this.searchByName();
-				this.show = false
-			},
-			async searchByName() {
-				console.log(this.communityName,'zzz')
-				await request(apiArr.getAllList, "POST", {
-					community_id: '',
-					name: this.communityName,
-					comm_code: '',
-					ad_code: this.city.ad_code ? this.city.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) {
-				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 {
-						this.dialogBoxShow = true;
-						this.rName = item.label
-						this.romId = item.value
-					}
-				})
-			},
-			searchName() {
-				// 根据输入框内容进行模糊查询
-				this.filteredFloorsList = this.searchList.filter(item =>
-					item.label.includes(this.searchQuery)
-				);
-			},
-			confirmComm() {
-				const params = {
-					changeVal: `${this.cName}${this.facilityName}${this.fName}${this.rName}`,
-					community_id: this.communityId,
-					room_id: this.romId
-				};
-				console.log(params)
-				// 手动创建查询字符串
-				function createQueryString(params) {
-					return Object.keys(params)
-						.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
-						.join('&');
-				}
+export default {
+  data() {
+    return {
+      selectedFloorIndex: -1,
+      selectedRoomIndex: -1,
+      show: false,
+      step: "1",
+      communityName: "",
+      cName: "",
+      fName: "",
+      communityId: "",
+      communityList: [],
+      facilityName: "",
+      // foloorList: [],
+      // floorsList: [],
+      rName: "",
+      roomId: "",
+      // roomList: [],
+      page_num: 1,
+      page_size: 10,
+      dialogBoxShow: false,
+      searchQuery: "",
+      filteredFloorsList: [],
+      searchList: [],
+      city: uni.getStorageSync("location"),
+      currentCommunity: "",
+    };
+  },
+  methods: {
+    changeAddress() {
+      this.show = true;
+    },
+    close() {
+      this.show = false;
+    },
+    selectArea(val) {
+      console.log(val);
+      this.city = {
+        region: val.confirmDist.ad_name.split(",").join(""),
+        ...val.confirmDist,
+      };
+      this.searchByName();
+      this.show = false;
+    },
+    async searchByName() {
+      console.log(this.communityName, "zzz");
+      await request(apiArr.getAllList, "POST", {
+        community_id: "",
+        name: this.communityName,
+        comm_code: "",
+        ad_code: this.city.ad_code
+          ? this.city.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, index, type = "") {
+      if (type === "room") {
+        this.selectedRoomIndex = index;
+      } else {
+        this.selectedFloorIndex = index;
+      }
+      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 {
+          this.dialogBoxShow = true;
+          this.rName = item.label;
+          this.romId = item.value;
+        }
+      });
+    },
+    searchName() {
+      // 根据输入框内容进行模糊查询
+      this.filteredFloorsList = this.searchList.filter((item) =>
+        item.label.includes(this.searchQuery)
+      );
+    },
+    confirmComm() {
+      const params = {
+        changeVal: `${this.cName}${this.facilityName}${this.fName}${this.rName}`,
+        community_id: this.communityId,
+        room_id: this.romId,
+      };
+      console.log(params);
+      // 手动创建查询字符串
+      function createQueryString(params) {
+        return Object.keys(params)
+          .map(
+            (key) =>
+              `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`
+          )
+          .join("&");
+      }
 
-				// 拼接路径和参数
-				const targetPath = "/packages/community/addCommunity/index";
-				const queryString = createQueryString(params);
-				const fullPath = `${targetPath}?${queryString}`;
+      // 拼接路径和参数
+      const targetPath = "/packages/community/addCommunity/index";
+      const queryString = createQueryString(params);
+      const fullPath = `${targetPath}?${queryString}`;
 
-				// 调用导航方法
-				NavgateTo(fullPath);
-			},
+      // 调用导航方法
+      NavgateTo(fullPath);
+    },
 
-			//选择小区
-			chooseCommunity(e){
-				this.currentCommunity = e
-				
-				this.getRoomSelect()
-			},
-			//选择楼栋
-			getRoomSelect(){
-				request(apiArr.commRoomSelect,"POST",{
-					community_ids:this.currentCommunity.community_id,
-				}).then(res=>{
-					console.log(res);
-					this.step = 2
-				})
-			},
-		},
+    //选择小区
+    chooseCommunity(e) {
+      this.currentCommunity = e;
 
-		onLoad(options) {
-			const meun = menuButtonInfo();
-			this.searchByName()
-		},
+      this.getRoomSelect();
+    },
+    //选择楼栋
+    getRoomSelect() {
+      request(apiArr.commRoomSelect, "POST", {
+        community_ids: this.currentCommunity.community_id,
+      }).then((res) => {
+        console.log(res);
+        this.step = 2;
+      });
+    },
+  },
 
-		onReachBottom() {
+  onLoad(options) {
+    const meun = menuButtonInfo();
+    this.searchByName();
+  },
 
-		},
-	}
+  onReachBottom() {},
+};
 </script>
 
 <style>
-	@import url("./index.css");
+@import url("./index.css");
 </style>