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

首页监听

Browse Source
This commit is contained in:
luJianJun
2023-08-09 10:52:58 +08:00
parent 98d987c385
commit 317e5f03a2
2 changed files with 70 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,13 @@
<template>
<div class="dis-f s-w-100" :style="[routePath === '/seachPage' ? '' : 'border-bottom:1px solid #ebebeb;']">
<div class="select-box s-w-50">
<div class="dis-f" :class="{ 'al-item housing-pd': routePath === '/needHousing'||routeQuery.data && routeQuery.data.houseingPageType === '6' }">
<div class="tab-title">{{ routePath === '/needHousing'||routeQuery.data && routeQuery.data.houseingPageType === '6' ? '目标区域' : '地理位置' }}</div>
<div class="dis-f"
:class="{ 'al-item housing-pd': routePath === '/needHousing' || routeQuery.data && routeQuery.data.houseingPageType === '6' }">
<div class="tab-title">{{ routePath === '/needHousing' || routeQuery.data && routeQuery.data.houseingPageType
=== '6' ? '目标区域' : '地理位置' }}</div>
<!-- 中介/个人房源页面 -->
<div class="tab-text" v-if="routePath !== '/needHousing'&&(routeQuery.data && routeQuery.data.houseingPageType !== '6')">
<div class="tab-text"
v-if="routePath !== '/needHousing' && (routeQuery.data && routeQuery.data.houseingPageType !== '6')">
<div class="dis-f">
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'region' }"
@click="setSelectPosition('region')">按区域</div>
@@ -20,19 +23,20 @@
<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="{ 'check-data': selectData.data && selectData.data.length > 0 && selectData.data.length !== selectTabCheck.data.length&&selectData.data[0].id }">
:class="{ 'check-data': selectData.data && selectData.data.length > 0 && selectData.data.length !== selectTabCheck.data.length && selectData.data[0].id }">
{{
selectData.data && selectData.data.length ===
0||selectData.data&&selectData.data[0]&&!selectData.data[0].id || selectData.data.length === selectTabCheck.data.length ? '不限' :
0 || selectData.data && selectData.data[0] && !selectData.data[0].id ||
selectData.data.length === selectTabCheck.data.length ? '不限' :
selectData.data && selectData.data.length
}}
</div>
</div>
</div>
<img src="../../assets/homeImage/selectInfoTabIcon.svg"
v-show="selectTabCheck.id !== item.id&&item.id" class="img" alt="">
<img src="../../assets/homeImage/selectImg.svg" v-show="selectTabCheck.id === item.id&&item.id"
class="img" alt="">
v-show="selectTabCheck.id !== item.id && item.id" class="img" alt="">
<img src="../../assets/homeImage/selectImg.svg"
v-show="selectTabCheck.id === item.id && item.id" class="img" alt="">
</div>
<div class="hid-box">
<checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
@@ -45,18 +49,21 @@
<div class="lef-btn" @click="prevSchoolData">
<img :src="schoolPages === 0 ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
class="img" alt="">
<div class="line" style="position: absolute;right:0;top:0;"></div>
</div>
<div class="right-btn" @click="nextSchoolData">
<div class="line" style="position: absolute;left:0;top:0;"></div>
<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"
indicator-position="none" class="s-w-100" ref="schoolData" :initial-index="schoolSelectObj.page">
indicator-position="none" class="s-w-100" ref="schoolData"
:initial-index="schoolSelectObj.page">
<el-carousel-item v-for="(item, i) in shcoolData" :key="i">
<div class="school-carousel-box" :class="{ 'jus-sp': item.length === 8 }">
<div v-for="(items, i) in item" :key="items" @click="setSchoolObj(items)"
class="carousel-info-box"
:class="[{ 'info-box-check': schoolSelectObj.id === items.id }, { 'mg-l-20': i!=0&&(i + 1) % 8 !== 0 && item.length < 8 },{'mg-l-10':i==0&& item.length < 8}]">
:class="[{ 'info-box-check': schoolSelectObj.id === items.id }, { 'mg-l-20': i != 0 && (i + 1) % 8 !== 0 && item.length < 8 }, { 'mg-l-10': i == 0 && item.length < 8 }]">
{{ items.name }}
</div>
</div>
@@ -66,7 +73,8 @@
</div>
</div>
<!-- 求房源 -->
<div class="need-housing-box dis-f al-item" v-if="routePath === '/needHousing'||routeQuery.data && routeQuery.data.houseingPageType === '6'">
<div class="need-housing-box dis-f al-item"
v-if="routePath === '/needHousing' || routeQuery.data && routeQuery.data.houseingPageType === '6'">
<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;">
@@ -75,10 +83,12 @@
@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[0]&&selectData.data[0].id }">
<div
:class="{ 'select-num': selectData.data && selectData.data.length && selectData.data && selectData.data[0] && selectData.data[0].id }">
{{
selectData.data && selectData.data.length ===
0||selectData.data&&selectData.data[0]&&!selectData.data[0].id || selectData.data.length === selectTabCheck.data.length ? '不限' :
0 || selectData.data && selectData.data[0] && !selectData.data[0].id ||
selectData.data.length === selectTabCheck.data.length ? '不限' :
selectData.data && selectData.data.length
}}
</div>
@@ -99,8 +109,10 @@
</div>
</div>
<div class="bor-b-das"></div>
<div class="dis-f pad-t-b-15" :class="{ 'housing-pd pd-t-25': routePath === '/needHousing'||routeQuery.data && routeQuery.data.houseingPageType === '6' }">
<div class="tab-title">{{ routePath === '/needHousing'||routeQuery.data && routeQuery.data.houseingPageType === '6' ? '求租方式' : '出租方式' }}</div>
<div class="dis-f pad-t-b-15"
:class="{ 'housing-pd pd-t-25': routePath === '/needHousing' || routeQuery.data && routeQuery.data.houseingPageType === '6' }">
<div class="tab-title">{{ routePath === '/needHousing' || routeQuery.data && routeQuery.data.houseingPageType
=== '6' ? '求租方式' : '出租方式' }}</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 !== '不限'">
@@ -134,7 +146,8 @@
</div>
<div class="bor-b-das"></div>
<div class="dis-f al-item" style="padding:30px 0;">
<div class="tab-title">{{ routePath === '/needHousing'||routeQuery.data && routeQuery.data.houseingPageType === '6' ? '租金预算' : '租金' }}</div>
<div class="tab-title">{{ routePath === '/needHousing' || routeQuery.data && routeQuery.data.houseingPageType
=== '6' ? '租金预算' : '租金' }}</div>
<div class="dis-f al-item rent-box jus-bet">
<div class="dis-f al-item">
<input type="number" class="input" v-model="rentObj.min" @blur="setRent">
@@ -166,7 +179,8 @@
</div>
<div class="bor-b-das"></div>
<div class="dis-f pd-t-20">
<div class="tab-title">{{ routePath === '/needHousing'||routeQuery.data && routeQuery.data.houseingPageType === '6' ? '求租者性别' : '性别' }}</div>
<div class="tab-title">{{ routePath === '/needHousing' || routeQuery.data && routeQuery.data.houseingPageType
=== '6' ? '求租者性别' : '性别' }}</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"
@@ -208,7 +222,8 @@
共<span class="count">{{ count || 0 }}</span>条{{ routePath === '/personHousing' ?
'个人房源' : routePath === '/intermediaryHousing' ?
'中介房源' : routePath === '/needHousing' ?
'求房源' : '' }} <span v-show="selectTabCheck.title && selectTabCheck.id" style="color: #aaaaaa;margin:0 15px;">|</span>
'求房源' : '' }} <span v-show="selectTabCheck.title && selectTabCheck.id"
style="color: #aaaaaa;margin:0 15px;">|</span>
<div class="dis-f al-item">
<div v-show="selectTabCheck.id && selectTabCheck.title" class="bold-text">{{ selectTabCheck.title }}:</div>
<div class="dis-f" style="flex-wrap: wrap;width:800px;">
@@ -228,8 +243,8 @@
<template #dropdown>
<el-dropdown-menu class="pd-10 el-dropdown-menu">
<el-dropdown-item v-for="(items, j) in listSort.type" :key="j" :command="j">
<div class="dropdown-text" :class="{ 'dropdown-check-text': listSort.checkType === items.type }"
>{{
<div class="dropdown-text"
:class="{ 'dropdown-check-text': listSort.checkType === items.type }">{{
items.title
}}
<div class="type-icon" v-show="listSort.checkType === items.type"></div>
@@ -243,7 +258,7 @@
</template>
<script setup>
import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive, defineExpose, nextTick,watch } from 'vue';
import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive, defineExpose, nextTick, watch } from 'vue';
import { useRouter } from 'vue-router';
import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
import store from '../../store/index';
@@ -265,8 +280,8 @@ const props = defineProps({
setSeachCondition: {
type: Function
},
setLocation:{
type:Function
setLocation: {
type: Function
}
})
@@ -311,7 +326,7 @@ let setRegionList = () => {
name: '不限',
id: ''
})
routerQuerySet()
}
@@ -328,21 +343,21 @@ let selectPosition = ref('region')
let showSelect = ref(false)
//学校区域状态
let schoolSelectObj = reactive({ id: '', title: '不限',page:'' })
let schoolSelectObj = reactive({ id: '', title: '不限', page: '' })
let schoolPages = ref(0) //页数
let shcoolData = shallowReactive([])
let setSchoolData = () => {
let arr = routePath.value === '/' ? store.state.seachTypeData[0] && store.state.seachTypeData[0].where : store.state.schoolList
if(arr[0]&&arr[0].id)arr.unshift({ name: '不限', id: '' })
if (arr[0] && arr[0].id) arr.unshift({ name: '不限', id: '' })
let num = 0
for (let i = 0; i < arr.length; i++) {
if (!shcoolData[num]) {
shcoolData[num] = []
}
if (shcoolData[num].length < 8) shcoolData[num].push(arr[i])
if(arr[i].id===schoolSelectObj.id){
schoolSelectObj['page']=num
schoolPages.value=num
if (arr[i].id === schoolSelectObj.id) {
schoolSelectObj['page'] = num
schoolPages.value = num
}
if (shcoolData[num].length === 8) {
num++
@@ -394,12 +409,12 @@ let setSelectData = (id, data = [], title) => {
selectTabCheck.id = id;
selectTabCheck.title = title
selectTabCheck.data = data;
if(id)selectData.data = [{ title: '不限', id: '' }]
if (id) selectData.data = [{ title: '不限', id: '' }]
schoolSelectObj.id = ''
schoolSelectObj.title = ''
setLocation('location',[selectTabCheck.id + ''])
setLocation('location', [selectTabCheck.id + ''])
if (id === '') {
selectData.data=[]
selectData.data = []
setSeachCondition('location', [])
}
}
@@ -437,7 +452,7 @@ let selectSeach = (data = []) => {
}
schoolSelectObj.id = ''
schoolSelectObj.title = ''
setSeachCondition('location', data)
}
@@ -463,7 +478,7 @@ let deleteSelect = (i, id) => {
//搜索列表排序
let listSortCheck = (item) => {
let obj= listSort.type[item]
let obj = listSort.type[item]
listSort.checkType = obj.type
listSort.check = obj.title
setSeachCondition('orderby', obj.type)
@@ -599,7 +614,7 @@ let getAddressListId = (id, type) => {
//查找出租类型
let getHireType = (data, id) => {
let obj = null
data.map(res => {
if (res.id == id) obj = res
@@ -677,7 +692,7 @@ let routerQuerySet = () => {
selectTabCheck.title = deconstructionSeachData.areaItem.name;
selectTabCheck.data = deconstructionSeachData.areaItem.data;
selectData.data = seachAreaId(deconstructionSeachData.selectData)
if(selectData.data.length===0)selectData.data = [{ title: '不限', id: '' }]
if (selectData.data.length === 0) selectData.data = [{ title: '不限', id: '' }]
if (deconstructionSeachData.cotenancy) {
let type = deconstructionSeachData.cotenancyData.id.toString().substring(0, 1)
@@ -803,7 +818,7 @@ img {
justify-content: space-between;
width: 100%;
height: 100%;
padding:5px 10px;
padding: 5px 10px;
.type-icon {
width: 6px;
@@ -862,8 +877,8 @@ img {
display: flex;
align-items: center;
.mg-l-10{
margin-left:10px;
.mg-l-10 {
margin-left: 10px;
}
.mg-l-20 {
@@ -895,7 +910,7 @@ img {
display: flex;
justify-content: center;
align-items: center;
border-right: 1px dashed #ebebeb;
border-right: 1px dashed transparent;
border-left: 1px solid #ebebeb;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
@@ -914,8 +929,16 @@ img {
}
}
.line {
height: 100%;
width: 1px;
background-image: linear-gradient(to top, #d7d7d7 0%, #d7d7d7 50%, transparent 0%);
background-size: 1px 2px;
background-repeat: repeat-y;
}
.right-btn {
border-left: 1px dashed #ebebeb;
border-left: 1px dashed transparent;
border-right: 1px solid #ebebeb;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
@@ -1175,7 +1198,7 @@ img {
margin-right: 5px;
border-radius: 50%;
position: relative;
margin-top:1px;
margin-top: 1px;
}
}
@@ -1263,14 +1286,14 @@ img {
}
}
/deep/ .el-checkbox:hover{
color:#000;
/deep/ .el-checkbox:hover {
color: #000;
}
/deep/ .el-dropdown-menu__item {
--el-dropdown-menuItem-hover-color: #7F7F7F;
--el-dropdown-menuItem-hover-fill: rgba(246, 246, 246, 1);
padding:0;
padding: 0;
}
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
@@ -1284,6 +1307,5 @@ img {
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
background: #50e3c2;
border-color: #50e3c2;
}
</style>
}</style>

1
src/views/HomeView.vue
View File

@@ -295,6 +295,7 @@ const onPageSrcoll = (e) => {
let clientHeight = body.clientHeight
let offsetHeight = body.offsetHeight
if (scrollTop + clientHeight === offsetHeight) {
console.log(scrollTop + clientHeight,offsetHeight)
if (loadMore.value) {
loadMore.value = false
pages.value += 1