gter.net/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main'

Browse Source 
# Conflicts:
#	src/router/index.js
This commit is contained in:
A1300399510 2023-07-14 17:28:38 +08:00
commit bfac0867b5
12 changed files with 403 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/assets/homeImage/intermediaryAuthentication.svg Normal file
View File

File diff suppressed because one or more lines are too long

21
src/assets/homeImage/personAuthentication.svg Normal file
View File

File diff suppressed because one or more lines are too long

12
src/components/indexWaterfallBox/indexWaterfallBox.vue
View File

@ -12,14 +12,14 @@
<img class="apartment-img" :src="itemData.imageLocal || itemData.image"
v-if="itemData.type === 'housing' || itemData.type === 'apartment'" />
<div class="authentication-box"
v-if="(itemData.type === 'housing' && itemData.verified) || (itemData.type === 'apartment' && itemData.isintermediary)">
v-if="(itemData&&itemData.type === 'housing' && itemData&&itemData.verified) || (itemData&&itemData.type === 'apartment' &&itemData&& itemData.isintermediary)">
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
<img src="../../assets/homeImage/authenticationBg.svg" class="authentication-bg" alt="">
<img src="../../assets/homeImage/authenticationText.png" class="authentication-text" alt="">
</div>
</div>
<div class="long-title">
<span class="type" v-if="itemData.type === 'housing'">{{ itemData.gptype }}</span>{{ itemData.title }}
<span class="type" v-if="itemData.type === 'housing'">{{ itemData.gptype }}</span>{{ itemData&&itemData.title }}
</div>
<div class="type-tab">
<span v-if="itemData.type === 'housing'">
@ -49,22 +49,22 @@
<div class="suite-box" v-if="itemData.type === 'apartment'">
<div class="dis-f al-item jus-bet">
<div class="suite-type">
{{ itemData.specifications && itemData.specifications[0].title }}
{{ itemData.specifications && itemData.specifications[0]&&itemData.specifications[0].title }}
</div>
<div>
<span class="unit">HK$</span>
<span class="price">{{ itemData.specifications && itemData.specifications[0].value }}</span>
<span class="price">{{ itemData.specifications && itemData.specifications[0]&&itemData.specifications[0].value }}</span>
<span class="date">/月</span>
</div>
</div>
<div class="line"></div>
<div class="dis-f al-item jus-bet">
<div class="suite-type">
{{ itemData.specifications && itemData.specifications[1].title }}
{{ itemData.specifications && itemData.specifications[1]&&itemData.specifications[1].title }}
</div>
<div>
<span class="unit">HK$</span>
<span class="price">{{ itemData.specifications && itemData.specifications[1].value }}</span>
<span class="price">{{ itemData.specifications && itemData.specifications[1]&&itemData.specifications[1].value }}</span>
<span class="date">/月</span>
</div>
</div>

57
src/components/pageTopBar/pageTopBar.vue
View File

