maguodong/uniapp-ZHSQ
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

我的小区-选择房源-楼层点击加底色

Browse Source
This commit is contained in:
赵毅 2025-07-31 09:11:48 +08:00
parent 485145d706
commit a89e4290b6
1 changed files with 307 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

262
packages/community/choseCommunity/index.vue
View File

@ -1,34 +1,52 @@
<template> <template>
<div class="container"> <div class="container">
<div class="currentAdd"> <div class="currentAdd">
<div class="currentAdd_left">{{city.region}}</div> <div class="currentAdd_left">{{ city.region }}</div>
<div class="currentAdd_right" @click="changeAddress"> <div class="currentAdd_right" @click="changeAddress">
切换城市 切换城市
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_choseAddress.png"></image> <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_choseAddress.png"
></image>
</div> </div>
</div> </div>
<div class="communityBox" v-if="step == 1"> <div class="communityBox" v-if="step == 1">
<div class="search"> <div class="search">
<input type="text" placeholder="请输入小区名称" v-model="communityName"> <input
<image @click="searchByName" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image> 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>
<!-- @click="chooseCommunity(item)" --> <!-- @click="chooseCommunity(item)" -->
<div class="communityList"> <div class="communityList">
<div class="communityItem" v-for="item in communityList" :key="item.community_id" @click="nextStep(item)"> <div
class="communityItem"
v-for="item in communityList"
:key="item.community_id"
@click="nextStep(item)"
>
<div class="communityItem_left"> <div class="communityItem_left">
<div class="communityItem_tit">{{item.name}}</div> <div class="communityItem_tit">{{ item.name }}</div>
<div class="communityItem_address">{{item.addr}}</div> <div class="communityItem_address">{{ item.addr }}</div>
</div> </div>
<div class="communityItem_right"> <div class="communityItem_right">
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communityMore.png"></image> <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communityMore.png"
></image>
</div> </div>
</div> </div>
</div> </div>
<div class="empty" v-if="communityList.length == 0"> <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> <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"
></image>
<span>未找到相关信息的小区</span> <span>未找到相关信息的小区</span>
</div> </div>
</div> </div>
@ -53,70 +71,104 @@
<div class="communityBox" v-if="step == 2"> <div class="communityBox" v-if="step == 2">
<div class="search"> <div class="search">
<input v-model="searchQuery" type="text" placeholder="请输入楼栋名称"> <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> <image
@click="searchName"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
></image>
</div> </div>
<div class="floorList"> <div class="floorList">
<div @click="nextStep(item)" class="floorItem" v-for="(item, index) in filteredFloorsList" :key="index"> <div
@click="nextStep(item, index)"
:class="{ active: index === selectedFloorIndex }"
class="floorItem"
v-for="(item, index) in filteredFloorsList"
:key="index"
>
{{ item.label }} {{ item.label }}
</div> </div>
</div> </div>
<div class="empty" v-if="filteredFloorsList.length === 0"> <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> <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"
></image>
<span>未找到相关信息的楼栋</span> <span>未找到相关信息的楼栋</span>
</div> </div>
</div> </div>
<div class="communityBox" v-if="step == 3"> <div class="communityBox" v-if="step == 3">
<div class="search"> <div class="search">
<input v-model="searchQuery" type="text" placeholder="请输入楼层名称"> <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> <image
@click="searchName"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
></image>
</div> </div>
<div class="roomList"> <div class="roomList">
<!-- <div class="roomItem" v-for="(item,index) in 5" :class="index == 1?'active2':''"> --> <!-- <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"> <div
{{item.label}} @click="nextStep(item, index, 'room')"
:class="{ active2: index === selectedRoomIndex }"
class="roomItem"
v-for="(item, index) in filteredFloorsList"
:key="index"
>
{{ item.label }}
</div> </div>
</div> </div>
<div class="empty" v-if="filteredFloorsList.length === 0"> <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> <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"
></image>
<span>未找到相关信息的楼层</span> <span>未找到相关信息的楼层</span>
</div> </div>
</div> </div>
<div class="communityBox" v-if="step == 4"> <div class="communityBox" v-if="step == 4">
<div class="search"> <div class="search">
<input v-model="searchQuery" type="text" placeholder="请输入房间名称"> <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> <image
@click="searchName"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
></image>
</div> </div>
<div class="roomList"> <div class="roomList">
<!-- <div class="roomItem" v-for="(item,index) in 5" :class="index == 1?'active2':''"> --> <!-- <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"> <div
{{item.label}} @click="nextStep(item, index, 'room')"
:class="{ active2: index === selectedRoomIndex }"
class="roomItem"
v-for="(item, index) in filteredFloorsList"
:key="index"
>
{{ item.label }}
</div> </div>
</div> </div>
<div class="empty" v-if="filteredFloorsList.length === 0"> <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> <image
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"
></image>
<span>未找到相关信息的房间</span> <span>未找到相关信息的房间</span>
</div> </div>
</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="dialogBox" v-if="dialogBoxShow">
<div class="dialogBoxCon"> <div class="dialogBoxCon">
<div class="dialogBoxCon1">确认选择</div> <div class="dialogBoxCon1">确认选择</div>
<div class="dialogBoxCon2">{{cName}}</div> <div class="dialogBoxCon2">{{ cName }}</div>
<div class="dialogBoxCon3">{{facilityName + fName + rName}}</div> <div class="dialogBoxCon3">{{ facilityName + fName + rName }}</div>
<div class="dialogBoxConBtnList"> <div class="dialogBoxConBtnList">
<div class="dialogBoxConBtnItem1" @click="dialogBoxShow = false">取消</div> <div class="dialogBoxConBtnItem1" @click="dialogBoxShow = false">
取消
</div>
<div class="dialogBoxConBtnItem2" @click="confirmComm">确定</div> <div class="dialogBoxConBtnItem2" @click="confirmComm">确定</div>
</div> </div>
</div> </div>
@ -125,107 +177,122 @@
</template> </template>
<script> <script>
import { import { apiArr } from "../../../api/community";
apiArr import {
} from '../../../api/community';
import {
request, request,
picUrl, picUrl,
uniqueByField, uniqueByField,
menuButtonInfo, menuButtonInfo,
NavgateTo NavgateTo,
} from '../../../utils'; } from "../../../utils";
export default { export default {
data() { data() {
return { return {
selectedFloorIndex: -1,
selectedRoomIndex: -1,
show: false, show: false,
step: "1", step: "1",
communityName: '', communityName: "",
cName: '', cName: "",
fName: '', fName: "",
communityId: '', communityId: "",
communityList: [], communityList: [],
facilityName: '', facilityName: "",
// foloorList: [], // foloorList: [],
// floorsList: [], // floorsList: [],
rName: '', rName: "",
roomId: '', roomId: "",
// roomList: [], // roomList: [],
page_num: 1, page_num: 1,
page_size: 10, page_size: 10,
dialogBoxShow: false, dialogBoxShow: false,
searchQuery: '', searchQuery: "",
filteredFloorsList: [], filteredFloorsList: [],
searchList: [], searchList: [],
city: uni.getStorageSync('location'), city: uni.getStorageSync("location"),
currentCommunity:"" currentCommunity: "",
} };
}, },
methods: { methods: {
changeAddress() { changeAddress() {
this.show = true this.show = true;
}, },
close() { close() {
this.show = false this.show = false;
}, },
selectArea(val) { selectArea(val) {
console.log(val); console.log(val);
this.city = { this.city = {
region: val.confirmDist.ad_name.split(',').join(''), region: val.confirmDist.ad_name.split(",").join(""),
...val.confirmDist ...val.confirmDist,
} };
this.searchByName(); this.searchByName();
this.show = false this.show = false;
}, },
async searchByName() { async searchByName() {
console.log(this.communityName,'zzz') console.log(this.communityName, "zzz");
await request(apiArr.getAllList, "POST", { await request(apiArr.getAllList, "POST", {
community_id: '', community_id: "",
name: this.communityName, name: this.communityName,
comm_code: '', comm_code: "",
ad_code: this.city.ad_code ? this.city.ad_code : uni.getStorageSync('ad_code'), ad_code: this.city.ad_code
? this.city.ad_code
: uni.getStorageSync("ad_code"),
page_num: this.page_num, page_num: this.page_num,
page_size: this.page_size page_size: this.page_size,
}).then(res => { }).then((res) => {
console.log(res.rows) console.log(res.rows);
this.communityList = res.rows this.communityList = res.rows;
}) });
}, },
async nextStep(item) { async nextStep(item, index, type = "") {
this.communityId = item.community_id ? item.community_id : this.communityId; 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.facilityName = this.facilityName ? this.facilityName : item.label;
this.fName = this.step == 4 ? this.fName : (this.facilityName ? item.label : '') this.fName =
this.step == 4 ? this.fName : this.facilityName ? item.label : "";
await request(apiArr.commRoomSelect, "POST", { await request(apiArr.commRoomSelect, "POST", {
community_ids: item.community_id ? item.community_id : this.communityId, community_ids: item.community_id ? item.community_id : this.communityId,
facility_names: this.facilityName, facility_names: this.facilityName,
floors: this.facilityName ? (this.facilityName == this.fName ? '' : item.label) : '', floors: this.facilityName
}).then(res => { ? this.facilityName == this.fName
this.filteredFloorsList = this.step == 4 ? this.filteredFloorsList : res.rows ? ""
this.searchList = res.rows : item.label
this.searchQuery = '' : "",
if (this.step == '1') { }).then((res) => {
this.step = '2'; 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.cName = item.name;
// this.foloorList = res.rows // this.foloorList = res.rows
} else if (this.step == '2') { } else if (this.step == "2") {
this.step = '3'; this.step = "3";
// this.floorsList = res.rows // this.floorsList = res.rows
} else if (this.step == '3') { } else if (this.step == "3") {
console.log(item.label); console.log(item.label);
this.fName = item.label; this.fName = item.label;
// this.roomList = res.rows // this.roomList = res.rows
this.step = '4'; this.step = "4";
} else { } else {
this.dialogBoxShow = true; this.dialogBoxShow = true;
this.rName = item.label this.rName = item.label;
this.romId = item.value this.romId = item.value;
} }
}) });
}, },
searchName() { searchName() {
// 根据输入框内容进行模糊查询 // 根据输入框内容进行模糊查询
this.filteredFloorsList = this.searchList.filter(item => this.filteredFloorsList = this.searchList.filter((item) =>
item.label.includes(this.searchQuery) item.label.includes(this.searchQuery)
); );
}, },
@ -233,14 +300,17 @@
const params = { const params = {
changeVal: `${this.cName}${this.facilityName}${this.fName}${this.rName}`, changeVal: `${this.cName}${this.facilityName}${this.fName}${this.rName}`,
community_id: this.communityId, community_id: this.communityId,
room_id: this.romId room_id: this.romId,
}; };
console.log(params) console.log(params);
// 手动创建查询字符串 // 手动创建查询字符串
function createQueryString(params) { function createQueryString(params) {
return Object.keys(params) return Object.keys(params)
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`) .map(
.join('&'); (key) =>
`${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`
)
.join("&");
} }
// 拼接路径和参数 // 拼接路径和参数
@ -253,33 +323,31 @@
}, },
//选择小区 //选择小区
chooseCommunity(e){ chooseCommunity(e) {
this.currentCommunity = e this.currentCommunity = e;
this.getRoomSelect() this.getRoomSelect();
}, },
//选择楼栋 //选择楼栋
getRoomSelect(){ getRoomSelect() {
request(apiArr.commRoomSelect,"POST",{ request(apiArr.commRoomSelect, "POST", {
community_ids:this.currentCommunity.community_id, community_ids: this.currentCommunity.community_id,
}).then(res=>{ }).then((res) => {
console.log(res); console.log(res);
this.step = 2 this.step = 2;
}) });
}, },
}, },
onLoad(options) { onLoad(options) {
const meun = menuButtonInfo(); const meun = menuButtonInfo();
this.searchByName() this.searchByName();
}, },
onReachBottom() { onReachBottom() {},
};
},
}
</script> </script>
<style> <style>
@import url("./index.css"); @import url("./index.css");
</style> </style>