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 18:48:09 +08:00
parent d1d1bf3e18
commit 1cc8d070b5
12 changed files with 509 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/homeImage/Mycollect.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

11
src/assets/homeImage/seachIcon.svg Normal file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter978">
<feColorMatrix type="matrix" values="4 0 0 0 -2.5 0 4 0 0 -2.5 0 0 4 0 -2.5 0 0 0 1 0 " in="SourceGraphic" />
</filter>
</defs>
<g transform="matrix(1 0 0 1 -890 -260 )">
<image preserveAspectRatio="none" style="overflow:visible" width="20" height="20" xlink:href="data:image/png;base64,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" x="890px" y="260px" filter="url(#filter978)" />
</g>
</svg>

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

@ -39,7 +39,7 @@
</el-carousel>
</div>
</div>
<div class="btm-seach-btn-box dis-f al-item jus-x">
<div class="btm-seach-btn-box dis-f al-item jus-x" v-if="routePath !== '/seachPage'">
<div class="body-maxWidth dis-f" style="height:48px;">
<div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': item.path === tabBtnType }"
v-for="(item, i) in seachTab.data" :key="i" @click="changeTabBtnType(item)">

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

@ -176,6 +176,13 @@ let setSeachConditions = (type, data) => {
data.indexOf('iselevator')!==-1?seachAllType['iselevator']=1:seachAllType['iselevator']=0
data.indexOf('issunshinearea')!==-1?seachAllType['issunshinearea']=1:seachAllType['issunshinearea']=0
}
if(type==='school'){
seachAllType.location=[]
}
if(type==='location'){
seachAllType.school=''
}
console.log('seachAllType',seachAllType)
getDataList(seachAllType)
}

223
src/components/seachPage/input.vue Normal file
View File

