我的小区-选择房源-楼层点击加底色
This commit is contained in:
赵毅
parent
485145d706
commit
a89e4290b6
@ -1,39 +1,57 @@
|
|||||||
<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
|
||||||
</div>
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_choseAddress.png"
|
||||||
</div>
|
></image>
|
||||||
|
</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"
|
||||||
</div>
|
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)" -->
|
<!-- @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
|
||||||
<div class="communityItem_left">
|
class="communityItem"
|
||||||
<div class="communityItem_tit">{{item.name}}</div>
|
v-for="item in communityList"
|
||||||
<div class="communityItem_address">{{item.addr}}</div>
|
:key="item.community_id"
|
||||||
</div>
|
@click="nextStep(item)"
|
||||||
<div class="communityItem_right">
|
>
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communityMore.png"></image>
|
<div class="communityItem_left">
|
||||||
</div>
|
<div class="communityItem_tit">{{ item.name }}</div>
|
||||||
</div>
|
<div class="communityItem_address">{{ item.addr }}</div>
|
||||||
</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">
|
<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
|
||||||
<span>未找到相关信息的小区</span>
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"
|
||||||
</div>
|
></image>
|
||||||
</div>
|
<span>未找到相关信息的小区</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- <div class="communityBox" v-if="step == 2">
|
<!-- <div class="communityBox" v-if="step == 2">
|
||||||
<div class="search">
|
<div class="search">
|
||||||
<input type="text" placeholder="请输入楼栋名称">
|
<input type="text" placeholder="请输入楼栋名称">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
|
<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> -->
|
</div> -->
|
||||||
|
|
||||||
<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
|
||||||
</div>
|
@click="searchName"
|
||||||
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||||
|
></image>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="floorList">
|
<div class="floorList">
|
||||||
<div @click="nextStep(item)" class="floorItem" v-for="(item, index) in filteredFloorsList" :key="index">
|
<div
|
||||||
{{ item.label }}
|
@click="nextStep(item, index)"
|
||||||
</div>
|
:class="{ active: index === selectedFloorIndex }"
|
||||||
</div>
|
class="floorItem"
|
||||||
|
v-for="(item, index) in filteredFloorsList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</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
|
||||||
<span>未找到相关信息的楼栋</span>
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"
|
||||||
</div>
|
></image>
|
||||||
</div>
|
<span>未找到相关信息的楼栋</span>
|
||||||
|
</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
|
||||||
</div>
|
@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="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')"
|
||||||
</div>
|
:class="{ active2: index === selectedRoomIndex }"
|
||||||
</div>
|
class="roomItem"
|
||||||
|
v-for="(item, index) in filteredFloorsList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</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
|
||||||
<span>未找到相关信息的楼层</span>
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"
|
||||||
</div>
|
></image>
|
||||||
</div>
|
<span>未找到相关信息的楼层</span>
|
||||||
|
</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
|
||||||
</div>
|
@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="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')"
|
||||||
</div>
|
:class="{ active2: index === selectedRoomIndex }"
|
||||||
</div>
|
class="roomItem"
|
||||||
|
v-for="(item, index) in filteredFloorsList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</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
|
||||||
<span>未找到相关信息的房间</span>
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"
|
||||||
</div>
|
></image>
|
||||||
</div>
|
<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="dialogBox" v-if="dialogBoxShow">
|
<div class="dialogBoxCon1">确认选择</div>
|
||||||
<div class="dialogBoxCon">
|
<div class="dialogBoxCon2">{{ cName }}</div>
|
||||||
<div class="dialogBoxCon1">确认选择</div>
|
<div class="dialogBoxCon3">{{ facilityName + fName + rName }}</div>
|
||||||
<div class="dialogBoxCon2">{{cName}}</div>
|
<div class="dialogBoxConBtnList">
|
||||||
<div class="dialogBoxCon3">{{facilityName + fName + rName}}</div>
|
<div class="dialogBoxConBtnItem1" @click="dialogBoxShow = false">
|
||||||
<div class="dialogBoxConBtnList">
|
取消
|
||||||
<div class="dialogBoxConBtnItem1" @click="dialogBoxShow = false">取消</div>
|
</div>
|
||||||
<div class="dialogBoxConBtnItem2" @click="confirmComm">确定</div>
|
<div class="dialogBoxConBtnItem2" @click="confirmComm">确定</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { apiArr } from "../../../api/community";
|
||||||
apiArr
|
import {
|
||||||
} from '../../../api/community';
|
request,
|
||||||
import {
|
picUrl,
|
||||||
request,
|
uniqueByField,
|
||||||
picUrl,
|
menuButtonInfo,
|
||||||
uniqueByField,
|
NavgateTo,
|
||||||
menuButtonInfo,
|
} from "../../../utils";
|
||||||
NavgateTo
|
|
||||||
} from '../../../utils';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
show: false,
|
selectedFloorIndex: -1,
|
||||||
step: "1",
|
selectedRoomIndex: -1,
|
||||||
communityName: '',
|
show: false,
|
||||||
cName: '',
|
step: "1",
|
||||||
fName: '',
|
communityName: "",
|
||||||
communityId: '',
|
cName: "",
|
||||||
communityList: [],
|
fName: "",
|
||||||
facilityName: '',
|
communityId: "",
|
||||||
// foloorList: [],
|
communityList: [],
|
||||||
// floorsList: [],
|
facilityName: "",
|
||||||
rName: '',
|
// foloorList: [],
|
||||||
roomId: '',
|
// floorsList: [],
|
||||||
// roomList: [],
|
rName: "",
|
||||||
page_num: 1,
|
roomId: "",
|
||||||
page_size: 10,
|
// roomList: [],
|
||||||
dialogBoxShow: false,
|
page_num: 1,
|
||||||
searchQuery: '',
|
page_size: 10,
|
||||||
filteredFloorsList: [],
|
dialogBoxShow: false,
|
||||||
searchList: [],
|
searchQuery: "",
|
||||||
city: uni.getStorageSync('location'),
|
filteredFloorsList: [],
|
||||||
currentCommunity:""
|
searchList: [],
|
||||||
}
|
city: uni.getStorageSync("location"),
|
||||||
},
|
currentCommunity: "",
|
||||||
methods: {
|
};
|
||||||
changeAddress() {
|
},
|
||||||
this.show = true
|
methods: {
|
||||||
},
|
changeAddress() {
|
||||||
close() {
|
this.show = true;
|
||||||
this.show = false
|
},
|
||||||
},
|
close() {
|
||||||
selectArea(val) {
|
this.show = false;
|
||||||
console.log(val);
|
},
|
||||||
this.city = {
|
selectArea(val) {
|
||||||
region: val.confirmDist.ad_name.split(',').join(''),
|
console.log(val);
|
||||||
...val.confirmDist
|
this.city = {
|
||||||
}
|
region: val.confirmDist.ad_name.split(",").join(""),
|
||||||
this.searchByName();
|
...val.confirmDist,
|
||||||
this.show = false
|
};
|
||||||
},
|
this.searchByName();
|
||||||
async searchByName() {
|
this.show = false;
|
||||||
console.log(this.communityName,'zzz')
|
},
|
||||||
await request(apiArr.getAllList, "POST", {
|
async searchByName() {
|
||||||
community_id: '',
|
console.log(this.communityName, "zzz");
|
||||||
name: this.communityName,
|
await request(apiArr.getAllList, "POST", {
|
||||||
comm_code: '',
|
community_id: "",
|
||||||
ad_code: this.city.ad_code ? this.city.ad_code : uni.getStorageSync('ad_code'),
|
name: this.communityName,
|
||||||
page_num: this.page_num,
|
comm_code: "",
|
||||||
page_size: this.page_size
|
ad_code: this.city.ad_code
|
||||||
}).then(res => {
|
? this.city.ad_code
|
||||||
console.log(res.rows)
|
: uni.getStorageSync("ad_code"),
|
||||||
this.communityList = res.rows
|
page_num: this.page_num,
|
||||||
})
|
page_size: this.page_size,
|
||||||
},
|
}).then((res) => {
|
||||||
async nextStep(item) {
|
console.log(res.rows);
|
||||||
this.communityId = item.community_id ? item.community_id : this.communityId;
|
this.communityList = res.rows;
|
||||||
this.facilityName = this.facilityName ? this.facilityName : item.label;
|
});
|
||||||
this.fName = this.step == 4 ? this.fName : (this.facilityName ? item.label : '')
|
},
|
||||||
await request(apiArr.commRoomSelect, "POST", {
|
async nextStep(item, index, type = "") {
|
||||||
community_ids: item.community_id ? item.community_id : this.communityId,
|
if (type === "room") {
|
||||||
facility_names: this.facilityName,
|
this.selectedRoomIndex = index;
|
||||||
floors: this.facilityName ? (this.facilityName == this.fName ? '' : item.label) : '',
|
} else {
|
||||||
}).then(res => {
|
this.selectedFloorIndex = index;
|
||||||
this.filteredFloorsList = this.step == 4 ? this.filteredFloorsList : res.rows
|
}
|
||||||
this.searchList = res.rows
|
this.communityId = item.community_id
|
||||||
this.searchQuery = ''
|
? item.community_id
|
||||||
if (this.step == '1') {
|
: this.communityId;
|
||||||
this.step = '2';
|
this.facilityName = this.facilityName ? this.facilityName : item.label;
|
||||||
this.cName = item.name;
|
this.fName =
|
||||||
// this.foloorList = res.rows
|
this.step == 4 ? this.fName : this.facilityName ? item.label : "";
|
||||||
} else if (this.step == '2') {
|
await request(apiArr.commRoomSelect, "POST", {
|
||||||
this.step = '3';
|
community_ids: item.community_id ? item.community_id : this.communityId,
|
||||||
// this.floorsList = res.rows
|
facility_names: this.facilityName,
|
||||||
} else if (this.step == '3') {
|
floors: this.facilityName
|
||||||
console.log(item.label);
|
? this.facilityName == this.fName
|
||||||
this.fName = item.label;
|
? ""
|
||||||
// this.roomList = res.rows
|
: item.label
|
||||||
this.step = '4';
|
: "",
|
||||||
} else {
|
}).then((res) => {
|
||||||
this.dialogBoxShow = true;
|
this.filteredFloorsList =
|
||||||
this.rName = item.label
|
this.step == 4 ? this.filteredFloorsList : res.rows;
|
||||||
this.romId = item.value
|
this.searchList = res.rows;
|
||||||
}
|
this.searchQuery = "";
|
||||||
})
|
if (this.step == "1") {
|
||||||
},
|
this.step = "2";
|
||||||
searchName() {
|
this.cName = item.name;
|
||||||
// 根据输入框内容进行模糊查询
|
// this.foloorList = res.rows
|
||||||
this.filteredFloorsList = this.searchList.filter(item =>
|
} else if (this.step == "2") {
|
||||||
item.label.includes(this.searchQuery)
|
this.step = "3";
|
||||||
);
|
// this.floorsList = res.rows
|
||||||
},
|
} else if (this.step == "3") {
|
||||||
confirmComm() {
|
console.log(item.label);
|
||||||
const params = {
|
this.fName = item.label;
|
||||||
changeVal: `${this.cName}${this.facilityName}${this.fName}${this.rName}`,
|
// this.roomList = res.rows
|
||||||
community_id: this.communityId,
|
this.step = "4";
|
||||||
room_id: this.romId
|
} else {
|
||||||
};
|
this.dialogBoxShow = true;
|
||||||
console.log(params)
|
this.rName = item.label;
|
||||||
// 手动创建查询字符串
|
this.romId = item.value;
|
||||||
function createQueryString(params) {
|
}
|
||||||
return Object.keys(params)
|
});
|
||||||
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`)
|
},
|
||||||
.join('&');
|
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 targetPath = "/packages/community/addCommunity/index";
|
||||||
const queryString = createQueryString(params);
|
const queryString = createQueryString(params);
|
||||||
const fullPath = `${targetPath}?${queryString}`;
|
const fullPath = `${targetPath}?${queryString}`;
|
||||||
|
|
||||||
// 调用导航方法
|
// 调用导航方法
|
||||||
NavgateTo(fullPath);
|
NavgateTo(fullPath);
|
||||||
},
|
},
|
||||||
|
|
||||||
//选择小区
|
//选择小区
|
||||||
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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user