XiaoMo/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
Download Patch File Download Diff File Expand all files Collapse all files

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;