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

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

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

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

@@ -72,7 +72,7 @@
</div> </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> <b>筛选</b>
<div class="screen-btn-text" style="margin-left: 0">：学校附近</div> <div class="screen-btn-text" style="margin-left: 0">：学校附近</div>
| |
@@ -185,98 +185,6 @@
</el-dropdown> </el-dropdown>
</div> </div>
</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> </div>
<!-- 收起按钮 --> <!-- 收起按钮 -->
@@ -354,6 +262,7 @@ let pitchValue = ref({
school: 0, school: 0,
roomlistings: 0, roomlistings: 0,
keyword: "", keyword: "",
tag: "",
}); });
watchEffect(() => { watchEffect(() => {
@@ -455,8 +364,6 @@ let deleteSeachVal = (i) => {
}; };
const tagList = ["单人间", "大床房", "独立卫浴", "两房整租", "电梯"]; const tagList = ["单人间", "大床房", "独立卫浴", "两房整租", "电梯"];
let tag = ref(""); // 标签筛选选择
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
* { * {
@@ -738,14 +645,6 @@ let tag = ref(""); // 标签筛选选择
border-bottom: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb;
} }
// .option-left,
// .option-right {
// width: 600px;
// &:not(:last-of-type) {
// border-right: 1px #ebebeb dotted;
// }
.option-item { .option-item {
// width: 540px; // width: 540px;
// padding-top: 24px; // padding-top: 24px;
@@ -873,43 +772,6 @@ let tag = ref(""); // 标签筛选选择
line-height: 24px; 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 { .option-dropdown-img {
width: 12px; width: 12px;
height: 7px; height: 7px;

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

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

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

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

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

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

222
src/views/apartmentDetail.vue
View File

@@ -237,7 +237,7 @@
<img class="icon" src="@/assets/img/apartmentDetail/consult-icon.png" /> <img class="icon" src="@/assets/img/apartmentDetail/consult-icon.png" />
咨询 咨询
</div> </div>
<div v-else class="full-rent">已租满</div> <div v-else class="full-rent flexcenter">已租满</div>
</div> </div>
</div> </div>
<!-- <div class="type-item flexacenter" v-for="(item, index) in roomList" :key="index"> <!-- <div class="type-item flexacenter" v-for="(item, index) in roomList" :key="index">
@@ -613,6 +613,44 @@
</div> </div>
</div> </div>
</el-dialog> </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> </template>
<script setup> <script setup>
@@ -1283,7 +1321,8 @@ let showDistance = ref(false);
// 点击收藏 // 点击收藏
const handleCollect = () => { 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; if (res.code != 200) return;
const data = res.data; const data = res.data;
info.value.iscollect = data.status || 0; info.value.iscollect = data.status || 0;
@@ -1389,6 +1428,8 @@ const roomCollect = (id, index) => {
roomList.value[index].iscollection = data.status || 0; roomList.value[index].iscollection = data.status || 0;
}); });
}; };
let isInspectPop = ref(false);
</script> </script>
<style lang="less" scoped> <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> </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'"> <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> <template #reference>
<div ref="location" class="modeOne-item flexacenter" :class="{ 'disabled': verified == 1 }" style="width: 640px;"> <div ref="location" class="modeOne-item flexacenter" :class="{ 'disabled': verified == 1 }" style="width: 640px;">
<div class="modeOne-text flexacenter" v-if="info['location']"> <div class="modeOne-text flexacenter" v-if="info['location']">

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

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

204
src/views/seachIndex.vue
View File

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