@ -0,0 +1,223 @@
<template>
<div class="dis-f jus-x">
<div class="body-maxWidth ">
<div class="input-box dis-f al-item jus-bet body-maxWidth">
<div class="dis-f al-item">
<el-input v-model="seachVal" class="input-s" placeholder="Pick a date">
<template #suffix>
<img src="../../assets/homeImage/seachIcon.svg" class="icon" alt="">
</template>
</el-input>
<div class="map-box dis-f jus-x al-item">
<img src="../../assets/homeImage/mapImg.png" class="img" alt="">
</div>
</div>
<div class="dis-f al-item">
<div class="tool-btn dis-f al-item jus-x">
<img src="../../assets/homeImage/Mycollect.png" class="img" alt="">
我的收藏
</div>
<div class="tool-btn dis-f al-item jus-x mg-l-10">
<img src="../../assets/homeImage/informationO.png" class="img" alt="">
我的发布
</div>
</div>
</div>
<div class="seach-info-box body-maxWidth">
<div class="top-box dis-f al-item">
<div class="top-btn dis-f jus-x al-item">
个人房源 521
</div>
<div class="top-btn dis-f jus-x al-item">
中介房源 82
</div>
<div class="top-btn dis-f jus-x al-item">
学生公寓 6
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
let seachVal = ref('')
</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;
}
.seach-info-box {
background: #fff;
border-radius: 16px;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
.top-box {
height: 45px;
width: 100%;
background: #62b1ff;
position: relative;
border-radius: 16px 16px 0 0;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 17px;
color: #FFFFFF;
.select-top-btn{
}
.first{
bottom:0;
left:0;
}
.second{
left:180px;
bottom:0;
}
.third{
left:360px;
bottom:0;
}
.top-btn {
width: 180px;
height: 45px;
}
}
}
.input-box {
height: 92px;
background: inherit;
background-color: rgba(255, 255, 255, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(246, 246, 246, 1);
border-radius: 16px;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
transform: translateY(-35px);
padding: 20px;
.mg-l-10 {
margin-left: 10px;
}
.tool-btn {
width: 150px;
height: 48px;
background: inherit;
background-color: rgba(246, 246, 246, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(235, 235, 235, 1);
border-radius: 8px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
color: #000000;
.img {
width: 20px;
height: 20px;
margin-left: 10px;
}
}
.input-s {
width: 560px;
height: 48px;
background: inherit;
background-color: rgba(246, 246, 246, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(235, 235, 235, 1);
border-radius: 8px;
overflow: hidden;
.el-input__wrapper {
border-radius: 8px;
box-shadow: 0px 0px 0px !important;
}
}
.map-box {
width: 48px;
height: 48px;
background: inherit;
background-color: rgba(246, 246, 246, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(235, 235, 235, 1);
border-radius: 155px;
margin-left: 10px;
.img {
width: 24px;
height: 24px;
}
}
.icon {
width: 20px;
height: 20px;
}
}
::v-deep .el-input__wrapper {
color: #333333 !important;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px !important;
text-align: left;
border-radius: 8px;
box-shadow: 0px 0px 0px !important;
background-color: rgba(246, 246, 246, 1);
}</style>

0
src/components/seachPage/select.vue Normal file
View File

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

@ -7,9 +7,9 @@
<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>
@click="setSelectPosition('region')">按区域</div>
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'school' }"
@click="selectPosition = 'school'">按学校</div>
@click="setSelectPosition('school')">按学校</div>
</div>
<div class="select-tab-info">
<img :src="selectPosition === 'school' ? require('../../assets/homeImage/schoolRegionBg.svg') : require('../../assets/homeImage/checkBG.svg')"
@ -72,7 +72,7 @@
@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}">
<div :class="{ 'select-num': selectData.data && selectData.data.length }">
{{
selectData.data && selectData.data.length === 0 ? '不限' :
selectData.data && selectData.data.length
@ -100,8 +100,7 @@
<div v-if="item.title !== '不限'">
<el-dropdown trigger="click">
<span class="dropdown-btn jus-x dis-f al-item"
:class="{ 'btn-check': hireTypeObj.hireId === item.title }"
@click="setHireId(item.title)">
:class="{ 'btn-check': hireTypeObj.hireId === item.title }" @click="setHireId(item)">
{{ item.title }}<span v-show="hireTypeObj.hireId === item.title"> > {{
hireTypeObj.title || '不限' }}</span>
<img :src="hireTypeObj.hireId === item.title ? require('../../assets/homeImage/dropDownIcon.svg') : require('../../assets/homeImage/selectInfoTabIcon.svg')"
@ -122,7 +121,7 @@
</el-dropdown>
</div>
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': hireTypeObj.hireId === item.title }"
v-if="item.title === '不限'" @click="setHireId(item.title)">{{
v-if="item.title === '不限'" @click="setHireId(item)">{{
item.title }}</div>
</div>
</div>
@ -322,6 +321,10 @@ let setSchoolData = () => {
let setSchoolObj = (obj) => {
schoolSelectObj.id = obj.id
schoolSelectObj.title = obj.title
selectTabCheck.id = '';
selectTabCheck.title = '不限'
selectTabCheck.data = [];
selectData.data = []
setSeachCondition('school', obj.id)
}
@ -340,30 +343,44 @@ let nextSchoolData = () => {
schoolData.next()
}
//设置状态
let setSelectPosition = (type) => {
selectPosition.value = type
// if (type === 'school') {
// selectTabCheck.id = '';
// selectTabCheck.title = '不限'
// selectTabCheck.data = [];
// selectData.data = []
// } else {
// schoolSelectObj.id = ''
// schoolSelectObj.title = ''
// }
}
//点击区域/学校选项
let clearSelectTabCheck=ref(true)
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
if (id === selectTabCheck.id) {
clearSelectTabCheck.value = false
return
}
clearSelectTabCheck.value=true
}
clearSelectTabCheck.value = true
selectTabCheck.id = id;
selectTabCheck.title = title
selectTabCheck.data = data;
selectData.data = []
if(id===''){
schoolSelectObj.id = ''
schoolSelectObj.title = ''
if (id === '') {
setSeachCondition('location', [])
}
}
//取消按钮
let closeSeach = () => {
console.log(selectTabCheck,selectData)
// console.log(selectTabCheck,selectData)
showSelect.value = false
clearSelectTabCheck.value=false
clearSelectTabCheck.value = false
}
//确认按钮
let selectSeach = (data = []) => {
@ -377,6 +394,11 @@ let selectSeach = (data = []) => {
})
selectData.data = arr
showSelect.value = false
schoolSelectObj.id = ''
schoolSelectObj.title = ''
if (data.length === 0 && selectTabCheck.id) {
data.push(selectTabCheck.id)
}
setSeachCondition('location', data)
}
@ -420,12 +442,16 @@ let setHireTypeArr = (type, id) => {
let hireTypeObj = reactive({ id: '', title: '', hireId: '不限' })//出租方式所选
let setHireId = (title) => {
if (hireTypeObj.hireId != title) {
let setHireId = (item) => {
console.log(item)
if (hireTypeObj.hireId != item.title) {
hireTypeObj.id = ''
hireTypeObj.title = ''
}
hireTypeObj.hireId = title
if (item.hireType.length === 0) {
setSeachCondition('types', '')
}
hireTypeObj.hireId = item.title
}
let dropdownCommand = (obj) => {
@ -442,9 +468,9 @@ let setRent = () => {
}
//清空租金
let cleanRent=()=>{
rentObj.min=''
rentObj.max=''
let cleanRent = () => {
rentObj.min = ''
rentObj.max = ''
setSeachCondition('rent', rentObj)
}
@ -554,8 +580,9 @@ img {
.housing-pd {
padding: 5px 0 25px 0;
}
.pd-t-25{
padding-top:25px;
.pd-t-25 {
padding-top: 25px;
}
.housing-pd-25 {
@ -894,7 +921,7 @@ img {
}
.select-num {
padding:0px 10px;
padding: 0px 10px;
background: inherit;
background-color: rgba(80, 227, 194, 1);
border: none;

2
src/main.js
View File

@ -22,7 +22,7 @@ import {
ElMessage,
ElSpace,
ElSkeleton,
ElSkeletonItem,
ElSkeletonItem
// 其他需要的组件
} from 'element-plus'

25
src/router/index.js
View File

@ -46,16 +46,33 @@ const routes = [
},
{//个人房源
path: '/personHousing',
component: () => import(/* webpackChunkName: "housing" */ '@/views/housingView/person.vue')
component: () => import(/* webpackChunkName: "housing" */ '@/views/housingView/person.vue'),
meta:{
title:'个人房源'
}
},
{//中介房源
path: '/intermediaryHousing',
component: () => import(/* webpackChunkName: "housing" */ '@/views/housingView/intermediary.vue')
component: () => import(/* webpackChunkName: "housing" */ '@/views/housingView/intermediary.vue'),
meta:{
title:'中介房源'
}
},
{//求房源
path: '/needHousing',
component: () => import(/* webpackChunkName: "housing" */ '@/views/housingView/needHousing.vue')
}, {
component: () => import(/* webpackChunkName: "housing" */ '@/views/housingView/needHousing.vue'),
meta:{
title:'求房源'
}
},
{//搜索
path:'/seachPage',
component:()=> import(/* webpackChunkName: "seachPage" */ '@/views/seachIndex.vue'),
meta:{
title:'搜索'
}
},
{
path: "/apartment",
component: () => import(/* webpackChunkName: "housing" */ '@/views/housingView/apartment.vue'),
meta: {

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

@ -53,8 +53,8 @@ let setSeachSelectData = (data) => {
...data
}
loading.value = true
// console.log('seachSelectData',seachSelectData.data)
// return
console.log('seachSelectData',seachSelectData.data)
return
getDataList(seachSelectData.data)
}

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

@ -48,6 +48,7 @@ let setSeachSelectData = (data) => {
seachSelectData.data = {
...data
}
// console.log(data)
loading.value = true
getDataList(seachSelectData.data)
}

190
src/views/seachIndex.vue Normal file
View File

@ -0,0 +1,190 @@
<template>
<div>
<pageTopBar></pageTopBar>
<inputModule></inputModule>
<!-- <seachModule :getDataList="setSeachSelectData"></seachModule> -->
<div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35">
<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>
<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'
import inputModule from '../components/seachPage/input.vue'
//获取数据
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 {
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;
}
.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>