@ -9,7 +9,15 @@
:class="{ 'navigation-text-click': item.key === topTabNum }" v-for="(item, i) in topTab.data" :key="i">
{{
item.name }}</div>
<img src="" class="user-img" alt="">
<div class="user-box">
<img src="" class="user-img" alt="">
<div class="user-out-box">
<div class="box-bg dis-f jus-x">
<div class="top-box"></div>
退出
</div>
</div>
</div>
</div>
</div>
<div class="dis-f jus-x al-item">
@ -68,7 +76,7 @@ watchEffect(() => {
}
else if (res.name === '求房源') {
res.path = '/needHousing'
}
else if (res.name === '我的') {
@ -86,7 +94,7 @@ let topTabSelect = (type, item) => {
}
//页面跳转
const router=useRouter()
const router = useRouter()
let tabBtnType = ref('/')
let changeTabBtnType = (item) => {
tabBtnType.value = item.path
@ -248,6 +256,45 @@ tabBtnType.value = route.path
height: 280px;
}
.user-box:hover .user-out-box {
display: block;
}
.user-out-box {
color: #fff;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 10px;
position: absolute;
bottom: -35px;
display: none;
}
.user-box {
position: relative;
.top-box {
border-radius: 2px;
width: 8px;
height: 8px;
background: #000;
position: absolute;
top: -4px;
transform: rotate(45deg)
}
.box-bg {
width: 32px;
height: 28px;
line-height: 28px;
border-radius: 5px;
background: #000;
text-align: center;
position: relative;
}
}
/deep/.el-carousel__arrow {
border: 2px solid #545454;
width: 50px;
@ -287,5 +334,9 @@ tabBtnType.value = route.path
color: #7F7F7F;
text-align: left;
}
.dropdown {
background: #000;
}
</style>

71
src/components/seachModule/seachModule.vue
View File

@ -12,8 +12,8 @@
<div class="triangle"></div>
</div>
<div class="dis-f al-item pos-r">
<el-input v-model="seachValue" placeholder="搜索房源或输入房源ID" @keyup.enter='seachList' @blur="setHistoryShow"
@focus="setHistoryShow" style="height:48px;width:460px;"></el-input>
<el-input v-model="seachValue" placeholder="搜索房源或输入房源ID" @keyup.enter='seachList'
@blur="setHistoryShow" @focus="setHistoryShow" style="height:48px;width:460px;"></el-input>
<div class="seach-btn dis-f al-item jus-x" @click="seachList">
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
搜索
@ -51,23 +51,29 @@
<img src="../../assets/homeImage/addBtn.png" class="img" alt="">
发布房源
</div>
<div class=" dis-f jus-x al-item authentication-btn" v-if="routePath==='/personHousing'">
<div class=" dis-f jus-x al-item authentication-btn" v-if="routePath === '/personHousing'">
<img src="../../assets/homeImage/authenticationBtnImg.png" class="text-img" alt="">
<img src="../../assets/homeImage/authenticationBtnCode.svg" class="code-img" alt="">
<img src="../../assets/homeImage/personAuthentication.svg" class="btn-qrcode" alt="">
</div>
<div class=" dis-f jus-x al-item authentication-btn intermediary-btn" v-if="routePath==='/intermediaryHousing'">
<div class=" dis-f jus-x al-item authentication-btn intermediary-btn"
v-if="routePath === '/intermediaryHousing'">
<img src="../../assets/homeImage/intermediaryText.png" class="text-img" alt="">
<img src="../../assets/homeImage/intermediaryCode.svg" class="code-img" alt="">
<img src="../../assets/homeImage/intermediaryAuthentication.svg" class="btn-qrcode" alt="">
</div>
</div>
<div class="seach-info-box dis-f" v-if="routePath==='/'">
<seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length"></seachInfo>
<div class="seach-info-box dis-f" v-if="routePath === '/'">
<seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length">
</seachInfo>
<seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length"></seachInfo>
<seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data" v-if="seachArea.data.length"></seachInfo>
<seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data" v-if="allHireType.data.length"></seachInfo>
<seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data"
v-if="seachArea.data.length"></seachInfo>
<seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data"
v-if="allHireType.data.length"></seachInfo>
</div>
<!-- -->
<div v-if="routePath==='/personHousing'||routePath==='/intermediaryHousing'">
<div v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing'||routePath === '/needHousing'">
<selectTabBox></selectTabBox>
</div>
</div>
@ -77,7 +83,7 @@
</template>
<script setup>
import { ref, watchEffect,reactive,watch } from 'vue';
import { ref, watchEffect, reactive, watch } from 'vue';
import seachInfo from '../indexSeachInfo/indexSeachInfo.vue';
import selectTabBox from "../selectTabBox/selectTabBox.vue";
import { useRoute } from 'vue-router';
@ -90,31 +96,31 @@ let historyShow = ref(false);
let setHistoryShow = () => {
historyShow.value = !historyShow.value
}
let seachSchoolBtn=reactive({data:[]});//学校地区
let hireType={};//整租
let allHireType={};//合租
let seachArea={};//区域找房
let historyArr =reactive({data:[]})//历史查找记录
let hotArr =reactive({data:[]})
let seachSchoolBtn = reactive({ data: [] });//学校地区
let hireType = {};//整租
let allHireType = {};//合租
let seachArea = {};//区域找房
let historyArr = reactive({ data: [] })//历史查找记录
let hotArr = reactive({ data: [] })
//监听路由
const route = useRoute()
let routePath=ref('')
routePath.value=route.path
let routePath = ref('')
routePath.value = route.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 : []
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=()=>{
let seachList = () => {
localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
}
@ -154,6 +160,20 @@ defineExpose({
justify-content: space-between;
}
.authentication-btn:hover .btn-qrcode {
display: block;
}
.btn-qrcode {
width: 390px;
height: 612px;
position: absolute;
right: -14px;
top: 45px;
z-index: 333;
display: none;
}
.seach-box-bg {
background: #d7d7d7 !important;
background: inherit;
@ -175,9 +195,11 @@ defineExpose({
position: relative;
justify-content: end;
border-bottom: 1px solid #ebebeb;
.intermediary-btn{
background:rgba(241, 245, 247, 1);
.intermediary-btn {
background: rgba(241, 245, 247, 1);
}
.authentication-btn {
width: 160px;
height: 48px;
@ -190,6 +212,7 @@ defineExpose({
box-shadow: none;
margin-left: 20px;
cursor: pointer;
position: relative;
.text-img {
width: 100px;
@ -199,7 +222,7 @@ defineExpose({
.code-img {
width: 20px;
height: 20px;
margin-left:8px;
margin-left: 8px;
}
}

180
src/components/selectTabBox/selectTabBox.vue
View File

@ -1,9 +1,10 @@
<template>
<div class="dis-f s-w-100" style="border-bottom:1px solid #ebebeb;">
<div class="select-box s-w-50 bor-r">
<div class="dis-f bor-b-das">
<div class="tab-title">地理位置</div>
<div class="tab-text">
<div class="dis-f bor-b-das" :class="{'al-item housing-pd':routePath==='/needHousing'}">
<div class="tab-title">{{routePath==='/needHousing'?'目标区域':'地理位置'}}</div>
<!-- 非求房源页面 -->
<div class="tab-text" v-if="routePath!=='/needHousing'">
<div class="dis-f">
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'region' }"
@click="selectPosition = 'region'">按区域</div>
@ -61,9 +62,38 @@
</div>
</div>
</div>
<!-- 求房源 -->
<div class="need-housing-box dis-f al-item" v-if="routePath==='/needHousing'">
<div class="select-tab-info" style="margin-top:0;">
<div class="housing-info-box info-box" v-show="selectPosition === 'region'" style="position: relative;padding: 0;height:30px;width: 420px;">
<div class="check-none dis-f al-item btn"
:class="[{'btn-check':selectTabCheck.id === item.id}]"
style="margin-right:10px;"
@click="setSelectData(item.id, item.data, item.title)" v-for="(item, i) in list" :key="i">
<div class="dis-f al-item">{{ item.title }} <div class="dis-f al-item"
v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp > &nbsp
<div>
{{
selectData.data && selectData.data.length === 0 ? '不限' :
selectData.data && selectData.data.length
}}
</div>
</div>
</div>
<img :src="selectTabCheck.id === item.id ? require('../../assets/homeImage/dropDownIcon.svg') : require('../../assets/homeImage/selectInfoTabIcon.svg')"
class="img" :class="{ 'mg-l-30': selectTabCheck.id === item.id }" alt="" v-show="i!==0">
</div>
<div class="hid-box">
<checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
:closeSeach="closeSeach" :list="selectTabCheck.data" :watchData="watchData">
</checkBoxGroup>
</div>
</div>
</div>
</div>
</div>
<div class="dis-f pad-t-b-15 bor-b-das">
<div class="tab-title">出租方式</div>
<div class="dis-f pad-t-b-15 bor-b-das" :class="{'housing-pd':routePath==='/needHousing'}">
<div class="tab-title">{{routePath==='/needHousing'?'求租方式':'出租方式'}}</div>
<div class="tab-text dis-f al-item" style="padding-bottom:0;">
<div class="dis-f" v-for="(item, i) in hireTypeArr" :key="i">
<div v-if="item.title !== '不限'">
@ -97,12 +127,20 @@
</div>
</div>
<div class="dis-f al-item" style="padding:25px 0;">
<div class="tab-title">租金</div>
<div class="dis-f al-item rent-box">
<input type="text" class="input" v-model="rentObj.min">
<span class="tab-icon">~</span>
<input type="text" class="input" v-model="rentObj.max">
<span class="unit-box">HK$/月</span>
<div class="tab-title">{{routePath==='/needHousing'?'租金预算':'租金'}}</div>
<div class="dis-f al-item rent-box jus-bet">
<div class="dis-f al-item">
<input type="text" class="input" v-model="rentObj.min">
<span class="tab-icon">~</span>
<input type="text" class="input" v-model="rentObj.max">
<span class="unit-box">HK$/月</span>
</div>
<div class="clean-btn dis-f al-item jus-x" v-show="rentObj.min||rentObj.max">
<div class="img-box dis-f jus-x al-item">
<img class="img" src="../../assets/homeImage/closeIcon.svg" alt="">
</div>
清除金额
</div>
</div>
</div>
</div>
@ -119,7 +157,7 @@
</div>
</div>
<div class="dis-f bor-b-das pd-t-20">
<div class="tab-title">性别</div>
<div class="tab-title">{{routePath==='/needHousing'?'求租者性别':'性别'}}</div>
<div class="select-btn-box">
<div class="dis-f">
<div class="btn jus-x al-item dis-f" v-for="(item, i) in genderData" :key="i"
@ -155,9 +193,9 @@
</div>
<div class="btm-list">
<div class="dis-f al-item">
共<span class="count">123</span>条个人房源 <span v-show="selectTabCheck.title"> &nbsp | &nbsp</span>
共<span class="count">123</span>条个人房源 <span v-show="selectTabCheck.title&&selectTabCheck.id"> &nbsp | &nbsp</span>
<div class="dis-f al-item">
<div v-show="selectTabCheck.title">{{ selectTabCheck.title }}:</div>
<div v-show="selectTabCheck.id&&selectTabCheck.title">{{ selectTabCheck.title }}:</div>
<div v-for="(item, i) in selectData.data" :key="i" class="btm-btn">
{{ item.title }}
<img src="../../assets/homeImage/closeIcon.svg" @click="deleteSelect(i)" class="img" alt="">
@ -173,6 +211,7 @@
<script setup>
import { reactive, ref, getCurrentInstance } from 'vue';
import { useRoute } from 'vue-router';
import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
const { proxy } = getCurrentInstance()
@ -199,15 +238,15 @@ let list = [{
}, {
title: '九龙',
id: 2,
data:[{
title:'1',
id:'1'
},{
title:'2',
id:'2'
},{
title:'3',
id:'3'
data: [{
title: '1',
id: '1'
}, {
title: '2',
id: '2'
}, {
title: '3',
id: '3'
}]
}]
//按区域/学校选择的地区
@ -266,7 +305,7 @@ let setSelectData = (id, data = [], title) => {
selectTabCheck.id = id;
selectTabCheck.title = title
selectTabCheck.data = data;
selectData.data=[]
selectData.data = []
showSelect.value = true
}
//取消按钮
@ -293,10 +332,17 @@ let watchData = (data) => {
// selectData.data = data
// console.log(selectData)
}
//监听路由
const route = useRoute()
let routePath = ref('')
routePath.value = route.path
console.log(123,routePath.value)
//底部删除按钮
let deleteSelect = (id)=>{
let deleteSelect = (id) => {
console.log(id)
selectData.data.splice(id,1)
selectData.data.splice(id, 1)
}
@ -310,8 +356,8 @@ let hireTypeObj = reactive({ id: '', title: '', hireId: '不限' })//出租方
let setHireId = (title) => {
hireTypeObj.hireId = title
hireTypeObj.id=''
hireTypeObj.title=''
hireTypeObj.id = ''
hireTypeObj.title = ''
}
let dropdownCommand = (obj) => {
@ -385,6 +431,16 @@ img {
.bor-b-das {
border-bottom: 1px dashed #ebebeb;
}
.housing-pd{
padding:5px 0 25px 0;
}
.housing-pd-25{
padding:0 25px;
}
.jus-bet {
justify-content: space-between;
}
.dropdown-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
@ -434,6 +490,10 @@ img {
.select-box {
padding: 20px 24px 0px 25px;
.needHousing-box{
height:50px;
}
.select-tab-info {
position: relative;
margin-top: 5px;
@ -526,6 +586,14 @@ img {
}
}
.housing-info-box{
display: flex;
align-items: center;
height:30px;
position: relative;
top:0 !important;
}
.info-box {
position: absolute;
top: 5px;
@ -608,12 +676,21 @@ img {
height: 30px;
line-height: 30px;
margin-right: 35px;
width: 60px;
width: 70px;
}
.info-bor-b {
border-bottom: 1px dashed #ebebeb;
}
.need-housing-box{
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #7F7F7F;
text-align: center;
height:50px;
}
.tab-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
@ -686,7 +763,7 @@ img {
}
.btn-check {
color: #50E3C2;
color: #50E3C2 !important;
border: 1px solid #50E3C2;
background: #eefcf9;
}
@ -698,6 +775,37 @@ img {
font-style: normal;
font-size: 14px;
color: #555555;
width: 455px;
.clean-btn {
width: 96px;
height: 30px;
background: inherit;
background-color: rgba(246, 246, 246, 1);
border: none;
border-radius: 50px;
font-family: 'ArialMT', 'Arial', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 13px;
letter-spacing: normal;
color: #333333;
.img-box {
width: 14px;
height: 14px;
border: 1px solid #333;
margin-right: 5px;
border-radius: 50%;
position: relative;
.img {
position: absolute;
width: 5px;
height: 5px;
}
}
}
.tab-icon {
margin: 0 10px;
@ -717,6 +825,7 @@ img {
border-style: solid;
border-color: rgba(179, 179, 179, 1);
border-radius: 10px;
padding:0 10px;
}
}
@ -735,11 +844,12 @@ img {
font-style: normal;
font-size: 14px;
color: #50e3c2;
margin-left:10px;
.img{
width:8px;
height:8px;
margin-left:8px;
margin-left: 10px;
.img {
width: 8px;
height: 8px;
margin-left: 8px;
}
}

2
src/main.js
View File

@ -43,7 +43,7 @@ api.index().then(res => {
store.state.user = res.data.user
store.state.nav = res.data.nav
store.state.wechat = res.data.wechat
// console.log(store.state.seachTypeData)
console.log(123,res.data.recommendedTab)
}
})

8
src/router/index.js
View File

@ -49,8 +49,12 @@ const routes = [
component: () => import(/* webpackChunkName: "housing" */ '@/views/housingView/person.vue')
},
{//中介房源
path: '/intermediaryHousing',
component: () => import(/* webpackChunkName: "housing" */ '@/views/housingView/intermediary.vue')
path:'/intermediaryHousing',
component:()=> import(/* webpackChunkName: "housing" */ '@/views/housingView/intermediary.vue')
},
{//求房源
path:'/needHousing',
component:()=> import(/* webpackChunkName: "housing" */ '@/views/housingView/needHousing.vue')
}
]

4
src/store/index.js
View File

@ -3,8 +3,8 @@ import { createStore } from 'vuex'
export default createStore({
state: {
seachTypeData: [],
indexData: [],
ListSelectBtn: [],
indexData: [],//首页数据
ListSelectBtn: [],//瀑布流选项
user: {}, // 我的信息数据
wechat: {}, // 微信号 二维码等数据
nav: [], // 顶部的导航数据

47
src/views/HomeView.vue
View File

@ -109,7 +109,7 @@
<div>
<div ref="waterfall1">
<div class="waterfall-first-box dis-f">
<div class="info-box dis-f jus-x al-item first">
<div class="info-box dis-f jus-x al-item first" @click="indexWaterfallBoxCheck(indexData.data.tabs[0])">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/person.png" class="img" alt="">
@ -117,7 +117,7 @@
<div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[0].name }}</div>
</div>
</div>
<div class="info-box dis-f jus-x al-item second">
<div class="info-box dis-f jus-x al-item second" @click="indexWaterfallBoxCheck(indexData.data.tabs[1])">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/intermediary.png" class="img" alt="">
@ -125,7 +125,7 @@
<div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[1].name }}</div>
</div>
</div>
<div class="info-box dis-f jus-x al-item third">
<div class="info-box dis-f jus-x al-item third" @click="indexWaterfallBoxCheck(indexData.data.tabs[2])">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/brand.png" class="img" alt="">
@ -133,7 +133,7 @@
<div class="text-center">{{ indexData.data.tabs && indexData.data.tabs[2].name }}</div>
</div>
</div>
<div class="info-box dis-f jus-x al-item">
<div class="info-box dis-f jus-x al-item" @click="indexWaterfallBoxCheck(indexData.data.tabs[3])">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/seek.png" class="img" alt="">
@ -178,7 +178,8 @@ import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
import seachModule from "../components/seachModule/seachModule.vue";
import indexRegularBox from '../components/indexRegularBox/indexRegularBox.vue';
import headerNavigation from '../components/public/head.vue'
import headerNavigation from '../components/public/head.vue';
import { useRouter } from 'vue-router'
import store from '../store/index';
import api from "../utils/api";
@ -201,7 +202,22 @@ let seachTypeData = reactive({ data: [] })
watchEffect(() => {
seachTypeData.data = store.state.seachTypeData
indexData.data = store.state.indexData
ListSelectBtn.data = store.state.recommendedTab
ListSelectBtn.data = store.state.ListSelectBtn
if (indexData.data.length) {
indexData.data.tabs.map(res => {
if (res.name === "个人房源") {
res.path = '/personHousing'
} else if (res.name === "中介房源") {
res.path = '/intermediaryHousing'
} else if (res.name === "求房源") {
res.path = '/needHousing'
} else if (res.name === "品牌公寓") {
res.path = ''
}
})
}
})
//公寓数据
@ -265,24 +281,26 @@ let getRecommendList = () => {
//标签切换
let listDataTypeChange = (item) => {
ListSelectBtn.selectType = item.type
loadMore.value = false
waterfallList[1] = []
waterfallList[2] = []
waterfallList[3] = []
waterfallList[4] = []
pages.value=1
pages.value = 1
getRecommendList()
}
//监听滚动条
const onPageSrcoll = (e) => {
if (!loadMore.value) return
let body = document.documentElement ? document.documentElement : document.body ?
document.body :
document.querySelector('.element');
let scrollTop = body.scrollTop
let clientHeight = body.clientHeight
let offsetHeight = body.offsetHeight
if (scrollTop + clientHeight > offsetHeight - 500) {
if (scrollTop + clientHeight === offsetHeight) {
if (loadMore.value) {
loadMore.value = false
pages.value += 1
@ -291,14 +309,21 @@ const onPageSrcoll = (e) => {
}
}
//瀑布流模块
const router = useRouter()
let indexWaterfallBoxCheck = (res) => {
router.push({
path: res.path
})
}
onMounted(() => {
document.documentElement.scrollTop = 0
currentInstance = getCurrentInstance()
setTimeout(() => {
getRecommendList()
}, 1000)
nextTick(() => {
window.addEventListener('scroll', onPageSrcoll, true);
})
}, 1000)
})
onBeforeUnmount(() => {

62
src/views/housingView/needHousing.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<div>
<pageTopBar></pageTopBar>
<seachModule></seachModule>
<div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35">
<div class="dis-f jus-bet">
<div>
<biserialItem></biserialItem>
</div>
<div></div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
import seachModule from "../../components/seachModule/seachModule.vue";
import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
</script>
<style scoped>
img {
object-fit: contain;
}
.dis-f {
display: flex;
}
.jus-x {
justify-content: center;
}
.al-item {
align-items: center;
}
.pos-r {
position: relative;
}
.body-maxWidth {
width: 1200px;
min-width: 1200px;
}
.s-w-100 {
width: 100%;
}
.jus-bet {
justify-content: space-between;
}
.mg-t-35 {
margin-top: 35px;
}
</style>

3
src/views/housingView/person.vue
View File

@ -12,7 +12,7 @@
</div>
</div>
</div>
<listBtmPrompt></listBtmPrompt>
</div>
</template>
@ -20,6 +20,7 @@
import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
import seachModule from "../../components/seachModule/seachModule.vue";
import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
import listBtmPrompt from "../../components/public/have-questions.vue";
</script>
<style scoped>
img {