XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

4.6

Browse Source
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-05-16 19:09:20 +08:00
parent 0946bddb11
commit fbb5a6599d
14 changed files with 855 additions and 714 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/publicImage/inspect-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
src/assets/img/publicImage/more-recommend.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/img/publicImage/return-visit.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

5
src/assets/styles/apartmentDetail.css
View File

@@ -393,7 +393,7 @@
font-weight: 400;
font-size: 14px;
color: #7f7f7f;
padding: 0 17px;
padding: 0 12px;
cursor: pointer;
}
.content .operate-box-bj .operate-box .nav-box .nav-item:hover {
@@ -651,6 +651,7 @@
border-radius: 16px;
margin-right: 20px;
position: relative;
cursor: pointer;
}
.content .details-box .details-left .type-box .item .media .icon {
width: 110px;
@@ -760,6 +761,8 @@
margin-right: 8px;
}
.content .details-box .details-left .type-box .item .btn .full-rent {
width: 100px;
height: 36px;
font-size: 15px;
color: #aaaaaa;
background-color: #f2f2f2;

6
src/assets/styles/apartmentDetail.less
View File

@@ -515,7 +515,7 @@
font-weight: 400;
font-size: 14px;
color: #7f7f7f;
padding: 0 17px;
padding: 0 12px;
cursor: pointer;
&:hover {
@@ -833,7 +833,7 @@
border-radius: 16px;
margin-right: 20px;
position: relative;
cursor: pointer;
.icon {
width: 110px;
height: 110px;
@@ -963,6 +963,8 @@
}
.full-rent {
width: 100px;
height: 36px;
font-size: 15px;
color: #aaaaaa;
background-color: rgba(242, 242, 242, 1);

142
src/components/apartment/seachModule.vue
View File

@@ -72,7 +72,7 @@
</div>
<!-- 展示的 展开和隐藏按钮 -->
<div class="screen-btn flexcenter" v-if="state == 'pack'" @click="state = 'unfold'">
<div class="screen-btn flexcenter" v-if="state === 'pack'" @click="state = 'unfold'">
<b>筛选</b>
<div class="screen-btn-text" style="margin-left: 0">：学校附近</div>
|
@@ -185,98 +185,6 @@
</el-dropdown>
</div>
</div>
<div class="option-right" v-if="false">
<div class="option-item flexflex">
<div class="option-title flexacenter">品牌</div>
<div class="option-box flexacenter flex1">
<el-dropdown trigger="click" popper-class="option-dropdown-box">
<div class="option-dropdown flexacenter">
<span class="option-dropdown-value">{{ brandKey[pitchValue["companyid"]] || "不限" }}</span>
<img class="option-dropdown-img" src="@/assets/img/publicImage/arrow-black-down.svg" />
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :class="{ pitch: 0 == pitchValue['companyid'] }" @click="selectOption('brand', 0)">
<div class="dropdown-value">不限</div>
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
</el-dropdown-item>
<el-dropdown-item :class="{ pitch: item.id == pitchValue['companyid'] }" v-for="(item, index) in brandList" :key="index" @click="selectOption('brand', item.id)">
<div class="dropdown-value">{{ item["name"] }}</div>
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<div class="option-item flexflex">
<div class="option-title flexacenter">房型</div>
<div class="option-box flexacenter flex1">
<el-dropdown trigger="click" popper-class="option-dropdown-box">
<div class="option-dropdown flexacenter">
<span class="option-dropdown-value">{{ roomTypeKey[pitchValue["roomtype"]] || "不限" }}</span>
<img class="option-dropdown-img" src="@/assets/img/publicImage/arrow-black-down.svg" />
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :class="{ pitch: 0 == pitchValue['roomtype'] }" @click="selectOption('roomType', 0)">
<div class="dropdown-value">不限</div>
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
</el-dropdown-item>
<el-dropdown-item :class="{ pitch: item.id == pitchValue['roomtype'] }" v-for="(item, index) in roomTypeList" :key="index" @click="selectOption('roomType', item.id)">
<div class="dropdown-value">{{ item["name"] }}</div>
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<div class="option-item flexflex">
<div class="option-title flexacenter">楼型</div>
<div class="option-box flexacenter flex1">
<el-dropdown trigger="click" popper-class="option-dropdown-box">
<div class="option-dropdown flexacenter">
<span class="option-dropdown-value">{{ roomlistingsKey[pitchValue["roomlistings"]] || "不限" }}</span>
<img class="option-dropdown-img" src="@/assets/img/publicImage/arrow-black-down.svg" />
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :class="{ pitch: 0 == pitchValue['roomlistings'] }" @click="selectOption('roomlistings', 0)">
<div class="dropdown-value">不限</div>
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
</el-dropdown-item>
<el-dropdown-item :class="{ pitch: item.id == pitchValue['roomlistings'] }" v-for="(item, index) in roomlistingsList" :key="index" @click="selectOption('roomlistings', item.id)">
<div class="dropdown-value">{{ item["name"] }}</div>
<img class="dropdown-icon" src="@/assets/img/publicImage/tick-green.svg" />
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<!-- <div class="option-item flexflex">
<div class="option-title">品牌</div>
<div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ pitch: 0 == pitchValue['companyid'] }" @click="selectOption('brand', 0)">不限</div>
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['companyid'] }" v-for="(item, index) in brandList" :key="index" @click="selectOption('brand', item.id)">
{{ item["name"] }}
</div>
</div>
</div> -->
<!-- <div class="option-item flexflex">
<div class="option-title">楼型</div>
<div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ pitch: 0 == pitchValue['roomlistings'] }" @click="selectOption('roomlistings', 0)">不限</div>
<div class="item flexcenter" :class="{ pitch: item['id'] == pitchValue['roomlistings'] }" v-for="(item, index) in roomlistingsList" :key="index" @click="selectOption('roomlistings', item.id)">
{{ item["name"] }}
</div>
</div>
</div> -->
</div>
</div>
<!-- 收起按钮 -->
@@ -354,6 +262,7 @@ let pitchValue = ref({
school: 0,
roomlistings: 0,
keyword: "",
tag: "",
});
watchEffect(() => {
@@ -455,8 +364,6 @@ let deleteSeachVal = (i) => {
};
const tagList = ["单人间", "大床房", "独立卫浴", "两房整租", "电梯"];
let tag = ref(""); // 标签筛选选择
</script>
<style scoped lang="less">
* {
@@ -738,14 +645,6 @@ let tag = ref(""); // 标签筛选选择
border-bottom: 1px solid #ebebeb;
}
// .option-left,
// .option-right {
// width: 600px;
// &:not(:last-of-type) {
// border-right: 1px #ebebeb dotted;
// }
.option-item {
// width: 540px;
// padding-top: 24px;
@@ -873,43 +772,6 @@ let tag = ref(""); // 标签筛选选择
line-height: 24px;
}
.option-dropdown-img {
width: 12px;
height: 7px;
}
}
}
}
// }
.option-right {
padding-top: 18px;
.option-item {
margin-left: 32px;
border-bottom: none !important;
padding: 0;
margin-bottom: 18px;
.option-title {
width: 73px;
}
.option-dropdown {
width: 477px;
height: 40px;
background-color: rgba(246, 246, 246, 1);
border-radius: 10px;
justify-content: space-between;
padding-left: 12px;
padding-right: 10px;
cursor: pointer;
.option-dropdown-value {
font-size: 14px;
color: #000000;
line-height: 24px;
}
.option-dropdown-img {
width: 12px;
height: 7px;

4
src/components/checkGroup/checkBoxGroup.vue
View File

@@ -165,6 +165,10 @@ defineExpose({
flex-wrap: wrap;
}
/deep/ .el-checkbox__label {
font-weight: 400;
}
.top-box {
display: flex;
align-items: center;

520
src/components/seachModule/seachModule1.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="dis-f jus-x al-item" style="position: relative; z-index: 333;">
<div class="dis-f jus-x al-item" style="position: relative; z-index: 333">
<div class="body-maxWidth">
<div class="s-w-100 seach-box-bg">
<div class="seach-box">
<div class="top-seach dis-f al-item">
<div style="position: absolute; left: -8px; top: 20px;">
<div style="position: absolute; left: -8px; top: 20px">
<div class="location-box dis-f jus-x al-item">
<img src="../../assets/homeImage/addressImg.png" class="img" alt="" />
香港
@@ -12,7 +12,7 @@
<div class="triangle"></div>
</div>
<div class="dis-f al-item pos-r seek-input">
<el-input v-model="seachAllType.keyword" placeholder="搜索房源或输入房源ID" @keyup.enter="seachList" @blur="setHistoryShow" @focus="setHistoryShow" style="height: 40px; width: 460px; background: rgba(246, 246, 246, 1); border-radius: 8px;"></el-input>
<el-input v-model="seachAllType.keyword" placeholder="搜索房源或输入房源ID" @keyup.enter="seachList" @blur="setHistoryShow" @focus="setHistoryShow" style="height: 40px; width: 460px; background: rgba(246, 246, 246, 1); border-radius: 8px"></el-input>
<div class="seach-btn dis-f al-item jus-x" @click="seachList">
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="" />
<!-- 搜索 -->
@@ -21,17 +21,13 @@
<el-scrollbar height="375px">
<div class="seach-history-info">
<div>
<div class="title">
历史搜索
</div>
<div class="title">历史搜索</div>
<div class="info-box">
<div v-for="(item, i) in historyArr.data" :key="i" class="btn" @click="setSeachVal(item)">{{ item }} <img src="../../assets/homeImage/closeIcon.svg" @click.stop="deleteSeachVal(i)" class="img" alt="" /></div>
</div>
</div>
<div style="margin-top: 30px;">
<div class="title">
热门推荐
</div>
<div style="margin-top: 30px">
<div class="title">热门推荐</div>
<div class="info-box">
<div v-for="(item, i) in hotArr.data" :key="i" class="btn" @click="setHotSeach(item)">
{{ item }}
@@ -46,8 +42,8 @@
<img src="../assets/homeImage/mapImg.png" class="img" alt="">
地图找房
</div> -->
<div class="tool-btn dis-f jus-x al-item add-btn" :class="{ 'mg-l-10': routePath === '/' }" style="position: relative;">
<img style="margin-right: 5px;" src="../../assets/homeImage/addBtn.png" class="img" alt="" />
<div class="tool-btn dis-f jus-x al-item add-btn" :class="{ 'mg-l-10': routePath === '/' }" style="position: relative">
<img style="margin-right: 5px" src="../../assets/homeImage/addBtn.png" class="img" alt="" />
发布房源
<choosing-identity></choosing-identity>
</div>
@@ -88,8 +84,8 @@
<div class="seach-info-box dis-f" v-if="routePath === '/'">
<seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length" :checkBtn="checkBtn"> </seachInfo>
<seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length" :checkBtn="checkBtn"></seachInfo>
<seachInfo title="区域找房" seachType="3" style="margin-top: 30px;" :btn="seachArea.data" :checkBtn="checkBtn" v-if="seachArea.data.length"></seachInfo>
<seachInfo title="整租" seachType="2" style="margin-top: 30px;" :btn="allHireType.data" :checkBtn="checkBtn" v-if="allHireType.data.length"></seachInfo>
<seachInfo title="区域找房" seachType="3" style="margin-top: 30px" :btn="seachArea.data" :checkBtn="checkBtn" v-if="seachArea.data.length"></seachInfo>
<seachInfo title="整租" seachType="2" style="margin-top: 30px" :btn="allHireType.data" :checkBtn="checkBtn" v-if="allHireType.data.length"></seachInfo>
</div>
<!-- -->
<!-- {{ pitchValue }} -->
@@ -100,10 +96,10 @@
<!-- 地理位置时除 求房源 显示的 -->
<div class="option-item flexflex" v-if="routePath !== '/needHousing'">
<div class="option-title">地理位置</div>
<div class="option-box flexflex flex1" style="flex-direction: column;">
<div class="option-box flexflex flex1" style="flex-direction: column">
<div class="geography-tab flexacenter">
<div class="geography-item flexcenter" :class="{ 'pitch': geographicState == 'area' }" @click="setSelectPosition('area')">按区域</div>
<div class="geography-item flexcenter" :class="{ 'pitch': geographicState == 'school' }" @click="setSelectPosition('school')">按学校</div>
<div class="geography-item flexcenter" :class="{ pitch: geographicState == 'area' }" @click="setSelectPosition('area')">按区域</div>
<div class="geography-item flexcenter" :class="{ pitch: geographicState == 'school' }" @click="setSelectPosition('school')">按学校</div>
</div>
<!-- 区域的内容 -->
<div class="geography-box" v-if="geographicState == 'area'">
@@ -122,8 +118,8 @@
</div>
</div>
</div>
<div class="district-pop" v-if="locationTemp.state" style="top: 120px;">
<div class="district-unlimited flexacenter" :class="{ 'pitch': locationTemp.value.length == 0 }" @click="selectDistrict(0)">
<div class="district-pop" v-if="locationTemp.state" style="top: 120px">
<div class="district-unlimited flexacenter" :class="{ pitch: locationTemp.value.length == 0 }" @click="selectDistrict(0)">
<img class="unlimited-yes" src="@/assets/homeImage/topTitleIcon.svg" />
<div class="unlimited-no"></div>
不限
@@ -151,14 +147,14 @@
<el-carousel :autoplay="false" arrow="never" :loop="false" height="50px" indicator-position="none" class="s-w-100" ref="schoolData" :initial-index="schoolPages" :key="pitchValue.school">
<el-carousel-item v-for="(item, i) in shcoolData" :key="i">
<div class="school-carousel-box">
<div v-for="items in item" :key="items.id" @click="selectOption('school', items.id)" class="carousel-info-box" :class="{ 'pitch': pitchValue.school == items.id }">{{ items.name }}</div>
<div v-for="items in item" :key="items.id" @click="selectOption('school', items.id)" class="carousel-info-box" :class="{ pitch: pitchValue.school == items.id }">{{ items.name }}</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</div>
</div>
<div class="option-item flexacenter" style="height: 96px;" v-else>
<div class="option-item flexacenter" style="height: 96px" v-else>
<div class="option-title">目标区域</div>
<div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ pitch: 0 == selectDistrictPitchShow }" @click="selectOption('location', [])">不限</div>
@@ -174,7 +170,7 @@
<img class="item-icon item-icon-pitch" src="@/assets/homeImage/dropDownIcon.svg" />
</div>
<div class="district-pop" v-if="locationTemp.state">
<div class="district-unlimited flexacenter" :class="{ 'pitch': locationTemp.value.length == 0 }" @click="selectDistrict(0)">
<div class="district-unlimited flexacenter" :class="{ pitch: locationTemp.value.length == 0 }" @click="selectDistrict(0)">
<img class="unlimited-yes" src="@/assets/homeImage/topTitleIcon.svg" />
<div class="unlimited-no"></div>
不限
@@ -205,7 +201,7 @@
<div class="select-type-text" v-if="pitchValue.types">&nbsp; > &nbsp;{{ pitchValue.types == index ? "不限" : typeKey[pitchValue.types] }}</div>
<img class="item-icon" src="@/assets/homeImage/selectInfoTabIcon.svg" />
<img class="item-icon item-icon-pitch" style="margin-left: 30px;" src="@/assets/homeImage/dropDownIcon.svg" />
<img class="item-icon item-icon-pitch" style="margin-left: 30px" src="@/assets/homeImage/dropDownIcon.svg" />
</div>
<template #dropdown>
<el-dropdown-menu class="sort-box">
@@ -221,7 +217,7 @@
<div class="option-item flexflex">
<div class="option-title flexacenter">租金{{ routePath !== "/needHousing" ? "" : "预算" }}</div>
<div class="option-box flexacenter flex1 option-input-box">
<div class="flex1"><input class="option-input" type="number" v-model="pitchValue['rent_min']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" placeholder="请输入" /><span style="font-size: 18px;">~</span><input class="option-input" type="number" v-model="pitchValue['rent_max']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" placeholder="请输入" />HK$/月</div>
<div class="flex1"><input class="option-input" type="number" v-model="pitchValue['rent_min']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" placeholder="请输入" /><span style="font-size: 18px">~</span><input class="option-input" type="number" v-model="pitchValue['rent_max']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" placeholder="请输入" />HK$/月</div>
<div class="eliminate flexcenter" @click="clearingAmount" v-if="pitchValue['rent_min'] || pitchValue['rent_max']">
<img class="eliminate-icon" src="@/assets/img/publicImage/round-fork.svg" />
@@ -276,10 +272,10 @@
<div class="screen-footer flexacenter">
<div class="screen-footer-left flexacenter">
<div class="quantity flexacenter">
共 <b class="b">{{ count }}</b> 条{{ routePath === '/personHousing' ? '个人房源' : routePath === '/intermediaryHousing' ? '中介房源' : routePath === '/needHousing' ? '求房源' : '' }}
共 <b class="b">{{ count }}</b> 条{{ routePath === "/personHousing" ? "个人房源" : routePath === "/intermediaryHousing" ? "中介房源" : routePath === "/needHousing" ? "求房源" : "" }}
</div>
<template v-if="pitchValue['location'].length != 0">
<span style="color: rgb(170, 170, 170); margin: 0px 15px;">|</span>
<span style="color: rgb(170, 170, 170); margin: 0px 15px">|</span>
<div class="screen-location flexacenter">
<div class="screen-location-name">{{ locationKey[selectDistrictPitchShow || 1] }}:</div>
<template v-if="pitchValue['location'][0] == selectDistrictPitchShow">
@@ -322,52 +318,52 @@
</template>
<script setup>
import { onMounted, ref, toRefs, watchEffect, reactive, defineProps, inject, getCurrentInstance, watch, nextTick } from "vue"
import { useStore } from "vuex"
import { onMounted, ref, toRefs, watchEffect, reactive, defineProps, inject, getCurrentInstance, watch, nextTick } from "vue";
import { useStore } from "vuex";
import seachInfo from "../indexSeachInfo/indexSeachInfo.vue"
import selectTabBox from "../selectTabBox/selectTabBox.vue"
import choosingIdentity from "@/components/edit/choosingIdentity.vue"
import { useRouter } from "vue-router"
import store from "../../store/index"
import api from "../../utils/api"
import authenticationInfo from "./authenticationInfo.vue"
const usestore = useStore()
import seachInfo from "../indexSeachInfo/indexSeachInfo.vue";
import selectTabBox from "../selectTabBox/selectTabBox.vue";
import choosingIdentity from "@/components/edit/choosingIdentity.vue";
import { useRouter } from "vue-router";
import store from "../../store/index";
import api from "../../utils/api";
import authenticationInfo from "./authenticationInfo.vue";
const usestore = useStore();
const { wechat } = toRefs(usestore.state)
const { wechat } = toRefs(usestore.state);
const { proxy } = getCurrentInstance()
const { proxy } = getCurrentInstance();
const props = defineProps({
getDataList: {
type: Function,
},
})
});
let getDataList = props.getDataList
let getDataList = props.getDataList;
//搜索框
let historyShow = ref(false)
let historyShow = ref(false);
let setHistoryShow = () => {
if (historyShow.value) {
setTimeout(() => {
historyShow.value = !historyShow.value
}, 500)
return
historyShow.value = !historyShow.value;
}, 500);
return;
}
historyShow.value = !historyShow.value
}
let seachSchoolBtn = reactive({ data: [] }) //学校地区
let hireType = {} //整租
let allHireType = {} //合租
let seachArea = {} //区域找房
let historyArr = reactive({ data: [] }) //历史查找记录
let hotArr = reactive({ data: [] })
historyShow.value = !historyShow.value;
};
let seachSchoolBtn = reactive({ data: [] }); //学校地区
let hireType = {}; //整租
let allHireType = {}; //合租
let seachArea = {}; //区域找房
let historyArr = reactive({ data: [] }); //历史查找记录
let hotArr = reactive({ data: [] });
let seachAllType = reactive({
keyword: "",
location: [],
orderby: "default",
})
});
// const pitchValue = inject("pitchValue") || {}
@@ -384,198 +380,198 @@ let pitchValue = reactive({
orderby: "default",
publish: "",
types: "",
})
});
onMounted(() => {
if (routePath.value === "/personHousing") {
pitchValue = { ...pitchValue, ...store.state.personPitchValue }
const queryParams = getQueryParams()
pitchValue = { ...pitchValue, ...store.state.personPitchValue };
const queryParams = getQueryParams();
if (queryParams["location"]) {
pitchValue["school"] = ""
const arr = queryParams["location"].split(",")
pitchValue["location"] = arr
pitchValue["school"] = "";
const arr = queryParams["location"].split(",");
pitchValue["location"] = arr;
// selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)
} else pitchValue = Object.assign({}, pitchValue, queryParams)
} else if (routePath.value === "/intermediaryHousing") pitchValue = { ...pitchValue, ...store.state.intermediaryPitchValue }
else pitchValue = { ...pitchValue, ...store.state.needPitchValue }
} else pitchValue = Object.assign({}, pitchValue, queryParams);
} else if (routePath.value === "/intermediaryHousing") pitchValue = { ...pitchValue, ...store.state.intermediaryPitchValue };
else pitchValue = { ...pitchValue, ...store.state.needPitchValue };
if (routePath.value !== "/needHousing" && pitchValue["school"]) {
pitchValue["location"] = []
geographicState.value = "school"
pitchValue["location"] = [];
geographicState.value = "school";
}
if (pitchValue["location"].length > 0) selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)
if (pitchValue["location"].length > 0) selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0);
getDataList(pitchValue)
})
getDataList(pitchValue);
});
// 获取URL中的查询参数
const getQueryParams = () => {
const queryParams = {}
const urlParams = new URLSearchParams(window.location.search)
const queryParams = {};
const urlParams = new URLSearchParams(window.location.search);
for (const [key, value] of urlParams) {
if (value) queryParams[key] = value
if (value) queryParams[key] = value;
}
return queryParams
}
return queryParams;
};
//获取区域下列数据
let getLocationData = data => {
let getLocationData = (data) => {
for (let item in data) {
if (!seachArea.data[item.substring(0, 1) - 1].data) seachArea.data[item.substring(0, 1) - 1].data = []
if (!seachArea.data[item.substring(0, 1) - 1].data) seachArea.data[item.substring(0, 1) - 1].data = [];
if (item.length > 1) {
seachArea.data[item.substring(0, 1) - 1].data.push({
title: data[item],
id: item,
})
});
}
}
}
};
//监听路由
const route = useRouter()
let routePath = ref("")
routePath.value = route.currentRoute.value.meta.path
const route = useRouter();
let routePath = ref("");
routePath.value = route.currentRoute.value.meta.path;
watchEffect(() => {
seachSchoolBtn.data = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
hireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : []
allHireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : []
seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
if (seachArea.data.length > 0 && !seachArea.data[0].data) getLocationData(store.state.indexData.config.location)
hotArr.data = store.state.indexData.hotSearcheWords
})
seachSchoolBtn.data = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : [];
hireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : [];
allHireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : [];
seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : [];
if (seachArea.data.length > 0 && !seachArea.data[0].data) getLocationData(store.state.indexData.config.location);
hotArr.data = store.state.indexData.hotSearcheWords;
});
//获取历史搜索记录
historyArr.data = JSON.parse(localStorage.getItem("historyArr")) || []
historyArr.data = JSON.parse(localStorage.getItem("historyArr")) || [];
//搜索数据
let seachList = item => {
let string = seachAllType.keyword
if (!string.replace(/\s/g, "")) return
let seachList = (item) => {
let string = seachAllType.keyword;
if (!string.replace(/\s/g, "")) return;
if (historyArr.data.indexOf(seachAllType.keyword) === -1) {
historyArr.data.unshift(seachAllType.keyword)
historyArr.data.unshift(seachAllType.keyword);
}
if (historyArr.data.length > 10) historyArr.data.splice(historyArr.data.length - 1, 1)
localStorage.setItem("historyArr", JSON.stringify(historyArr.data))
sessionStorage.setItem("houseingPageType", routePath.value === "/needHousing" ? "6" : routePath.value === "/intermediaryHousing" ? "1" : routePath.value === "/personHousing" ? "0" : "0")
if (historyArr.data.length > 10) historyArr.data.splice(historyArr.data.length - 1, 1);
localStorage.setItem("historyArr", JSON.stringify(historyArr.data));
sessionStorage.setItem("houseingPageType", routePath.value === "/needHousing" ? "6" : routePath.value === "/intermediaryHousing" ? "1" : routePath.value === "/personHousing" ? "0" : "0");
route.push({
path: "/seachPage",
query: {
keyword: seachAllType.keyword,
isNeedHousing: routePath.value === "/needHousing",
},
})
}
});
};
//设置点击一级区域 特殊的 选中区域的不限 需要修改值 并且去掉学校值
let setLocation = (type, data, isupdate = true) => {
seachAllType[type] = data
seachAllType["school"] = ""
if (isupdate) getDataList(seachAllType)
}
seachAllType[type] = data;
seachAllType["school"] = "";
if (isupdate) getDataList(seachAllType);
};
//设置搜索数据 type: 类型 data: 数据 second: 二级数据
let setSeachConditions = (type, data, second = null) => {
if (type === "rent") {
seachAllType["rent_min"] = data.min
seachAllType["rent_max"] = data.max
seachAllType["rent_min"] = data.min;
seachAllType["rent_max"] = data.max;
} else if (type !== "") {
// 这里是正常的数据 直接赋值
seachAllType[type] = data
seachAllType[type] = data;
} else if (type === "") {
// 电梯 阳台 认证 那些是传数组的
data.indexOf("isintermediary") !== -1 ? (seachAllType["isintermediary"] = 1) : (seachAllType["isintermediary"] = 0)
data.indexOf("isverified") !== -1 ? (seachAllType["isverified"] = 1) : (seachAllType["isverified"] = 0)
data.indexOf("iselevator") !== -1 ? (seachAllType["iselevator"] = 1) : (seachAllType["iselevator"] = 0)
data.indexOf("issunshinearea") !== -1 ? (seachAllType["issunshinearea"] = 1) : (seachAllType["issunshinearea"] = 0)
data.indexOf("isintermediary") !== -1 ? (seachAllType["isintermediary"] = 1) : (seachAllType["isintermediary"] = 0);
data.indexOf("isverified") !== -1 ? (seachAllType["isverified"] = 1) : (seachAllType["isverified"] = 0);
data.indexOf("iselevator") !== -1 ? (seachAllType["iselevator"] = 1) : (seachAllType["iselevator"] = 0);
data.indexOf("issunshinearea") !== -1 ? (seachAllType["issunshinearea"] = 1) : (seachAllType["issunshinearea"] = 0);
}
// 学校和区域是 二选一
if (type === "school") seachAllType.location = []
if (type === "location") seachAllType.school = ""
if (type === "school") seachAllType.location = [];
if (type === "location") seachAllType.school = "";
if (second) {
seachAllType[second.type] = second.id
seachAllType[second.type] = second.id;
}
getDataList(seachAllType)
}
getDataList(seachAllType);
};
//点击历史搜索记录
let setSeachVal = item => {
seachAllType.keyword = item
seachList()
let setSeachVal = (item) => {
seachAllType.keyword = item;
seachList();
// getDataList(seachAllType)
}
};
//删除历史记录
let deleteSeachVal = i => {
historyArr.data.splice(i, 1)
localStorage.setItem("historyArr", JSON.stringify(historyArr.data))
}
let deleteSeachVal = (i) => {
historyArr.data.splice(i, 1);
localStorage.setItem("historyArr", JSON.stringify(historyArr.data));
};
//点击热门地区
let setHotSeach = item => {
seachAllType.keyword = item
if (historyArr.data.indexOf(item) === -1) historyArr.data.unshift(item)
if (historyArr.data.length > 10) historyArr.data.slice(historyArr.data.length - 1, 1)
localStorage.setItem("historyArr", JSON.stringify(historyArr.data))
seachList()
}
let setHotSeach = (item) => {
seachAllType.keyword = item;
if (historyArr.data.indexOf(item) === -1) historyArr.data.unshift(item);
if (historyArr.data.length > 10) historyArr.data.slice(historyArr.data.length - 1, 1);
localStorage.setItem("historyArr", JSON.stringify(historyArr.data));
seachList();
};
//点击选项
let checkBtn = (data, type, areaItem) => {
getDataList(type, data, areaItem)
}
getDataList(type, data, areaItem);
};
let locationObj = reactive({}) // 位置配置信息
let locationKey = reactive({}) // 位置配置信息 键值对
let typeObj = reactive({}) // 方式配置信息
let typeKey = reactive({}) // 方式配置信息 键值对
let locationObj = reactive({}); // 位置配置信息
let locationKey = reactive({}); // 位置配置信息 键值对
let typeObj = reactive({}); // 方式配置信息
let typeKey = reactive({}); // 方式配置信息 键值对
onMounted(() => {
locationObj = store.state.locationObj
locationKey = store.state.locationKey
typeObj = store.state.typeObj
typeKey = store.state.typeKey
setSchoolData()
})
locationObj = store.state.locationObj;
locationKey = store.state.locationKey;
typeObj = store.state.typeObj;
typeKey = store.state.typeKey;
setSchoolData();
});
//设置区域状态
let setSelectPosition = type => {
geographicState.value = type
let setSelectPosition = (type) => {
geographicState.value = type;
if (type !== "school") return
locationTemp.key = 0
locationTemp.value = []
locationTemp.state = false
}
if (type !== "school") return;
locationTemp.key = 0;
locationTemp.value = [];
locationTemp.state = false;
};
//学校区域状态
let schoolSelectObj = reactive({ id: "", title: "不限", page: 0 })
let schoolPages = ref(0) //页数
let shcoolData = reactive([]) // 学校数据
let schoolSelectObj = reactive({ id: "", title: "不限", page: 0 });
let schoolPages = ref(0); //页数
let shcoolData = reactive([]); // 学校数据
let geographicState = ref("area") // 地理位置tab状态 区域 area 学校 school
let geographicState = ref("area"); // 地理位置tab状态 区域 area 学校 school
let setSchoolData = () => {
// let arr = routePath.value === "/" ? store.state.seachTypeData[0] && store.state.seachTypeData[0].where : store.state.schoolList
// if (arr[0] && arr[0].id) arr.unshift({ name: "不限", id: "" })
let arr = JSON.parse(JSON.stringify(store.state.schoolList)) || []
arr.unshift({ name: "不限", id: "" })
let arr = JSON.parse(JSON.stringify(store.state.schoolList)) || [];
arr.unshift({ name: "不限", id: "" });
let num = 0
let accumulationWidth = 0
let num = 0;
let accumulationWidth = 0;
for (let i = 0; i < arr.length; i++) {
let width = accumulationWidth + getStrWidth(arr[i].name) + 20
let width = accumulationWidth + getStrWidth(arr[i].name) + 20;
if (width > 380) {
num++
accumulationWidth = getStrWidth(arr[i].name) + 20
} else accumulationWidth = width
num++;
accumulationWidth = getStrWidth(arr[i].name) + 20;
} else accumulationWidth = width;
if (!shcoolData[num]) shcoolData[num] = []
shcoolData[num].push(arr[i])
if (!shcoolData[num]) shcoolData[num] = [];
shcoolData[num].push(arr[i]);
}
// 判断一下值有没有学校 ，如果有看一下ID是不是在第一页
@@ -583,106 +579,106 @@ let setSchoolData = () => {
for (let i = 0; i < shcoolData.length; i++) {
for (let j = 0; j < shcoolData[i].length; j++) {
if (shcoolData[i][j].id == pitchValue.school) {
schoolPages.value = i
break
schoolPages.value = i;
break;
}
}
}
}
}
};
// 计算字符串在屏幕的显示宽度
let getStrWidth = str => {
let width = 0
let fontSize = 14
let font = fontSize + "px Arial"
let canvas = document.createElement("canvas")
let context = canvas.getContext("2d")
context.font = font
width = context.measureText(str).width
return width
}
let getStrWidth = (str) => {
let width = 0;
let fontSize = 14;
let font = fontSize + "px Arial";
let canvas = document.createElement("canvas");
let context = canvas.getContext("2d");
context.font = font;
width = context.measureText(str).width;
return width;
};
//学校轮播组件
let prevSchoolData = () => {
if (schoolPages.value === 0) return
const schoolData = proxy.$refs.schoolData
schoolPages.value--
schoolData.prev()
}
if (schoolPages.value === 0) return;
const schoolData = proxy.$refs.schoolData;
schoolPages.value--;
schoolData.prev();
};
let nextSchoolData = () => {
if (schoolPages.value === shcoolData.length - 1) return
if (schoolPages.value === shcoolData.length - 1) return;
const schoolData = proxy.$refs.schoolData
schoolPages.value++
schoolData.next()
}
const schoolData = proxy.$refs.schoolData;
schoolPages.value++;
schoolData.next();
};
// 目标区域的临时值
let locationTemp = reactive({
key: 0,
value: [],
state: false,
})
});
// 目标区域的 选择 type 0 不限 1 取消 2 选择
const selectDistrict = type => {
const selectDistrict = (type) => {
// 不限
if (type == 0) locationTemp.value = []
if (type == 0) locationTemp.value = [];
else if (type == 1) {
locationTemp.value = []
selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)
locationTemp.value = [];
selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0);
locationTemp.key = 0
locationTemp.state = false
pitchValue["school"] = ""
locationTemp.key = 0;
locationTemp.state = false;
pitchValue["school"] = "";
} else {
// 点击选好了 数组为空代表 选择不限
if (locationTemp.value.length == 0) locationTemp.value = [selectDistrictPitchShow.value]
if (locationTemp.value.length == 0) locationTemp.value = [selectDistrictPitchShow.value];
pitchValue["location"] = locationTemp.value
locationTemp.value = []
selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0)
pitchValue["location"] = locationTemp.value;
locationTemp.value = [];
selectDistrictPitchShow.value = Math.floor(pitchValue["location"][0] || 0);
pitchValue["school"] = ""
locationTemp.key = 0
locationTemp.state = false
getDataList(pitchValue)
proxy.$forceUpdate()
pitchValue["school"] = "";
locationTemp.key = 0;
locationTemp.state = false;
getDataList(pitchValue);
proxy.$forceUpdate();
}
}
};
// 目标区域的选中
let selectDistrictPitchShow = ref("")
let selectDistrictPitchShow = ref("");
// 处理输入筛选金额后
const rentBlur = () => {
getDataList(pitchValue)
proxy.$forceUpdate()
}
getDataList(pitchValue);
proxy.$forceUpdate();
};
// 清除筛选的金额
const clearingAmount = () => {
pitchValue["rent_min"] = ""
pitchValue["rent_max"] = ""
getDataList(pitchValue)
proxy.$forceUpdate()
}
pitchValue["rent_min"] = "";
pitchValue["rent_max"] = "";
getDataList(pitchValue);
proxy.$forceUpdate();
};
// 租期配置数据
let leasetermList = reactive([
{ name: "不限", id: 0 },
{ name: "一年以上", id: 1 },
{ name: "低于一年", id: 2 },
])
]);
// //性别配置数据
let genderList = reactive([
{ name: "不限", id: 0 },
{ name: "女", id: 1 },
{ name: "男", id: 2 },
])
]);
//发布时间配置数据
let publishList = reactive([
@@ -692,7 +688,7 @@ let publishList = reactive([
{ name: "一个月内", id: "onemonth" },
{ name: "两个月内", id: "twomonth" },
{ name: "三个月内", id: "trimester" },
])
]);
// 排序的选项
let orderbyList = reactive([
@@ -701,12 +697,12 @@ let orderbyList = reactive([
{ name: "热门", type: "hotnum" },
{ name: "价格从低到高", type: "rentasc" },
{ name: "价格从高到低", type: "rentdesc" },
])
]);
// 排序弹窗的状态
let orderbyPopoverState = ref(false)
let orderbyPopoverState = ref(false);
const itemText = ref(null)
const itemText = ref(null);
// 筛选选中的中转
const selectOption = (key, value) => {
@@ -716,82 +712,82 @@ const selectOption = (key, value) => {
if (Math.floor(pitchValue["location"][0] || 0) == value) {
// 判断本来就是选择不限的 需要value等于空 不让会乱
if (pitchValue["location"][0] == value) {
locationTemp.value = []
locationTemp.value = [];
} else {
locationTemp.value = [...new Set(pitchValue["location"])]
locationTemp.value = [...new Set(pitchValue["location"])];
}
} else locationTemp.value = [] // 选择其他分区
} else locationTemp.value = []; // 选择其他分区
locationTemp.key = value
locationTemp.state = true
selectDistrictPitchShow.value = value
return
locationTemp.key = value;
locationTemp.state = true;
selectDistrictPitchShow.value = value;
return;
} else if (key == "location" && value == 0) {
// 这里时直接点击 区域的不限的
locationTemp.state = false
selectDistrictPitchShow.value = 0
locationTemp.state = false;
selectDistrictPitchShow.value = 0;
}
// 特殊的 学校和区域只能二选一
if (key == "school") pitchValue["location"] = []
else if (key == "location") pitchValue["school"] = ""
if (key == "school") pitchValue["location"] = [];
else if (key == "location") pitchValue["school"] = "";
nextTick(() => {
pitchValue[key] = value
getDataList(pitchValue)
proxy.$forceUpdate()
})
}
pitchValue[key] = value;
getDataList(pitchValue);
proxy.$forceUpdate();
});
};
const selectCheckboxOption = key => {
pitchValue[key] = pitchValue[key] == 1 ? 0 : 1
getDataList(pitchValue)
proxy.$forceUpdate()
}
const selectCheckboxOption = (key) => {
pitchValue[key] = pitchValue[key] == 1 ? 0 : 1;
getDataList(pitchValue);
proxy.$forceUpdate();
};
// 特殊的 方式选中
const selectType = (value, isFirstFloor) => {
// if (isFirstFloor && Math.floor(pitchValue["types"]) == value) return
pitchValue.types = value
if (isFirstFloor) getDataList(pitchValue, true)
pitchValue.types = value;
if (isFirstFloor) getDataList(pitchValue, true);
// 请求不要蒙版
else getDataList(pitchValue)
else getDataList(pitchValue);
proxy.$forceUpdate()
}
proxy.$forceUpdate();
};
// 区域判断不限
const districtUnlimited = index => {
if (selectDistrictPitchShow.value != index || pitchValue["location"].length == 0) return false
if (pitchValue["location"].length == 1 && pitchValue["location"][0] == index) return true
}
const districtUnlimited = (index) => {
if (selectDistrictPitchShow.value != index || pitchValue["location"].length == 0) return false;
if (pitchValue["location"].length == 1 && pitchValue["location"][0] == index) return true;
};
// 区域判断 显示数量
const districtQuantity = index => {
if (selectDistrictPitchShow.value != index && pitchValue["location"].length != 0) return false
const districtQuantity = (index) => {
if (selectDistrictPitchShow.value != index && pitchValue["location"].length != 0) return false;
// 排除 不限
if (selectDistrictPitchShow.value == pitchValue["location"][0]) return false
if (selectDistrictPitchShow.value == pitchValue["location"][0]) return false;
// 获取 location 值 判断和index 是否相等
if (Math.floor(pitchValue["location"][0]) == index) return true
return false
}
if (Math.floor(pitchValue["location"][0]) == index) return true;
return false;
};
// 删除地区底部的选中
const closeLocationKey = index => {
if (pitchValue.location.length == 1 && pitchValue.location[0] != selectDistrictPitchShow.value) pitchValue.location = [selectDistrictPitchShow.value]
else pitchValue.location.splice(index, 1)
const closeLocationKey = (index) => {
if (pitchValue.location.length == 1 && pitchValue.location[0] != selectDistrictPitchShow.value) pitchValue.location = [selectDistrictPitchShow.value];
else pitchValue.location.splice(index, 1);
getDataList(pitchValue)
proxy.$forceUpdate()
}
getDataList(pitchValue);
proxy.$forceUpdate();
};
//列表总数
const count = inject("count")
const count = inject("count");
defineExpose({
historyShow,
})
});
</script>
<style scoped lang="less">
.dis-f {
@@ -1080,6 +1076,7 @@ defineExpose({
&.consult-btn {
background: rgba(144, 216, 72, 1);
margin-left: 20px;
cursor: pointer;
&:hover {
opacity: 0.8;
@@ -1367,6 +1364,9 @@ defineExpose({
/deep/ .el-checkbox-group {
padding: 15px 20px 20px;
}
/deep/ .el-checkbox__label {
font-weight: 400;
}
border-bottom: 1px solid #ebebeb;
}

343
src/components/seachPage/input.vue
View File

@@ -145,16 +145,16 @@
</div>
</template>
<script setup>
import { reactive, ref, inject, shallowReactive, defineProps, watchEffect, defineExpose } from "vue"
import selectTabBox from "../selectTabBox/selectTabBox.vue"
import apartmentSelect from "../apartment/seachModule.vue"
import store from "../../store/index"
import api from "@/utils/api"
import { useRoute, useRouter } from "vue-router"
import { ElMessage } from "element-plus"
import { reactive, ref, inject, shallowReactive, defineProps, watchEffect, defineExpose } from "vue";
import selectTabBox from "../selectTabBox/selectTabBox.vue";
import apartmentSelect from "../apartment/seachModule.vue";
import store from "../../store/index";
import api from "@/utils/api";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
//路由
const route = useRouter()
const route = useRouter();
const props = defineProps({
getDataList: {
@@ -164,19 +164,19 @@ const props = defineProps({
type: Number,
},
isNoGetData: Boolean,
})
});
//选项卡
let tabType = ref("person")
let selectTabBoxInfo = ref(null) //个人/中介筛选实例
let apartmentSelectInfo = ref(null) //公寓筛选实例
let tabType = ref("person");
let selectTabBoxInfo = ref(null); //个人/中介筛选实例
let apartmentSelectInfo = ref(null); //公寓筛选实例
//设置请求数据
let selectPage = type => {
if (type === seachAllType["tabType"] || houseingPageType == 6) return
let selectPage = (type) => {
if (type === seachAllType["tabType"] || houseingPageType == 6) return;
if (type === "apartment") {
selectTabBoxInfo.value.cleanSelect() //清空筛选数据
selectTabBoxInfo.value.cleanSelect(); //清空筛选数据
} else {
apartmentSelectInfo.value.cleanSelect && apartmentSelectInfo.value.cleanSelect()
apartmentSelectInfo.value.cleanSelect && apartmentSelectInfo.value.cleanSelect();
}
//清空数据
if (type === "apartment")
@@ -184,39 +184,40 @@ let selectPage = type => {
keyword: seachAllType["keyword"],
location: [],
intermediary: "",
})
tabType.value = type
seachAllType["tabType"] = type
seachAllType["searchid"] = setPageKey().searchid
});
tabType.value = type;
seachAllType["tabType"] = type;
seachAllType["searchid"] = setPageKey().searchid;
//根据类型初始化筛选参数
if (type === "person") {
seachAllType["intermediary"] = 0
seachAllType["isintermediary"] = 0
houseingPageType = "0"
sessionStorage.setItem("houseingPageType", 0)
selectTabBoxInfo.value.routerQuerySet()
seachAllType["intermediary"] = 0;
seachAllType["isintermediary"] = 0;
houseingPageType = "0";
sessionStorage.setItem("houseingPageType", 0);
selectTabBoxInfo.value.routerQuerySet();
} else if (type === "intermediary") {
seachAllType["intermediary"] = 1
seachAllType["isverified"] = 0
houseingPageType = "1"
sessionStorage.setItem("houseingPageType", 1)
seachAllType["intermediary"] = 1;
seachAllType["isverified"] = 0;
houseingPageType = "1";
sessionStorage.setItem("houseingPageType", 1);
// route.currentRoute.value.query.houseingPageType='1'
selectTabBoxInfo.value.routerQuerySet()
selectTabBoxInfo.value.routerQuerySet();
} else {
seachAllType["intermediary"] = ""
seachAllType["isverified"] = 0
seachAllType["isintermediary"] = 0
seachAllType["intermediary"] = "";
seachAllType["isverified"] = 0;
seachAllType["isintermediary"] = 0;
}
//初始化搜索框输入内容
if (tabType.value != "need") {
setSeachVal()
setSeachVal();
}
if (seachVal.value && !setPageKey().searchid) return
let seachObj = setSeachId()
getDataList(seachAllType, seachObj.count == 0 ? false : true)
}
if (seachVal.value && !setPageKey().searchid) return;
let seachObj = setSeachId();
let getDataList = props.getDataList
if (seachObj) getDataList(seachAllType, seachObj.count == 0 ? false : true);
};
let getDataList = props.getDataList;
//搜索数据
let seachAllType = reactive({
@@ -224,45 +225,45 @@ let seachAllType = reactive({
location: [],
searchid: "",
intermediary: 0,
})
});
//搜索内容
let seachVal = ref("")
let isNeedHousing = ref(false)
seachVal.value = route.currentRoute.value.query.keyword && route.currentRoute.value.query.keyword.replace(/\s/g, "")
let seachVal = ref("");
let isNeedHousing = ref(false);
seachVal.value = route.currentRoute.value.query.keyword && route.currentRoute.value.query.keyword.replace(/\s/g, "");
//判断是否从求房源页面跳转
isNeedHousing.value = route.currentRoute.value.query.isNeedHousing === "true"
isNeedHousing.value = route.currentRoute.value.query.isNeedHousing === "true";
//判断当前是什么页面
let houseingPageType = sessionStorage.getItem("houseingPageType")
let houseingPageType = sessionStorage.getItem("houseingPageType");
let type = houseingPageType === "0" ? "person" : houseingPageType === "1" ? "intermediary" : houseingPageType === "6" ? "need" : "apartment"
tabType.value = type
let type = houseingPageType === "0" ? "person" : houseingPageType === "1" ? "intermediary" : houseingPageType === "6" ? "need" : "apartment";
tabType.value = type;
if (tabType.value == "apartment") {
seachAllType["intermediary"] = ""
seachAllType["tabType"] = "apartment"
seachAllType["intermediary"] = "";
seachAllType["tabType"] = "apartment";
}
//页面判断-抛出方法
let checkPageType = () => {
// houseingPageType 0个人 1中介 6求房源
let type = houseingPageType === "0" ? "person" : houseingPageType === "1" ? "intermediary" : houseingPageType === "6" ? "need" : "apartment"
tabType.value = type
seachAllType["tabType"] = type
let type = houseingPageType === "0" ? "person" : houseingPageType === "1" ? "intermediary" : houseingPageType === "6" ? "need" : "apartment";
tabType.value = type;
seachAllType["tabType"] = type;
if (type === "person") {
seachAllType["intermediary"] = 0
seachAllType["intermediary"] = 0;
} else if (type === "intermediary") {
seachAllType["intermediary"] = 1
seachAllType["intermediary"] = 1;
} else if (type === "need") {
seachAllType["intermediary"] = 6
seachAllType["keyword"] = seachVal.value
seachAllType["intermediary"] = 6;
seachAllType["keyword"] = seachVal.value;
} else {
seachAllType["intermediary"] = ""
seachAllType["intermediary"] = "";
}
let seachObj = setSeachId()
getDataList(seachAllType, seachObj.count == 0 ? false : true)
}
let seachObj = setSeachId();
getDataList(seachAllType, seachObj.count == 0 ? false : true);
};
//搜索key
let seachKey = reactive({
@@ -271,147 +272,145 @@ let seachKey = reactive({
intermediary: {},
studentapartment: {},
},
})
});
let seachInfoData = shallowReactive({
data: {},
})
});
//直接输入url
if (isNeedHousing.value) {
tabType.value = "need"
seachAllType["intermediary"] = 6
tabType.value = "need";
seachAllType["intermediary"] = 6;
}
//切换选项重置输入框内容
let setSeachVal = () => {
seachAllType["searchid"] = setPageKey().searchid
seachVal.value = seachKey.key.keyword
}
seachAllType["searchid"] = setPageKey().searchid;
seachVal.value = seachKey.key.keyword;
};
//设置点击一级区域
let setLocation = (type, data) => {
seachAllType[type] = data
seachAllType["school"] = ""
}
seachAllType[type] = data;
seachAllType["school"] = "";
};
//设置搜索数据
let setSeachConditions = (type, data) => {
if (seachAllType["tabType"] !== "apartment") {
if (type === "rent") {
seachAllType["rent_min"] = data.min
seachAllType["rent_max"] = data.max
seachAllType["rent_min"] = data.min;
seachAllType["rent_max"] = data.max;
} else if (type !== "") {
seachAllType[type] = data
seachAllType[type] = data;
} else if (type === "") {
data.indexOf("isintermediary") !== -1 ? (seachAllType["isintermediary"] = 1) : (seachAllType["isintermediary"] = 0)
data.indexOf("isverified") !== -1 ? (seachAllType["isverified"] = 1) : (seachAllType["isverified"] = 0)
data.indexOf("iselevator") !== -1 ? (seachAllType["iselevator"] = 1) : (seachAllType["iselevator"] = 0)
data.indexOf("issunshinearea") !== -1 ? (seachAllType["issunshinearea"] = 1) : (seachAllType["issunshinearea"] = 0)
data.indexOf("isintermediary") !== -1 ? (seachAllType["isintermediary"] = 1) : (seachAllType["isintermediary"] = 0);
data.indexOf("isverified") !== -1 ? (seachAllType["isverified"] = 1) : (seachAllType["isverified"] = 0);
data.indexOf("iselevator") !== -1 ? (seachAllType["iselevator"] = 1) : (seachAllType["iselevator"] = 0);
data.indexOf("issunshinearea") !== -1 ? (seachAllType["issunshinearea"] = 1) : (seachAllType["issunshinearea"] = 0);
}
if (type === "school") {
seachAllType.location = []
seachAllType.location = [];
}
if (type === "location") {
seachAllType.school = ""
seachAllType.school = "";
}
} else {
seachAllType = {
tabType: "apartment",
...type.value,
}
};
}
if (tabType.value != "need") {
setSeachVal()
setSeachVal();
} else if (tabType.value == "need") {
seachVal.value = seachAllType.keyword
seachVal.value = seachAllType.keyword;
}
if (!seachAllType["tabType"]) seachAllType["tabType"] = tabType.value
if (!seachAllType["tabType"]) seachAllType["tabType"] = tabType.value;
if (!seachVal.value) {
seachAllType.searchid = ""
seachAllType.searchid = "";
}
//设置其他选项
if (seachAllType["tabType"] === "person") {
seachAllType["isintermediary"] = 0
seachAllType["isintermediary"] = 0;
} else if (seachAllType["tabType"] === "intermediary") {
seachAllType["isverified"] = 0
seachAllType["isverified"] = 0;
} else {
seachAllType["isverified"] = 0
seachAllType["isintermediary"] = 0
seachAllType["isverified"] = 0;
seachAllType["isintermediary"] = 0;
}
let seachObj = setSeachId()
getDataList(seachAllType, seachObj.count == 0 ? false : true)
}
let seachObj = setSeachId();
getDataList(seachAllType, seachObj.count == 0 ? false : true);
};
//设置当前搜索key
let setPageKey = () => {
return tabType.value === "person" ? seachKey.key.personal : tabType.value === "intermediary" ? seachKey.key.intermediary : tabType.value === "apartment" ? seachKey.key.studentapartment : ""
}
return tabType.value === "person" ? seachKey.key.personal : tabType.value === "intermediary" ? seachKey.key.intermediary : tabType.value === "apartment" ? seachKey.key.studentapartment : "";
};
let setSeachId = () => {
return tabType.value === "person" ? seachInfoData.data.personal : tabType.value === "intermediary" ? seachInfoData.data.intermediary : tabType.value === "apartment" ? seachInfoData.data.studentapartment : ""
}
return tabType.value === "person" ? seachInfoData.data.personal : tabType.value === "intermediary" ? seachInfoData.data.intermediary : tabType.value === "apartment" ? seachInfoData.data.studentapartment : "";
};
let isDownGetData = inject("isDownGetData")
let isDownGetData = inject("isDownGetData");
//搜索初始化
let searchInit = data => {
api.search({ keyword: data })
.then(res => {
if (res.code === 200) {
seachKey.key = res.data
seachInfoData.data = JSON.parse(JSON.stringify(res.data))
let seachObj = checkSearckInit(setSeachId())
seachAllType.searchid = seachObj.searchid
seachAllType["intermediary"] = tabType.value === "person" ? 0 : tabType.value === "intermediary" ? 1 : tabType.value === "need" ? 6 : ""
seachAllType["tabType"] = tabType.value
getDataList(seachAllType, seachObj.count == 0 ? false : true)
isDownGetData.value = true
} else {
isDownGetData.value = false
ElMessage({
message: res.message,
center: true,
})
}
})
}
let searchInit = (data) => {
api.search({ keyword: data }).then((res) => {
if (res.code === 200) {
seachKey.key = res.data;
seachInfoData.data = JSON.parse(JSON.stringify(res.data));
let seachObj = checkSearckInit(setSeachId());
seachAllType.searchid = seachObj.searchid;
seachAllType["intermediary"] = tabType.value === "person" ? 0 : tabType.value === "intermediary" ? 1 : tabType.value === "need" ? 6 : "";
seachAllType["tabType"] = tabType.value;
getDataList(seachAllType, seachObj.count == 0 ? false : true);
isDownGetData.value = true;
} else {
isDownGetData.value = false;
ElMessage({
message: res.message,
center: true,
});
}
});
};
//判断搜索数据数量
let checkSearckInit = data => {
if (data.count) return data
let obj = {}
let checkSearckInit = (data) => {
if (data.count) return data;
let obj = {};
if (seachInfoData.data.personal.count > 0) {
obj = seachInfoData.data.personal
tabType.value = "person"
seachAllType["intermediary"] = 0
obj = seachInfoData.data.personal;
tabType.value = "person";
seachAllType["intermediary"] = 0;
} else if (seachInfoData.data.intermediary.count > 0) {
obj = seachInfoData.data.intermediary
tabType.value = "intermediary"
seachAllType["intermediary"] = 1
obj = seachInfoData.data.intermediary;
tabType.value = "intermediary";
seachAllType["intermediary"] = 1;
} else if (seachInfoData.data.studentapartment.count > 0) {
obj = seachInfoData.data.studentapartment
tabType.value = "apartment"
seachAllType["intermediary"] = ""
} else obj = setSeachId()
return obj
}
obj = seachInfoData.data.studentapartment;
tabType.value = "apartment";
seachAllType["intermediary"] = "";
} else obj = setSeachId();
return obj;
};
//搜索数据
let seachList = item => {
let routeInfo = route.currentRoute.value
if (!seachVal.value.replace(/\s/g, "")) return
let seachList = (item) => {
let routeInfo = route.currentRoute.value;
if (!seachVal.value.replace(/\s/g, "")) return;
if (!seachVal.value) {
return
return;
}
if (seachAllType["intermediary"] === 6) {
seachAllType["keyword"] = seachVal.value
let seachObj = setSeachId()
getDataList(seachAllType, seachObj.count == 0 ? false : true)
seachAllType["keyword"] = seachVal.value;
let seachObj = setSeachId();
getDataList(seachAllType, seachObj.count == 0 ? false : true);
} else {
searchInit(seachVal.value)
searchInit(seachVal.value);
}
route.push({
path: routeInfo.path,
@@ -419,22 +418,22 @@ let seachList = item => {
keyword: seachVal.value,
isNeedHousing: routeInfo.query.isNeedHousing,
},
})
}
});
};
//筛选词条
let typeText = ["地理位置", "出租方式", "租金", "租期", "性别要求", "发布时间", "其他"]
let typeText = ["地理位置", "出租方式", "租金", "租期", "性别要求", "发布时间", "其他"];
//显示筛选组件
let showSelectModule = ref(false)
let showSelectModule = ref(false);
//选中地区
let selectData = reactive({ data: [] })
let selectData = reactive({ data: [] });
let selectTabCheck = reactive({
id: "",
title: "",
data: [],
})
});
//最新发布选项
let listSort = shallowReactive({
@@ -446,58 +445,58 @@ let listSort = shallowReactive({
],
checkType: "timestamp",
check: "最新发布",
})
});
//搜索列表排序
let listSortCheck = item => {
let obj = listSort.type[item]
listSort.checkType = obj.type
listSort.check = obj.title
setSeachConditions("orderby", obj.type)
}
let listSortCheck = (item) => {
let obj = listSort.type[item];
listSort.checkType = obj.type;
listSort.check = obj.title;
setSeachConditions("orderby", obj.type);
};
let seachArea = {} //区域找房
let seachArea = {}; //区域找房
//获取区域下列数据
let getLocationData = data => {
let getLocationData = (data) => {
for (let item in data) {
if (!seachArea.data[item.substring(0, 1) - 1].data) seachArea.data[item.substring(0, 1) - 1].data = []
if (!seachArea.data[item.substring(0, 1) - 1].data) seachArea.data[item.substring(0, 1) - 1].data = [];
if (item.length > 1) {
seachArea.data[item.substring(0, 1) - 1].data.push({
title: data[item],
id: item,
})
});
}
}
}
};
//更新当前数据数量
let setListCount = (item, num) => {
if (item.tabType === "intermediary") {
seachKey.key["intermediary"]["count"] = num
seachKey.key["intermediary"]["count"] = num;
} else if (item.tabType === "person") {
seachKey.key["personal"]["count"] = num
seachKey.key["personal"]["count"] = num;
} else if (item.tabType === "apartment") {
seachKey.key["studentapartment"]["count"] = num
seachKey.key["studentapartment"]["count"] = num;
}
}
};
watchEffect(() => {
seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
if (seachArea.data.length > 0 && !seachArea.data[0].data) getLocationData(store.state.indexData.config.location)
})
seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : [];
if (seachArea.data.length > 0 && !seachArea.data[0].data) getLocationData(store.state.indexData.config.location);
});
defineExpose({
searchInit,
setListCount,
checkPageType,
})
});
// 跳转我的页面
const gouser = tab => {
const gouser = (tab) => {
if (store.state["user"]["uid"] > 0 || store.state["user"]["uin"] > 0) {
route.push(`/user?tab=${tab}`)
return
route.push(`/user?tab=${tab}`);
return;
}
store.state.showloginmodal = true
}
store.state.showloginmodal = true;
};
</script>
<style scoped lang="less">
img {

222
src/views/apartmentDetail.vue
View File

@@ -237,7 +237,7 @@
<img class="icon" src="@/assets/img/apartmentDetail/consult-icon.png" />
咨询
</div>
<div v-else class="full-rent">已租满</div>
<div v-else class="full-rent flexcenter">已租满</div>
</div>
</div>
<!-- <div class="type-item flexacenter" v-for="(item, index) in roomList" :key="index">
@@ -613,6 +613,44 @@
</div>
</div>
</el-dialog>
<el-dialog v-model="isInspectPop" width="600" class="inspectPop" :show-close="false">
<!-- <div class="title-box dis-f al-item jus-x">
点评
<img src="@/assets/img/detail/close.png" class="close-icon" @click="isSelectSchool = false" />
</div> -->
<div class="type flexacenter">
<div class="item pitch">全部 4</div>
<div class="item">寄托实地考察 2</div>
<div class="item">寄托回访 2</div>
</div>
<div class="list">
<div class="item flexflex" v-for="(item, index) in 10" :key="index">
<img class="avatar" src="https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d_Zwocn3qqsgFptxhcq_cQnrld6YjDgwVBq_D-81qNDQyOQ~~" />
<div class="remark-content flexflex flex1">
<div class="type flexacenter">
<img class="image" src="@/assets/img/publicImage/return-visit.png" />
<img class="image" src="@/assets/img/publicImage/inspect-icon.png" />
寄托实地考察
</div>
<div class="username flexacenter">
寄托方同学
<div class="checked-in">已入住</div>
<img class="image" src="" />
</div>
<div class="date">2025.3.15</div>
<div class="text">交通和生活都非常便利，房间整洁完善，拎包入住没问题！周围五百米内，超市、购物广场及娱乐设施应有尽有。步行至地铁口仅需3分钟！ 所有房间都有大窗，基本都朝南，每个房间阳光都很充足，窗外是公园。所有房间可以看到绿树，公园，很开阔，不压抑。真是非常难得的窗景！ 客服小COCO24小时在线，每日提供清洁服务，妥妥的生活无忧！</div>
<div class="media" scroll-x>
<div class="media-item" v-for="(item, index) in 10" :key="index">
<img class="media-img" src="https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-X9pkucH3qqsgFptxhcq_cQnrleqEnW1EdBq_D-81qNDQyOQ~~" />
<img class="media-icon" src="@/assets/img/publicImage/video-icon.svg" />
</div>
</div>
</div>
</div>
</div>
</el-dialog>
</template>
<script setup>
@@ -1283,7 +1321,8 @@ let showDistance = ref(false);
// 点击收藏
const handleCollect = () => {
api.apartmentCollection({ token }).then((res) => {
// api.apartmentCollection({ token }).then((res) => {
proxy.$post("https://api.gter.net/v1/apartment/collection", { token }).then((res) => {
if (res.code != 200) return;
const data = res.data;
info.value.iscollect = data.status || 0;
@@ -1389,6 +1428,8 @@ const roomCollect = (id, index) => {
roomList.value[index].iscollection = data.status || 0;
});
};
let isInspectPop = ref(false);
</script>
<style lang="less" scoped>
@@ -1916,4 +1957,181 @@ const roomCollect = (id, index) => {
}
}
}
.inspectPop {
border-radius: 16px;
overflow: hidden;
.el-dialog__header {
display: none;
}
.el-dialog__body {
padding: 0;
.title-box {
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 25px;
line-height: 26px;
color: #000000;
text-align: center;
padding-top: 25px;
padding-bottom: 16px;
.close-icon {
width: 20px;
height: 20px;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
}
.type {
padding: 20px 20px;
border-bottom: 1px dotted #d7d7d7;
.item {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
text-align: center;
line-height: 30px;
border-radius: 12px;
height: 30px;
background-color: rgba(235, 235, 235, 1);
padding: 0 12px;
margin-right: 15px;
cursor: pointer;
&.pitch {
background-color: rgba(249, 93, 93, 1);
color: #ffffff;
}
}
}
.list {
max-height: 600px;
overflow: auto;
.item {
padding-top: 20px;
padding-left: 20px;
&:not(:last-of-type) {
border-bottom: 1px dashed #d7d7d7;
}
.avatar {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 10px;
}
.remark-content {
flex-direction: column;
position: relative;
.type {
position: absolute;
top: 0;
right: 0;
font-size: 14px;
color: #555555;
height: 23px;
background: inherit;
background-color: #f2f2f2;
border-radius: 78px 0 0 78px;
padding: 0 6px;
border: none;
.image {
// width: 24px;
height: 16px;
margin-right: 4px;
}
}
.username {
// font-size: 24px;
font-size: 14px;
// color: #333333;
// margin-bottom: 4.5px;
color: #555;
margin-right: 10px;
// cursor: pointer;
margin-bottom: 4px;
.image {
height: 20px;
margin-left: 12px;
}
.checked-in {
height: 20px;
line-height: 20px;
background-color: rgba(246, 246, 246, 0);
border: 1px solid rgba(80, 227, 194, 1);
border-radius: 45px;
font-size: 12px;
color: #50e3c2;
padding: 0 8px;
margin-left: 12px;
}
}
.date {
color: #a3a3a3;
font-size: 13px;
margin-bottom: 3px;
}
.text {
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
line-height: 24px;
white-space: pre-line;
margin-bottom: 12px;
margin-right: 13px;
color: #333333;
}
.media {
white-space: nowrap;
overflow: auto;
width: 512px;
margin-bottom: 20px;
.media-item {
display: inline-flex;
margin-right: 8px;
position: relative;
cursor: pointer;
.media-img {
// width: 213px;
width: 105px;
height: 70px;
border-radius: 8px;
object-fit: cover;
}
.media-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
}
}
}
}
}
}
}
}
</style>

2
src/views/edit.vue
View File

@@ -311,7 +311,7 @@
<!-- 所在区域 -->
<div class="form-option modeOne flexacenter" v-if="intermediary != 6 && item.field == 'location'">
<el-popover v-model:visible="areaPopState" placement="bottom" :width="640" :show-arrow="false" trigger="click" popper-style="padding:0; border-radius:16px;" :disabled="verified == 1">
<el-popover v-model:visible="areaPopState" placement="bottom" :width="640" :show-arrow="false" trigger="click" popper-style="padding:0; border-radius:16px !important;" :disabled="verified == 1">
<template #reference>
<div ref="location" class="modeOne-item flexacenter" :class="{ 'disabled': verified == 1 }" style="width: 640px;">
<div class="modeOne-text flexacenter" v-if="info['location']">

110
src/views/housingView/apartment.vue
View File

@@ -17,9 +17,13 @@
</div>
<!-- 其他附近房源 -->
<div v-if="moreList.length != 0" class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div>
<div class="wid1200" ref="moreShowList">
<apartment-item v-for="(item, index) in moreList" :key="index" :item="item" :pitchValue="pitchValue"></apartment-item>
<!-- <div v-if="moreList.length != 0" class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div> -->
<div v-if="moreList.length != 0" class="more-title wid1200 flexacenter">
<img class="more-icon" src="@/assets/img/publicImage/more-recommend.png" />
更多推荐
</div>
<div class="list wid1200" ref="moreShowList">
<apartment-item v-for="(item, index) in moreList" :key="index" :item="item" :pitchValue="pitchValue" :masonryInstance="masonryInstanceMore" @handlecollect="handleMoreCollect"></apartment-item>
</div>
<div class="bottom-tps" v-if="list.length != 0 && page == 0">- 到底了 -</div>
@@ -66,19 +70,19 @@ let list = ref([]);
let listCount = ref(0); // 列表数量
let masonryInstance = null;
// let masonryInstanceMore = null
let masonryInstanceMore = null;
onMounted(() => {
// 初始化瀑布流
masonryInstance = new Masonry(gridContainer.value, {
itemSelector: ".item",
gutter: 22,
gutter: 22.5,
});
// masonryInstanceMore = new Masonry(moreShowList.value, {
// itemSelector: ".item",
// gutter: 20,
// })
masonryInstanceMore = new Masonry(moreShowList.value, {
itemSelector: ".item",
gutter: 22.5,
});
// pitchValue.value = store.getters.getApartmentPitchValue
@@ -114,11 +118,7 @@ const getData = () => {
localStorage.setItem("apartmentPitchValue", JSON.stringify(pitchValue.value));
proxy
.$post("https://api.gter.net/v1/apartment/lists", {
limit: 10,
page,
...pitchValue.value,
})
.$post("https://api.gter.net/v1/apartment/lists", { limit: 12, page, ...pitchValue.value })
.then((res) => {
if (res.code != 200) return;
let data = res.data;
@@ -133,6 +133,13 @@ const getData = () => {
requestLoading = false;
});
// console.log("pitchValue.value", pitchValue.value);
if (page == 0 && (pitchValue.value.companyid || pitchValue.value.rent_max || pitchValue.value.rent_min || pitchValue.value.roomlistings || pitchValue.value.roomtype || pitchValue.value.school || pitchValue.value.tag)) {
morePage = 1;
getMoreList();
}
// 小于20 代表筛选 数据不够了，需要加载更多的 随便在这里初始化 更多的 瀑布流 HTML
// if (data.data.length < 20 && (pitchValue.value["school"] || pitchValue.value["location"].length != 0)) {
// morePage.value = 1
@@ -149,7 +156,8 @@ const handleScroll = () => {
const scrollHeight = document.documentElement.scrollHeight;
const clientHeight = document.documentElement.clientHeight;
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop + clientHeight >= scrollHeight - 350) getData();
if (scrollTop + clientHeight >= scrollHeight - 350 && page != 0) getData();
if (scrollTop + clientHeight >= scrollHeight - 350 && page == 0) getMoreList();
};
let pitchValue = ref({
@@ -172,6 +180,9 @@ const handleTransfer = (data) => {
store.state.apartmentPitchValue = pitchValue.value;
page = 1;
list.value = [];
moreList.value = [];
getData();
break;
}
@@ -180,31 +191,42 @@ const handleTransfer = (data) => {
let moreShowList = ref(null);
let moreState = ref(false); // 更多列表 显示状态
let morePage = ref(1);
let morePage = 1;
let moreList = ref([]);
let moreLoading = ref(false);
// 加载更多数据列表
const getMoreList = () => {
if (morePage.value == 0 || moreLoading.value) return;
if (morePage == 0 || moreLoading.value) return;
moreLoading.value = true;
let postData = {
page: morePage.value,
...pitchValue.value,
};
api.getMoreLists(postData).then((res) => {
// let postData = {
// page: morePage.value,
// ...pitchValue.value,
// };
let notids = [];
list.value.forEach((element) => notids.push(element.id));
proxy.$post("https://api.gter.net/v1/apartment/lists", { notids, page: morePage, limit: 12 }).then((res) => {
if (res.code != 200) return;
const data = res.data;
if (!data.data) return;
// moreList.value = data.data || [];
// nextTick(() => {
// masonryInstanceMore.reloadItems();
// masonryInstanceMore.layout();
// moreLoading.value = false;
// });
moreList.value = moreList.value.concat(data.data);
moreState.value = true;
if (data.data && data.data.length < data.limit) morePage.value = 0;
else {
morePage.value++;
window.addEventListener("scroll", getMoreScroll, true);
}
// if (data.data && data.data.length < data.limit) morePage = 0;
// else morePage++;
morePage = data.page * data.limit >= data.count ? 0 : morePage + 1;
nextTick(() => {
masonryInstanceMore.reloadItems();
masonryInstanceMore.layout();
@@ -233,13 +255,34 @@ const handlecollect = (uniqid) => {
}
});
api.apartmentCollection({ token }).then((res) => {
// api.apartmentCollection({ token }).then((res) => {
proxy.$post("https://api.gter.net/v1/apartment/collection", { token }).then((res) => {
if (res.code != 200) return;
const data = res.data;
list.value[targetIndex]["iscollect"] = data.status;
ElMessage.success(res.message);
});
};
// 处理列表的点击收藏
const handleMoreCollect = (uniqid) => {
let targetIndex = 0;
let token = "";
moreList.value.forEach((element, index) => {
if (element.uniqid == uniqid) {
targetIndex = index;
token = element.token || "";
}
});
proxy.$post("https://api.gter.net/v1/apartment/collection", { token }).then((res) => {
if (res.code != 200) return;
const data = res.data;
moreList.value[targetIndex]["iscollect"] = data.status;
ElMessage.success(res.message);
});
};
</script>
<style lang="less" scoped>
.screen-box {
@@ -287,4 +330,15 @@ const handlecollect = (uniqid) => {
margin-top: 40px;
margin-bottom: 43px;
}
.more-title {
color: #333333;
font-size: 16px;
margin: 20px auto 0;
.more-icon {
width: 24px;
height: 24px;
margin-right: 10px;
}
}
</style>

204
src/views/seachIndex.vue
View File

@@ -8,7 +8,7 @@
<biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
</div>
<div class="body-maxWidth" v-show="seachSelectData.data && seachSelectData.data.tabType === 'apartment' && dataList.data && dataList.data.length > 0" ref="gridContainer">
<apartment-item v-for="(item, index) in listApartment" :key="index" :item="item" :masonryInstance="masonryInstance"></apartment-item>
<apartment-item v-for="(item, index) in listApartment" :key="index" :item="item" :masonryInstance="masonryInstance"></apartment-item>
</div>
<div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
<noList hintText="暂无搜索结果" hintTextTwo="建议更换搜索关键词，或放宽筛选条件"></noList>
@@ -23,167 +23,169 @@
</template>
<script setup>
import {reactive, onMounted, ref, provide, onBeforeUnmount, nextTick} from "vue"
import pageTopBar from "../components/pageTopBar/pageTopBar.vue"
import biserialItem from "../components/biserialListItem/biserialListItem.vue"
import listBtmPrompt from "../components/public/have-questions.vue"
import noList from "../components/public/empty-duck.vue"
import api from "../utils/api"
import tool from "../toolJs/downLoadMore"
import inputModule from "../components/seachPage/input.vue"
import apartmentItem from "@/components/public/apartment-item.vue"
import Masonry from "masonry-layout"
import {useRouter} from "vue-router"
import {ElMessage} from "element-plus"
import footerTool from "@/components/footer/footer.vue"
import loadMoreText from "../components/loadMore/loadMoreText.vue"
import backToTop from "@/components/public/backToTop.vue"
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick, getCurrentInstance } from "vue";
import pageTopBar from "../components/pageTopBar/pageTopBar.vue";
import biserialItem from "../components/biserialListItem/biserialListItem.vue";
import listBtmPrompt from "../components/public/have-questions.vue";
import noList from "../components/public/empty-duck.vue";
import api from "../utils/api";
import tool from "../toolJs/downLoadMore";
import inputModule from "../components/seachPage/input.vue";
import apartmentItem from "@/components/public/apartment-item.vue";
import Masonry from "masonry-layout";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import footerTool from "@/components/footer/footer.vue";
import loadMoreText from "../components/loadMore/loadMoreText.vue";
import backToTop from "@/components/public/backToTop.vue";
const { proxy } = getCurrentInstance();
//路由
const route = useRouter()
let routeQuery = reactive({data: {}})
const route = useRouter();
let routeQuery = reactive({ data: {} });
//获取数据
let pages = ref(1) //页数
let dataList = reactive({data: [], count: 0}) //个人/中介数据
let dataCount = ref(0) //数据数量
let pageList = ref([])
let pages = ref(1); //页数
let dataList = reactive({ data: [], count: 0 }); //个人/中介数据
let dataCount = ref(0); //数据数量
let pageList = ref([]);
// let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })//双列瀑布数据
let seachSelectData = reactive({data: {}}) //搜索数据
let loading = ref(true) //开关
let loadingText = ref(` 下拉加载更多 `)
let listApartment = ref([]) //公寓数据
let masonryInstance = null //瀑布实例
let listMasonryInstance = null
provide("count", dataCount)
let seachSelectData = reactive({ data: {} }); //搜索数据
let loading = ref(true); //开关
let loadingText = ref(` 下拉加载更多 `);
let listApartment = ref([]); //公寓数据
let masonryInstance = null; //瀑布实例
let listMasonryInstance = null;
provide("count", dataCount);
//保存搜索设置
let setSeachSelectData = (data, type) => {
pages.value = 1
pages.value = 1;
seachSelectData.data = {
...data,
}
loading.value = true
getDataList(seachSelectData.data, type)
}
};
loading.value = true;
getDataList(seachSelectData.data, type);
};
//初始化列表参数
let setInitial = () => {
pageList[1] = []
pageList[2] = []
pageList.height1 = 0
pageList.height2 = 0
}
pageList[1] = [];
pageList[2] = [];
pageList.height1 = 0;
pageList.height2 = 0;
};
//获取搜索数据
let getDataList = (data, type = true) => {
console.log("data", data);
if (!type) {
//是否继续搜索
seachSelectData.data.tabType !== "apartment" ? (pageList.value = []) : (listApartment.value = [])
dataList.data = []
dataCount.value = 0
loading.value = false
return
seachSelectData.data.tabType !== "apartment" ? (pageList.value = []) : (listApartment.value = []);
dataList.data = [];
dataCount.value = 0;
loading.value = false;
return;
}
loadingText.value = " 加载中..... "
if (!loading.value) return
loadingText.value = " 加载中..... ";
if (!loading.value) return;
let postData = {
page: pages.value,
limit: 20,
...data,
}
loading.value = false
let seachApi = null
if (seachSelectData.data.tabType !== "apartment") {
seachApi = api.getLists(postData)
} else {
seachApi = api.apartment(postData)
}
seachApi.then(res => {
};
loading.value = false;
let seachApi = null;
if (seachSelectData.data.tabType !== "apartment") seachApi = api.getLists(postData);
else seachApi = proxy.$post("https://api.gter.net/v1/apartment/lists", postData);
// else seachApi = api.apartment(postData)
seachApi.then((res) => {
if (res.code === 200) {
dataList.data = res.data.data
dataList.data = res.data.data;
if (res.data.data.length < 20) {
loadingText.value = ` 到底了 `
loading.value = false
loadingText.value = ` 到底了 `;
loading.value = false;
} else {
loadingText.value = " 下拉加载更多 "
loading.value = true
loadingText.value = " 下拉加载更多 ";
loading.value = true;
}
if (seachSelectData.data.tabType !== "apartment") {
if (pages.value === 1) {
setInitial()
pageList.value = []
setInitial();
pageList.value = [];
}
pageList.tab = 1
dataList.count = res.data.count
dataCount.value = res.data.count
pageList.value = pageList.value.concat(dataList.data)
pageList.tab = 1;
dataList.count = res.data.count;
dataCount.value = res.data.count;
pageList.value = pageList.value.concat(dataList.data);
nextTick(() => {
listMasonryInstance.reloadItems()
listMasonryInstance.layout()
})
listMasonryInstance.reloadItems();
listMasonryInstance.layout();
});
} else {
let data = res.data
dataList.count = res.data.count
dataCount.value = res.data.count
if (pages.value === 1) listApartment.value = []
listApartment.value = listApartment.value.concat(data.data)
let data = res.data;
dataList.count = res.data.count;
dataCount.value = res.data.count;
if (pages.value === 1) listApartment.value = [];
listApartment.value = listApartment.value.concat(data.data);
nextTick(() => {
masonryInstance.reloadItems()
masonryInstance.layout()
masonryInstance.reloadItems();
masonryInstance.layout();
if (res.data.data.length >= 20) {
loading.value = true
loading.value = true;
}
})
});
}
inputModuleInfo.value.setListCount(seachSelectData.data, dataList.count)
inputModuleInfo.value.setListCount(seachSelectData.data, dataList.count);
} else {
ElMessage({
message: res.message,
center: true,
})
});
}
})
}
});
};
let isDownGetData = ref(true) // 是否可以下拉获取数据
let isDownGetData = ref(true); // 是否可以下拉获取数据
provide("isDownGetData", isDownGetData)
provide("isDownGetData", isDownGetData);
//加载更多
let downLoadMore = () => {
tool.loadMore(() => {
if (!loading.value || !isDownGetData.value) return
pages.value++
getDataList(seachSelectData.data)
})
}
if (!loading.value || !isDownGetData.value) return;
pages.value++;
getDataList(seachSelectData.data);
});
};
let inputModuleInfo = ref(null)
const gridContainer = ref(null)
const list = ref(null)
let inputModuleInfo = ref(null);
const gridContainer = ref(null);
const list = ref(null);
//listImg
onMounted(() => {
listMasonryInstance = new Masonry(list.value, {
itemSelector: ".item",
gutter: 20,
})
});
masonryInstance = new Masonry(gridContainer.value, {
itemSelector: ".item",
gutter: 15,
})
routeQuery.data = route.currentRoute.value.query
});
routeQuery.data = route.currentRoute.value.query;
if (routeQuery.data.keyword && routeQuery.data.keyword.replace(/\s/g, "") && routeQuery.data.houseingPageType != 6) {
inputModuleInfo.value.searchInit(routeQuery.data.keyword) //调用搜索组件的搜索功能
inputModuleInfo.value.searchInit(routeQuery.data.keyword); //调用搜索组件的搜索功能
// route.currentRoute.value.query.keyword = ''
} else {
inputModuleInfo.value.checkPageType()
inputModuleInfo.value.checkPageType();
}
window.addEventListener("scroll", downLoadMore, true)
})
window.addEventListener("scroll", downLoadMore, true);
});
onBeforeUnmount(() => {
window.removeEventListener("scroll", downLoadMore, true)
})
window.removeEventListener("scroll", downLoadMore, true);
});
</script>
<style scoped lang="less">
img {

11
src/views/user.vue
View File

@@ -213,7 +213,7 @@ import emptyDuck from "@/components/public/empty-duck.vue";
import choosingIdentity from "@/components/edit/choosingIdentity.vue";
import backToTop from "@/components/public/backToTop.vue";
import authenticationInfo from "@/components/seachModule/authenticationInfo.vue";
import { redirectToExternalWebsite } from '@/utils/util.js'
import { redirectToExternalWebsite } from "@/utils/util.js";
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, nextTick, pushScopeId } from "vue";
import { useRoute, useRouter } from "vue-router";
@@ -279,7 +279,7 @@ const init = () => {
else tabState.value = "fav";
} else tabState.value = route.query["tab"];
if (data.user?.uin == 4171117) tabState.value = "fav";
// if (data.user?.uin == 4171117) tabState.value = "fav";
if (tabState.value == "publish") getPublishData();
else getFavData();
@@ -511,12 +511,9 @@ const handleScroll = () => {
};
// 跳转公寓详情页
const goApartmentDetail = (item) => redirectToExternalWebsite(`/apartmentDetail?uniqid=${item.uniqid}`)
const goApartmentDetail = (item) => redirectToExternalWebsite(`/apartmentDetail?uniqid=${item.uniqid}`);
onUnmounted(() => {
window.removeEventListener("scroll", handleScroll);
});
onUnmounted(() => window.removeEventListener("scroll", handleScroll));
</script>
<style lang="less" scoped>