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

个人/中介房源 求房源页面

Browse Source
This commit is contained in:
luJianJun 2023-07-18 16:30:48 +08:00
parent eb1bed2973
commit d1d1bf3e18
14 changed files with 561 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/homeImage/needHousingCorner.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="33px" height="32px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1 0 0 1 -917 -764 )">
<path d="M 33 8 L 33 32 C 33 14.08 18.9200000000001 0 0.992435082777774 0 L 25 0 C 29.48 0 33 3.51999999999998 33 8 Z " fill-rule="nonzero" fill="#62b1ff" stroke="none" transform="matrix(1 0 0 1 917 764 )" />
</g>
</svg>

88
src/components/biserialListItem/biserialListItem.vue
View File

@ -1,52 +1,60 @@
<template>
<div class="list-item" ref="list">
<div class="authentication-box dis-f al-item" v-if="data && data.verified == 1">
<div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1">
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
<img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
<img src="../../assets/homeImage/authenticationText.png" class="text-img" alt="">
</div>
<div class="top-box">
<div class="title-text">
{{ data && data.subject || '暂无标题' }}
{{ data && data.data && data.data.subject || '暂无标题' }}
</div>
<div class="mg-t-10 dis-f al-item-start jus-bet s-w-100">
<div>
<div class="dis-f al-item">
<div class="tab-item first-tab">
{{ data && data.gptype || '' }}
{{ data && data.data && data.data.gptype || '' }}
</div>
<div class="tab-item mg-l-8" v-if="listData && listData.data && listData.data.type[data && data.type]">
{{ listData && listData.data && listData.data.type[data && data.type] || '' }}
<div class="tab-item mg-l-8"
v-if="listData && listData.data && listData.data.type[data && data.data && data.data.type]">
{{ listData && listData.data && listData.data.type[data && data.data && data.data.type] || '' }}
</div>
<div class="tab-item mg-l-8" v-if="data && data.elevator !== -1">
{{ listData && listData.data && listData.data.elevator[data && data.elevator] || '' }}
<div class="tab-item mg-l-8" v-if="data && data.data && data.data.elevator !== -1">
{{ listData && listData.data && listData.data.elevator[data && data.data && data.data.elevator] ||
'' }}
</div>
<div class="tab-item mg-l-8" v-if="data && data.sunshinearea !== -1">
{{ listData && listData.data && listData.data.sunshinearea[data && data.sunshinearea] || '' }}
<div class="tab-item mg-l-8" v-if="data && data.data && data.data.sunshinearea !== -1">
{{ listData && listData.data && listData.data.sunshinearea[data && data.data &&
data.data.sunshinearea] || '' }}
</div>
<div class="tab-item mg-l-8" v-if="listData && listData.data && listData.data.gender[data && data.gender]">
{{ listData && listData.data && listData.data.gender[data && data.gender] || '' }}
<div class="tab-item mg-l-8"
v-if="listData && listData.data && listData.data.gender[data && data.data && data.data.gender]">
{{ listData && listData.data && listData.data.gender[data && data.data && data.data.gender] || ''
}}
</div>
</div>
<div class="address-text dis-f al-item">
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
<span>{{
location && location.data && location.data[1] ? `${location && location.data && location.data[data && data.location && data.location.substring(0, 1)]} > ${location && location.data[data && data.location]}` : ''
location && location.data && location.data[1] ? `${location && location.data &&
location.data[data && data.data && data.data.location.substring(0, 1)]} > ${location &&
location.data[data && data.data && data.data.location]}` : ''
}}</span>
</div>
<div class="price-text dis-f" style="align-items: end;">
<span class="unit">HK$</span>
<span class="price">{{ data && data.rent }}</span>
<span class="price">{{ data && data.data && data.data.rent }}</span>
<span>/月</span>
<span class="time" v-show="data && data.rentalduration != 0">[ 租期{{ data && data.rentalduration }}{{
data && data.rentalperiod }} ]</span>
<span class="time" v-show="data && data.data && data.data.rentalduration != 0">[ 租期{{ data &&
data.data && data.data.rentalduration }}{{
data && data.data && data.data.rentalperiod }} ]</span>
</div>
</div>
<div class="img">
<div>
<img :src="data && data.ispic ? data && data.imageurl : data && data.isvideo ? data && data.imageurl : ''"
@load="loadFinish" class="img " alt="">
<div class="s-img dis-f jus-x al-item" v-if="data && data.isvideo">
<img :src="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : ''"
@load="loadFinish" @error="loadFinish" class="img " alt="">
<div class="s-img dis-f jus-x al-item" v-if="data && data.data && data.data.isvideo">
<img src="../../assets/homeImage/videoIcon.svg" class="img" alt="">
</div>
</div>
@ -55,22 +63,25 @@
<img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath === '/personHousing'" alt="">
<img src="../../assets/homeImage/intermediaryCorner.svg" v-if="routePath === '/intermediaryHousing'"
class="tab-img" alt="">
<img src="../../assets/homeImage/needHousingCorner.svg" v-if="routePath === '/needHousing'"
class="tab-img" alt="">
</div>
<div class="btm-box dis-f al-item">
<img :src="data && data.avatar" class="user-img" alt="">
<span class="user-name">{{ data && data.author }}</span>
<div class="btn" v-if="data && data.isintermediary !== 1 && !data.intermediary_text">{{
listData && listData.data && listData.data.intermediary[data && data.intermediary] }}</div>
<div class="btn" v-if="data && data.isintermediary !== 1 && data.intermediary_text">{{ data && data.intermediary_text
<img :src="data && data.data && data.data.avatar" class="user-img" alt="">
<span class="user-name">{{ data && data.data && data.data.author }}</span>
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && !data.data.intermediary_text">{{
listData && listData.data && listData.data.intermediary[data && data.data && data.data.intermediary] }}</div>
<div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && data.intermediary_text">{{ data &&
data.data.intermediary_text
}}</div>
<img src="../../assets/homeImage/intermediaryTabImg.png" v-if="data && data.isintermediary == 1"
<img src="../../assets/homeImage/intermediaryTabImg.png" v-if="data && data.data && data.data.isintermediary == 1"
class="intermediary-tab-img" alt="">
</div>
</div>
</template>
<script setup>
import { ref, defineProps, reactive,onMounted,getCurrentInstance } from "vue";
import { ref, defineProps, reactive, onMounted, getCurrentInstance, watchEffect } from "vue";
import { useRoute, useRouter } from 'vue-router';
import store from '../../store/index';
let props = defineProps({
@ -80,18 +91,21 @@ let props = defineProps({
imgLoad: {
type: Function
},
listId:{
type:[String,Number]
listId: {
type: [String, Number]
}
})
let data = {}
data = props.item
let data = reactive({ data: {} })
watchEffect(() => {
data.data = props.item
})
let listId=props.listId
let listId = props.listId
let imgRef = null
let loadFinish=()=>{
let height=imgRef.ctx.$refs.list.offsetHeight
props.imgLoad(data.id,listId,height)
let loadFinish = () => {
let height = imgRef.ctx.$refs.list.offsetHeight
props.imgLoad(data.id, listId, height)
}
//监听路由
@ -107,7 +121,7 @@ location.data = store.state.indexData && store.state.indexData.config && store.s
let listData = reactive({ data: {} })
listData.data = store.state.indexData && store.state.indexData.config
onMounted(()=>{
onMounted(() => {
imgRef = getCurrentInstance()
})
@ -128,7 +142,8 @@ img {
.jus-bet {
justify-content: space-between;
}
.al-item-start{
.al-item-start {
align-items: flex-start;
}
@ -352,7 +367,8 @@ img {
text-align: center;
}
}
}</style>
}
</style>

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

@ -6,7 +6,8 @@
<img src="../../assets/homeImage/topTitleIcon.svg"
v-show="!checkList.list || (checkList.list && !checkList.list.length)" class="img" alt="">
<div class="none-btn" v-show="(checkList.list && checkList.list.length)"></div>
<span :class="[(checkList.list && checkList.list.length) ? 'none-title' : 'title']">不限</span>
<span :class="[(checkList.list && checkList.list.length) ? 'none-title' : 'title']">不限
</span>
</div>
<div style="padding-top:10px;">
<el-checkbox-group v-model="checkList.list">
@ -47,6 +48,10 @@ const props = defineProps({
default:()=>{
return ()=>{}
}
},
clearList:{
type:Boolean,
default:true
}
})
let list =reactive([])
@ -64,7 +69,7 @@ watchEffect(() => {
list.splice(0,list.length)
list.push(...props.list)
// console.log(show)
if(show){
if(show&&props.clearList){
checkList.list=[]
}
})
@ -75,7 +80,7 @@ watch(()=>checkList.list,(nval,avl)=>{
//取消
let closeBtn=()=>{
checkList.list.splice(0,checkList.list.length)
// checkList.list.splice(0,checkList.list.length)
closeSeach()
}

4
src/components/indexSeachInfo/indexSeachInfo.vue
View File

@ -10,7 +10,7 @@
:class="[{ 'pad-15': seachType === '3' }]">
<div @click="setSelectType(i + 1,item.data)" v-for="(item, i) in btn.data" :key="i" :class="[
{ 'btn': seachType === '1' },
{ 'mg-l-17': seachType === '1' && i % 4 !== 0 },
{ 'mg-l-17': seachType === '1' && i % 5 !== 0 },
{ 'seach-long-btn btn': seachType === '2' },
{ 'mg-l-17': seachType === '2' && i % 3 !== 0 },
{ 'select-btn': seachType === '3' },
@ -196,7 +196,7 @@ let selectSeach = (data) => {
}
.btn {
width: 117px;
width: 90px;
height: 32px;
background: inherit;
background-color: rgba(246, 246, 246, 1);

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

@ -33,7 +33,7 @@
<el-carousel :interval="5000" arrow="always" height="330" style="height:330px;">
<el-carousel-item v-for="item in bannerLists.data" :key="item.feedId">
<div style="width:100%;height:100%;" class="dis-f jus-x al-item">
<img class="carousel-img" :src="item.imageurl" alt="">
<img class="carousel-img" :src="item.imageurl" alt="" @click="openInfo(item)">
</div>
</el-carousel-item>
</el-carousel>
@ -123,6 +123,10 @@ let changeTabBtnType = (item) => {
})
}
let openInfo=(data)=>{
window.open(data.url)
}
//监听路由
const route = useRoute()
let routePath = ref('')

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

@ -12,7 +12,7 @@
<div class="triangle"></div>
</div>
<div class="dis-f al-item pos-r">
<el-input v-model="seachAllType.seachValue" placeholder="搜索房源或输入房源ID" @keyup.enter='seachList'
<el-input v-model="seachAllType.keyword" 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="">
@ -24,8 +24,8 @@
<div class="title">
历史搜索
</div>
<div class="info-box" @click="setSeachVal(item)">
<div v-for="(item, i) in historyArr.data" :key="i" class="btn">
<div class="info-box">
<div v-for="(item, i) in historyArr.data" :key="i" class="btn" @click="setSeachVal(item)">
{{ item }}
</div>
</div>
@ -35,7 +35,7 @@
热门推荐
</div>
<div class="info-box">
<div v-for="(item, i) in hotArr.data" :key="i" class="btn">
<div v-for="(item, i) in hotArr.data" :key="i" class="btn" @click="setHotSeach(item)">
{{ item }}
</div>
</div>
@ -105,6 +105,12 @@ let getDataList = props.getDataList
//搜索框
let historyShow = ref(false);
let setHistoryShow = () => {
if(historyShow.value){
setTimeout(() => {
historyShow.value = !historyShow.value
},500);
return
}
historyShow.value = !historyShow.value
}
let seachSchoolBtn = reactive({ data: [] });//学校地区
@ -114,9 +120,8 @@ let seachArea = {};//区域找房
let historyArr = reactive({ data: [] })//历史查找记录
let hotArr = reactive({ data: [] })
let seachAllType = reactive({
seachValue: '',
location: [],
types: ''
keyword: '',
location: []
})
@ -151,14 +156,12 @@ watchEffect(() => {
historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []
//搜索数据
let seachList = () => {
console.log()
let data = {
searchid: seachAllType.seachValue,
types: ''
let seachList = (item) => {
if(historyArr.data.indexOf(seachAllType.keyword)===-1){
historyArr.data.push(seachAllType.keyword)
}
localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
getDataList(data)
getDataList(seachAllType)
}
//设置搜索数据
@ -173,13 +176,21 @@ let setSeachConditions = (type, data) => {
data.indexOf('iselevator')!==-1?seachAllType['iselevator']=1:seachAllType['iselevator']=0
data.indexOf('issunshinearea')!==-1?seachAllType['issunshinearea']=1:seachAllType['issunshinearea']=0
}
console.log(seachAllType)
getDataList(seachAllType)
}
//点击历史搜索记录
let setSeachVal = (item) => {
seachAllType.seachValue = item
seachList()
seachAllType.keyword = item
getDataList(seachAllType)
}
//点击热门地区
let setHotSeach=(item)=>{
seachAllType.keyword = item
if(historyArr.data.indexOf(item)===-1)historyArr.data.push(item)
localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
getDataList(seachAllType)
}

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

@ -18,7 +18,7 @@
<div class="check-none dis-f al-item" :class="{ 'check-text': selectTabCheck.id === item.id }"
@click="setSelectData(item.id, item.data, item.name)" v-for="(item, i) in list" :key="i">
<div class="dis-f al-item">{{ item.name }} <div class="dis-f al-item"
v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp > &nbsp
v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp>&nbsp
<div :class="{ 'check-data': selectData.data && selectData.data.length > 0 }">
{{
selectData.data && selectData.data.length === 0 ? '不限' :
@ -34,7 +34,7 @@
</div>
<div class="hid-box">
<checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
:closeSeach="closeSeach" :list="selectTabCheck.data">
:closeSeach="closeSeach" :clearList="clearSelectTabCheck" :list="selectTabCheck.data">
</checkBoxGroup>
</div>
</div>
@ -44,7 +44,7 @@
class="img" alt="">
</div>
<div class="right-btn" @click="nextSchoolData">
<img :src="schoolPages === shcoolData.length-1 ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
<img :src="schoolPages === shcoolData.length - 1 ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
class="img" alt="">
</div>
<el-carousel :autoplay="false" arrow="never" :loop="false" height="50px"
@ -69,10 +69,10 @@
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>
@click="setSelectData(item.id, item.data, item.name)" v-for="(item, i) in list" :key="i">
<div class="dis-f al-item">{{ item.name }} <div class="dis-f al-item"
v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp>&nbsp
<div :class="{'select-num':selectData.data && selectData.data.length}">
{{
selectData.data && selectData.data.length === 0 ? '不限' :
selectData.data && selectData.data.length
@ -86,14 +86,14 @@
</div>
<div class="hid-box">
<checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
:closeSeach="closeSeach" :list="selectTabCheck.data">
:closeSeach="closeSeach" :clearList="clearSelectTabCheck" :list="selectTabCheck.data">
</checkBoxGroup>
</div>
</div>
</div>
</div>
</div>
<div class="dis-f pad-t-b-15 bor-b-das" :class="{ 'housing-pd': routePath === '/needHousing' }">
<div class="dis-f pad-t-b-15 bor-b-das" :class="{ 'housing-pd pd-t-25': 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">
@ -127,7 +127,7 @@
</div>
</div>
</div>
<div class="dis-f al-item" style="padding:25px 0;">
<div class="dis-f al-item" style="padding:30px 0;">
<div class="tab-title">{{ routePath === '/needHousing' ? '租金预算' : '租金' }}</div>
<div class="dis-f al-item rent-box jus-bet">
<div class="dis-f al-item">
@ -136,7 +136,7 @@
<input type="text" class="input" v-model="rentObj.max" @blur="setRent">
<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="clean-btn dis-f al-item jus-x" v-show="rentObj.min || rentObj.max" @click="cleanRent">
<div class="img-box dis-f jus-x al-item">
<img class="img" src="../../assets/homeImage/closeIcon.svg" alt="">
</div>
@ -213,9 +213,9 @@
</span>
<template #dropdown>
<el-dropdown-menu class="pd-10 el-dropdown-menu">
<el-dropdown-item v-for="(items, j) in listSort.type" :key="j" @click="listSortCheck(items)">
<div class="dropdown-text"
:class="{ 'dropdown-check-text': listSort.checkType === items.type }">{{
<el-dropdown-item v-for="(items, j) in listSort.type" :key="j">
<div class="dropdown-text" :class="{ 'dropdown-check-text': listSort.checkType === items.type }"
@click="listSortCheck(items)">{{
items.title
}}
<div class="type-icon" v-show="listSort.checkType === items.type"></div>
@ -229,7 +229,7 @@
</template>
<script setup>
import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject,shallowReactive } from 'vue';
import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive } from 'vue';
import { useRoute } from 'vue-router';
import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
import store from '../../store/index';
@ -241,12 +241,12 @@ let configData = reactive({ data: {} })
const { proxy } = getCurrentInstance()
const props = defineProps({
setSeachCondition:{
type:Function
setSeachCondition: {
type: Function
}
})
let setSeachCondition=props.setSeachCondition
let setSeachCondition = props.setSeachCondition
//最新发布选项
let listSort = shallowReactive({
@ -276,14 +276,14 @@ let list = shallowReactive([{
data: []
}])
//设置区域数据
let setRegionList=()=>{
let arr=store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
arr.map((res,i)=>{
list[i]=res
let setRegionList = () => {
let arr = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
arr.map((res, i) => {
list[i] = res
})
list.unshift({
name:'不限',
id:''
name: '不限',
id: ''
})
}
@ -322,41 +322,52 @@ let setSchoolData = () => {
let setSchoolObj = (obj) => {
schoolSelectObj.id = obj.id
schoolSelectObj.title = obj.title
setSeachCondition('school',obj.id)
setSeachCondition('school', obj.id)
}
//学校轮播组件
let prevSchoolData = () => {
if(schoolPages.value===0)return
if (schoolPages.value === 0) return
const schoolData = proxy.$refs.schoolData
schoolPages.value--
schoolData.prev()
}
let nextSchoolData = () => {
if(schoolPages.value === shcoolData.length-1)return
if (schoolPages.value === shcoolData.length - 1) return
const schoolData = proxy.$refs.schoolData
schoolPages.value++
schoolData.next()
}
//点击区域/学校选项
let clearSelectTabCheck=ref(true)
let setSelectData = (id, data = [], title) => {
showSelect.value = true
console.log(id ,selectTabCheck.id, data, title)
if (id === selectTabCheck.id){
clearSelectTabCheck.value=false
return
}
clearSelectTabCheck.value=true
selectTabCheck.id = id;
selectTabCheck.title = title
selectTabCheck.data = data;
selectData.data = []
showSelect.value = true
if(id===''){
setSeachCondition('location', [])
}
}
//取消按钮
let closeSeach = () => {
selectTabCheck.id = ''
selectData.data = []
console.log(selectTabCheck,selectData)
showSelect.value = false
clearSelectTabCheck.value=false
}
//确认按钮
let selectSeach = (data = []) => {
let arr=[]
let arr = []
data.map(res => {
selectTabCheck.data.map(item => {
if (res === item.id) {
@ -366,7 +377,7 @@ let selectSeach = (data = []) => {
})
selectData.data = arr
showSelect.value = false
setSeachCondition('location',data)
setSeachCondition('location', data)
}
@ -384,6 +395,7 @@ let deleteSelect = (id) => {
let listSortCheck = (item) => {
listSort.checkType = item.type
listSort.check = item.title
setSeachCondition('orderby', item.type)
}
@ -409,7 +421,7 @@ let setHireTypeArr = (type, id) => {
let hireTypeObj = reactive({ id: '', title: '', hireId: '不限' })//出租方式所选
let setHireId = (title) => {
if(hireTypeObj.hireId != title){
if (hireTypeObj.hireId != title) {
hireTypeObj.id = ''
hireTypeObj.title = ''
}
@ -419,32 +431,39 @@ let setHireId = (title) => {
let dropdownCommand = (obj) => {
hireTypeObj.id = obj.id
hireTypeObj.title = obj.title
setSeachCondition('types',obj.id)
setSeachCondition('types', obj.id)
}
//租金
let rentObj = reactive({ min: '', max: '' })
let setRent=()=>{
setSeachCondition('rent',rentObj)
let setRent = () => {
setSeachCondition('rent', rentObj)
}
//清空租金
let cleanRent=()=>{
rentObj.min=''
rentObj.max=''
setSeachCondition('rent', rentObj)
}
//租期
let hireData = reactive([{ title: '不限', id: 0 }, { title: '一年以上', id: 1 }, { title: '低于一年', id: 2 }])
let hireDate = reactive({ id: 0, title: '' })
//设置租期
let setHireDate = (item)=>{
let setHireDate = (item) => {
hireDate.id = item.id
setSeachCondition('rentalduration',item.id)
setSeachCondition('rentalduration', item.id)
}
//性别
let genderData = reactive([{ title: '不限', id: 0 }, { title: '女', id: 1 }, { title: '男', id: 2 }])
let gender = reactive({ id: 0 })
//设置性别
let setGender=(item)=>{
let setGender = (item) => {
gender.id = item.id
setSeachCondition('gender',item.id)
setSeachCondition('gender', item.id)
}
//发布时间
@ -452,9 +471,9 @@ let releaseTime = reactive([{ title: '不限', id: 0 }, { title: '三天', id: '
let releaseObj = reactive({ id: 0 })
//设置发布时间
let setReleaseObj=(item)=>{
let setReleaseObj = (item) => {
releaseObj.id = item.id
setSeachCondition('publish',item.id)
setSeachCondition('publish', item.id)
}
//其他
@ -462,11 +481,11 @@ let otherData = reactive([{ title: '认证房源', id: 'isverified' }, { title:
let otherCheck = reactive({ list: [] })
//设置其他
let setOtherCheck=(data)=>{
let setOtherCheck = (data) => {
// data.indexOf('isverified')!==-1?setSeachCondition('isverified',1):setSeachCondition('isverified',0)
// data.indexOf('iselevator')!==-1?setSeachCondition('iselevator',1):setSeachCondition('iselevator',0)
// data.indexOf('issunshinearea')!==-1?setSeachCondition('issunshinearea',1):setSeachCondition('issunshinearea',0)
setSeachCondition('',data)
setSeachCondition('', data)
}
watchEffect(() => {
@ -535,6 +554,9 @@ img {
.housing-pd {
padding: 5px 0 25px 0;
}
.pd-t-25{
padding-top:25px;
}
.housing-pd-25 {
padding: 0 25px;
@ -757,7 +779,7 @@ img {
.img {
width: 10px;
height: 10px;
margin-left: 5px;
margin-left: 10px;
}
}
}
@ -857,7 +879,7 @@ img {
.img {
width: 10px;
height: 10px;
margin-left: 5px;
margin-left: 10px;
}
}
@ -870,6 +892,18 @@ img {
border: 1px solid #50E3C2;
background: #eefcf9;
}
.select-num {
padding:0px 10px;
background: inherit;
background-color: rgba(80, 227, 194, 1);
border: none;
border-radius: 13px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
color: #FFFFFF;
}
}
.rent-box {
@ -893,6 +927,7 @@ img {
font-size: 13px;
letter-spacing: normal;
color: #333333;
cursor: pointer;
.img-box {
width: 14px;

1
src/main.js
View File

@ -69,7 +69,6 @@ app.use(ElPopover)
app.use(ElDatePicker, {
locale: zhCn
})
app.use(ElMessage)
app.use(ElSkeleton)
app.use(ElSkeletonItem)

18
src/toolJs/downLoadMore.js Normal file
View File

@ -0,0 +1,18 @@
//监听滚动条
const loadMore = (loadFunction) => {
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) {
loadFunction()
}
}
const tool={
loadMore
}
export default tool

4
src/utils/api.js
View File

@ -16,7 +16,11 @@ export default{
getLocationData:(params={})=>{//地区选择数据
return axios.get('/tenement/pc/api/home/getLocationData',params)
},
search:(params={})=>{//搜索初始化
return axios.get('/tenement/pc/api/search',params)
},
getLists:(params={})=>{//获取搜索数据 个人/中介/求房源
return axios.post('/tenement/pc/api/lists',params)
}
}

1
src/views/HomeView.vue
View File

@ -363,7 +363,6 @@ onMounted(() => {
onBeforeUnmount(() => {
window.removeEventListener('scroll', onPageSrcoll, true);
console.log('卸载', window.scroll)
})

133
src/views/housingView/intermediary.vue
View File

@ -1,24 +1,134 @@
<template>
<div>
<pageTopBar></pageTopBar>
<seachModule></seachModule>
<seachModule :count="dataList.count" :getDataList="setSeachSelectData"></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 class="dis-f jus-bet" v-show="dataList.data && dataList.data.length > 0">
<div ref="list">
<biserialItem v-for="(item, i) in pageList['1']" :key="i" :item="item" :imgLoad="watchImgLoad"
listId="1"></biserialItem>
</div>
<div></div>
<div>
<biserialItem v-for="(item, i) in pageList['2']" :key="i" :item="item" :imgLoad="watchImgLoad"
listId="2"></biserialItem>
</div>
</div>
<div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
<noList></noList>
</div>
</div>
</div>
<listBtmPrompt></listBtmPrompt>
</div>
</template>
<script setup>
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick } from 'vue'
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";
import noList from "../../components/public/empty-duck.vue";
import api from "../../utils/api";
import tool from '../../toolJs/downLoadMore'
//获取数据
let pages = ref(1)
let dataList = reactive({ data: [], count: 0 })
let dataCount = ref(0)
let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })
let seachSelectData = reactive({ data: {} })
let loading = ref(false)
provide('count', dataCount)
//保存搜索设置
let setSeachSelectData = (data) => {
pages.value = 1
seachSelectData.data = {
...data
}
loading.value = true
getDataList(seachSelectData.data)
}
//初始化列表参数
let setInitial = () => {
pageList[1] = []
pageList[2] = []
pageList.height1 = 0
pageList.height2 = 0
}
//获取搜索数据
let getDataList = (data) => {
let postData = {
page: pages.value,
intermediary:1,
...data
}
api.getLists(postData).then(res => {
if (res.code === 200) {
loading.value = true
dataList.data = res.data.data
if (res.data.data.length === 0) {
loading.value = false
return
}
if (pages.value === 1) {
setInitial()
}
pageList.tab = 1
dataList.count = res.data.count
dataCount.value = res.data.count
nextTick(() => {
pageList['1'].push(dataList.data[0])
pageList['2'].push(dataList.data[1])
})
} else {
// ElMessage(res.message)
}
})
}
//添加数据
let addListData = () => {
let num = null
if (pageList.tab >= 18) return
pageList.tab++
if (pageList.height1 > pageList.height2) {
num = 2
} else {
num = 1
}
pageList[num].push(dataList.data[pageList.tab])
}
//监听图片加载
let watchImgLoad = (id, listId, height) => {
pageList[`height${listId}`] += height
addListData()
}
//加载更多
let downLoadMore = () => {
tool.loadMore(() => {
if (!loading.value) return
pages.value++
getDataList(seachSelectData.data)
})
}
//listImg
onMounted(() => {
getDataList()
window.addEventListener('scroll', downLoadMore, true);
})
onBeforeUnmount(() => {
window.removeEventListener('scroll', downLoadMore, true);
})
</script>
<style scoped>
img {
@ -57,5 +167,16 @@ img {
.mg-t-35 {
margin-top: 35px;
}
.no-list-box {
height: 500px;
background: inherit;
background-color: rgba(255, 255, 255, 1);
border: none;
border-radius: 16px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
}
</style>

138
src/views/housingView/needHousing.vue
View File

@ -1,25 +1,140 @@
<template>
<div>
<pageTopBar></pageTopBar>
<seachModule></seachModule>
<seachModule :count="dataList.count" :getDataList="setSeachSelectData"></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 class="dis-f jus-bet" v-show="dataList.data && dataList.data.length > 0">
<div ref="list">
<biserialItem v-for="(item, i) in pageList['1']" :key="i" :item="item" :imgLoad="watchImgLoad"
listId="1"></biserialItem>
</div>
<div></div>
<div>
<biserialItem v-for="(item, i) in pageList['2']" :key="i" :item="item" :imgLoad="watchImgLoad"
listId="2"></biserialItem>
</div>
</div>
<div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
<noList></noList>
</div>
</div>
</div>
<listBtmPrompt></listBtmPrompt>
</div>
</template>
<script setup>
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick } from 'vue'
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";
import noList from "../../components/public/empty-duck.vue";
import api from "../../utils/api";
import tool from '../../toolJs/downLoadMore'
//获取数据
let pages = ref(1)
let dataList = reactive({ data: [], count: 0 })
let dataCount = ref(0)
let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })
let seachSelectData = reactive({ data: {} })
let loading = ref(false)
provide('count', dataCount)
//保存搜索设置
let setSeachSelectData = (data) => {
pages.value = 1
// if(data.location.length>0){
// data.location=JSON.stringify(data.location)
// }
seachSelectData.data = {
...data
}
loading.value = true
// console.log('seachSelectData',seachSelectData.data)
// return
getDataList(seachSelectData.data)
}
//初始化列表参数
let setInitial = () => {
pageList[1] = []
pageList[2] = []
pageList.height1 = 0
pageList.height2 = 0
}
//获取搜索数据
let getDataList = (data) => {
let postData = {
page: pages.value,
intermediary:0,
...data
}
api.getLists(postData).then(res => {
if (res.code === 200) {
loading.value = true
dataList.data = res.data.data
if (res.data.data.length === 0) {
loading.value = false
return
}
if (pages.value === 1) {
setInitial()
}
pageList.tab = 1
dataList.count = res.data.count
dataCount.value = res.data.count
nextTick(() => {
pageList['1'].push(dataList.data[0])
pageList['2'].push(dataList.data[1])
})
} else {
// ElMessage(res.message)
}
})
}
//添加数据
let addListData = () => {
let num = null
if (pageList.tab >= 18) return
pageList.tab++
if (pageList.height1 > pageList.height2) {
num = 2
} else {
num = 1
}
pageList[num].push(dataList.data[pageList.tab])
}
//监听图片加载
let watchImgLoad = (id, listId, height) => {
pageList[`height${listId}`] += height
addListData()
}
//加载更多
let downLoadMore = () => {
tool.loadMore(() => {
if (!loading.value) return
pages.value++
getDataList(seachSelectData.data)
})
}
//listImg
onMounted(() => {
getDataList()
window.addEventListener('scroll', downLoadMore, true);
})
onBeforeUnmount(() => {
window.removeEventListener('scroll', downLoadMore, true);
})
</script>
<style scoped>
img {
@ -58,5 +173,16 @@ img {
.mg-t-35 {
margin-top: 35px;
}
.no-list-box {
height: 500px;
background: inherit;
background-color: rgba(255, 255, 255, 1);
border: none;
border-radius: 16px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
}
</style>

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

@ -1,17 +1,22 @@
<template>
<div>
<pageTopBar></pageTopBar>
<seachModule :count="dataList.count" :getDataList="getDataList"></seachModule>
<seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
<div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35">
<div class="dis-f jus-bet">
<div class="dis-f jus-bet" v-show="dataList.data && dataList.data.length > 0">
<div ref="list">
<biserialItem v-for="(item,i) in pageList[1]" :key="i" :item="item" :imgLoad="watchImgLoad" listId="1"></biserialItem>
<biserialItem v-for="(item, i) in pageList['1']" :key="i" :item="item" :imgLoad="watchImgLoad"
listId="1"></biserialItem>
</div>
<div>
<biserialItem v-for="(item,i) in pageList[2]" :key="i" :item="item" :imgLoad="watchImgLoad" listId="2"></biserialItem>
<biserialItem v-for="(item, i) in pageList['2']" :key="i" :item="item" :imgLoad="watchImgLoad"
listId="2"></biserialItem>
</div>
</div>
<div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
<noList></noList>
</div>
</div>
</div>
<listBtmPrompt></listBtmPrompt>
@ -19,65 +24,109 @@
</template>
<script setup>
import {reactive,onMounted,ref,provide} from 'vue'
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick } from 'vue'
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";
import noList from "../../components/public/empty-duck.vue";
import api from "../../utils/api";
import tool from '../../toolJs/downLoadMore'
//获取数据
let pages=ref(1)
let dataList= reactive({data:[],count:0})
let dataCount=ref(0)
let pageList=reactive({1:[],2:[],height1:0,height2:0,tab:2})
let pages = ref(1)
let dataList = reactive({ data: [], count: 0 })
let dataCount = ref(0)
let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })
let seachSelectData = reactive({ data: {} })
let loading = ref(false)
provide('count', dataCount)
let getDataList=(data)=>{
let postData={
page:pages.value,
//保存搜索设置
let setSeachSelectData = (data) => {
pages.value = 1
seachSelectData.data = {
...data
}
api.getLists(postData).then(res=>{
console.log(res.data)
if(res.code===200){
dataList.count=res.data.count
dataCount.value=res.data.count
dataList.data=res.data
// console.log(dataList.data)
pageList[1].push(dataList.data.data[0])
pageList[2].push(dataList.data.data[1])
}else{
ElMessage(res.message)
loading.value = true
getDataList(seachSelectData.data)
}
//初始化列表参数
let setInitial = () => {
pageList[1] = []
pageList[2] = []
pageList.height1 = 0
pageList.height2 = 0
}
//获取搜索数据
let getDataList = (data) => {
let postData = {
page: pages.value,
intermediary:0,
...data
}
api.getLists(postData).then(res => {
if (res.code === 200) {
loading.value = true
dataList.data = res.data.data
if (res.data.data.length === 0) {
loading.value = false
return
}
if (pages.value === 1) {
setInitial()
}
pageList.tab = 1
dataList.count = res.data.count
dataCount.value = res.data.count
nextTick(() => {
pageList['1'].push(dataList.data[0])
pageList['2'].push(dataList.data[1])
})
} else {
// ElMessage(res.message)
}
})
}
//添加数据
let addListData=()=>{
let num=null
if(pageList.tab>=19)return
++pageList.tab
// console.log(pageList.height1,pageList.height2)
if(pageList.height1>pageList.height2){
num=2
}else{
num=1
let addListData = () => {
let num = null
if (pageList.tab >= 18) return
pageList.tab++
if (pageList.height1 > pageList.height2) {
num = 2
} else {
num = 1
}
pageList[num].push(dataList.data.data[pageList.tab])
pageList[num].push(dataList.data[pageList.tab])
}
//监听图片加载
let watchImgLoad=(id,listId,height)=>{
// console.log(listId,height)
pageList[`height${listId}`]+=height
// console.log(pageList)
let watchImgLoad = (id, listId, height) => {
pageList[`height${listId}`] += height
addListData()
}
//加载更多
let downLoadMore = () => {
tool.loadMore(() => {
if (!loading.value) return
pages.value++
getDataList(seachSelectData.data)
})
}
//listImg
onMounted(()=>{
onMounted(() => {
getDataList()
window.addEventListener('scroll', downLoadMore, true);
})
onBeforeUnmount(() => {
window.removeEventListener('scroll', downLoadMore, true);
})
</script>
@ -118,5 +167,16 @@ img {
.mg-t-35 {
margin-top: 35px;
}
.no-list-box {
height: 500px;
background: inherit;
background-color: rgba(255, 255, 255, 1);
border: none;
border-radius: 16px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
}
</style>