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-19 18:23:56 +08:00
parent ea4b66db95
commit 9900a77f14
9 changed files with 675 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

581
src/components/seachPage/input.vue
View File

@@ -3,9 +3,9 @@
<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">
<el-input v-model="seachVal" class="input-s" placeholder="Pick a date" @keyup.enter='seachList'>
<template #suffix>
<img src="../../assets/homeImage/seachIcon.svg" class="icon" alt="">
<img src="../../assets/homeImage/seachIcon.svg" class="icon" alt="" @click="seachList">
</template>
</el-input>
<div class="map-box dis-f jus-x al-item">
@@ -25,23 +25,295 @@
</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">
<div class="top-btn dis-f jus-x al-item first" @click="selectPage('person')"
:class="{ 'select-top-btn-bg': tabType === 'person' }">
<div class="top-btn" :class="[tabType === 'person' ? 'select-top-btn' : 'first-no-select']"
v-show="tabType === 'person'">
个人房源 521
</div>
个人房源 521
<div class="second-select" v-show="tabType === 'intermediary'">
<div class="box">
</div>
</div>
</div>
<div class="top-btn dis-f jus-x al-item">
<div class="top-btn dis-f jus-x al-item second" @click="selectPage('intermediary')"
:class="{ 'select-top-btn-bg': tabType === 'intermediary' }">
<div class="first-select" v-show="tabType === 'person'">
<div class="box">
</div>
</div>
<div class="third-select" v-show="tabType === 'apartment'">
<div class="box">
</div>
</div>
<div class="top-btn" :class="[tabType === 'intermediary' ? 'select-top-btn' : 'first-no-select']"
v-show="tabType === 'intermediary'">
中介房源 82
</div>
中介房源 82
</div>
<div class="top-btn dis-f jus-x al-item">
<div class="top-btn dis-f jus-x al-item third" @click="selectPage('apartment')"
:class="{ 'select-top-btn-bg': tabType === 'apartment' }">
<div class="second-select-third-box" v-show="tabType === 'intermediary'">
<div class="box">
</div>
</div>
<div class="top-btn" :class="[tabType === 'apartment' ? 'select-top-btn' : 'first-no-select']"
v-show="tabType === 'apartment'">
品牌公寓 6
</div>
学生公寓 6
</div>
</div>
<div v-show="tabType === 'apartment'" :class="{ 'show-box-pd': !showSelectModule }">
<apartmentSelect @handleTransfer="setSeachConditions" :seachPage="false" ref="apartmentSelectInfo"></apartmentSelect>
</div>
<div class="seach-select-info" v-show="tabType !== 'apartment'">
<div class="select-box" :class="{ 'seach-select-h': showSelectModule }"
:style="{ 'overflow': showSelectModule ? 'visible' : 'hidden' }">
<selectTabBox :setSeachCondition="setSeachConditions" ref="selectTabBoxInfo"></selectTabBox>
</div>
<div :class="{ 'show-box-pd': !showSelectModule }">
<div class="box" :class="{ 'show-box': showSelectModule }">
<div class="dis-f jus-x al-item" :style="{ 'height': !showSelectModule ? '60px' : '40px' }"
@click="showSelectModule = !showSelectModule">
<div class="dis-f al-item">
<span v-show="showSelectModule">收起筛选条件</span>
<span class="text-tps" v-show="!showSelectModule">筛选</span> <span
v-show="!showSelectModule">&nbsp:&nbsp</span>
<div v-show="!showSelectModule">
<span v-for="(item, i) in typeText" :key="item">
{{ item }}c
<span v-show="i !== typeText.length - 1" class="text-icon">&nbsp|&nbsp </span>
</span>
</div>
<img src="../../assets/homeImage/listMore.svg" class="icon-img"
:class="{ 'down-icon': showSelectModule }" alt="">
</div>
</div>
</div>
</div>
</div>
<div>
<div class="btm-list" :class="{ 'apartment-btm': tabType === 'apartment' }">
<div class="dis-f al-item">
共<span class="count">{{ count || 0 }}</span>条
{{ tabType === 'person' ?
'个人房源' : tabType === 'intermediary' ?
'中介房源' : tabType === 'apartment' ?
'品牌公寓' : '' }} <span v-show="selectTabCheck.title && selectTabCheck.id">
&nbsp
|
&nbsp</span>
<div class="dis-f al-item">
<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="">
</div>
</div>
</div>
<span class="dis-f al-item sort-text">
<el-dropdown trigger="click">
<span class="dis-f al-item sort-text">
{{ listSort.check }}<img class="img" src="../../assets/homeImage/sortIcon.png" alt="">
</span>
<template #dropdown>
<el-dropdown-menu class="pd-10 el-dropdown-menu">
<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>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { reactive, ref, shallowReactive, defineProps, watchEffect } from 'vue'
import selectTabBox from "../selectTabBox/selectTabBox.vue";
import apartmentSelect from '../apartment/seachModule.vue'
import store from '../../store/index';
import api from '@/utils/api';
const props = defineProps({
getDataList: {
type: Function
},
count: {
type: Number
}
})
//选项卡
let tabType = ref('person')
let selectTabBoxInfo = ref(null)//个人/中介筛选实例
let apartmentSelectInfo=ref(null)//公寓筛选实例
//设置请求数据
let selectPage = (type) => {
if(type==='apartment'){
selectTabBoxInfo.value.cleanSelect()//清空筛选数据
}else{
apartmentSelectInfo.value.cleanSelect()
}
//清空数据
if(type==='apartment')
seachAllType = reactive({
keyword: '',
location: [],
searchid: '',
intermediary: 0
})
tabType.value = type
seachAllType['tabType'] = type
if (type === 'person') {
seachAllType['intermediary'] = 0
} else if (type === 'intermediary') {
seachAllType['intermediary'] = 1
} else {
seachAllType['intermediary'] = ''
}
getDataList(seachAllType, tabType.value)
}
let getDataList = props.getDataList
//搜索内容
let seachVal = ref('')
//搜索key
let seachKey = reactive({ key: {} })
//搜索数据
let seachAllType = reactive({
keyword: '',
location: [],
searchid: '',
intermediary: 0
})
//设置搜索数据
let setSeachConditions = (type, data) => {
if (seachAllType['tabType'] !== 'apartment') {
if (type === 'rent') {
seachAllType['rent_min'] = data.min
seachAllType['rent_max'] = data.max
} else if (type !== '') {
seachAllType[type] = data
} else if (type === '') {
data.indexOf('isverified') !== -1 ? seachAllType['isverified'] = 1 : seachAllType['isverified'] = 0
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 = ''
}
} else {
seachAllType = {
...data
}
}
// console.log('seachAllType', seachAllType)
// return
getDataList(seachAllType, tabType.value)
}
//设置当前搜索key
let setPageKey = () => {
return tabType.value === 'person' ? seachKey.key.personal.searchid : tabType.value === 'intermediary' ? seachKey.key.intermediary.searchid : seachKey.key.studentapartment.searchid
}
//搜索初始化
let searchInit = (data) => {
api.search({ keyword: data }).then(res => {
if (res.code === 200) {
seachKey.key = res.data
seachAllType.searchid = setPageKey()
// console.log(seachAllType)
getDataList(seachAllType, tabType.value)
} else {
}
})
}
//搜索数据
let seachList = (item) => {
console.log(seachVal.value)
if (!seachVal.value) {
return
}
searchInit(seachVal.value)
}
//筛选词条
let typeText = ['地理位置', '出租方式', '租金', '租期', '性别要求', '发布时间', '其他']
//显示筛选组件
let showSelectModule = ref(false)
//选中地区
let selectData = reactive({ data: [] })
let selectTabCheck = reactive({
id: '',
title: '',
data: []
})
//最新发布选项
let listSort = shallowReactive({
type: [
{ title: '最新发布', type: 'timestamp' },
{ title: '热门', type: 'hotnum' },
{ title: '价格从低到高', type: 'rentasc' },
{ title: '价格从高到低', type: 'rentdesc' }
],
checkType: 'timestamp',
check: '最新发布'
})
//搜索列表排序
let listSortCheck = (item) => {
listSort.checkType = item.type
listSort.check = item.title
setSeachConditions('orderby', item.type)
}
let seachArea = {};//区域找房
//获取区域下列数据
let getLocationData = (data) => {
for (let item in data) {
if (!seachArea.data[item.substring(0, 1) - 1].data) seachArea.data[item.substring(0, 1) - 1].data = []
if (item.length > 1) {
seachArea.data[item.substring(0, 1) - 1].data.push({
title: data[item],
id: item
})
}
}
}
watchEffect(() => {
seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
if (seachArea.data.length > 0 && !seachArea.data[0].data) getLocationData(store.state.indexData.config.location)
})
</script>
<style scoped>
@@ -82,6 +354,20 @@ img {
margin-top: 35px;
}
.seach-select-h {
max-height: 500px !important;
}
.select-box {
max-height: 0;
transition: max-height 0.4s ease-in-out;
}
.show-box-pd {
padding: 0 20px;
transition: all 0.1s linear;
}
.seach-info-box {
background: #fff;
border-radius: 16px;
@@ -89,6 +375,54 @@ img {
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
.seach-select-info {
padding: 25px 0px;
.show-box {
width: 100% !important;
height: 40px !important;
min-height: 40px !important;
border-radius: 0 !important;
border-bottom: 1px solid #ebebeb !important;
}
.box {
width: 1160px;
min-height: 60px;
background: inherit;
background-color: rgba(246, 246, 246, 1);
border: none;
border-radius: 10px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
color: #555555;
font-size: 15px;
.icon-img {
width: 6px;
transform: rotate(90deg);
margin-left: 20px;
}
.down-icon {
transform: rotate(270deg);
transition: all 0.3s ease-in-out;
}
.text-tps {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
color: #000000;
}
.text-icon {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
color: #D7D7D7;
}
}
}
.top-box {
height: 45px;
width: 100%;
@@ -101,30 +435,196 @@ img {
font-size: 17px;
color: #FFFFFF;
.select-top-btn{
.select-top-bos-show {
-moz-box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
-webkit-box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
}
.first{
bottom:0;
left:0;
.select-top-btn-bg {
background: #fff !important;
height: 50px !important;
width: 200px;
border-radius: 16px 16px 0 0;
-moz-box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
-webkit-box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
}
.second{
left:180px;
bottom:0;
.select-top-btn {
height: 45px;
width: 180px !important;
line-height: 50px;
background: #fff !important;
border-radius: 16px 16px 0 0;
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 17px;
color: #000000;
text-align: center;
bottom: 0;
z-index: 66;
}
.third{
left:360px;
bottom:0;
.bg-f {
background: #fff !important;
}
.first {
bottom: 0;
left: 0;
background: #62b1ff;
.second-select {
position: absolute;
background: #fff;
top: 0;
right: -4px;
height: 45px;
width: 30px;
z-index: 88;
.box {
border-radius: 0 0 16px 0;
background: #62b1ff;
height: 45px;
width: 30px;
}
}
}
.first-no-select {
border-radius: 0px 0px 16px 0 !important;
width: 180px;
left: 14px;
z-index: 88;
}
.second {
left: 200px;
bottom: 0;
background: #62b1ff;
.first-select {
position: absolute;
background: #fff;
top: 0;
left: -4px;
height: 45px;
width: 30px;
.box {
border-radius: 0 0 0 16px;
background: #62b1ff;
height: 45px;
width: 30px;
}
}
.third-select {
position: absolute;
background: #fff;
top: 0;
right: -4px;
height: 45px;
width: 30px;
z-index: 88;
.box {
border-radius: 0 0 16px 0;
background: #62b1ff;
height: 45px;
width: 30px;
}
}
}
.third {
left: 400px;
bottom: 0;
background: #62b1ff;
.second-select-third-box {
position: absolute;
background: #fff;
top: 0;
left: -4px;
height: 45px;
width: 30px;
z-index: 88;
.box {
border-radius: 0 0 0 16px;
background: #62b1ff;
height: 45px;
width: 30px;
}
}
}
.top-btn {
width: 180px;
width: 200px;
height: 45px;
position: absolute;
border-radius: 16px 16px 0 0;
}
}
}
.apartment-btm {
padding: 25px 20px !important;
}
.btm-list {
padding: 0 20px 25px 20px;
display: flex;
justify-content: space-between;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
color: #555555;
font-size: 15px;
.btm-btn {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #333333;
margin-left: 10px;
.img {
width: 8px;
height: 8px;
margin-left: 8px;
}
}
.count {
font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
font-weight: 700;
color: #000000;
margin: 0 5px;
}
.sort-text {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 14px;
color: #000000;
text-align: center;
cursor: pointer;
}
.img {
width: 20px;
height: 20px;
margin-left: 10px;
}
}
.input-box {
height: 92px;
background: inherit;
@@ -209,6 +709,43 @@ img {
}
}
.dropdown-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #7F7F7F;
text-align: center;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
.type-icon {
width: 6px;
height: 14px;
background: inherit;
background-color: rgba(80, 227, 194, 1);
border: none;
border-radius: 3px;
}
}
.el-dropdown-menu {
width: 150px;
background: inherit;
background-color: rgba(255, 255, 255, 1);
}
.dropdown-check-text {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 14px;
color: #000000;
}
::v-deep .el-input__wrapper {
color: #333333 !important;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
@@ -219,5 +756,11 @@ img {
border-radius: 8px;
box-shadow: 0px 0px 0px !important;
background-color: rgba(246, 246, 246, 1);
}</style>
}
::v-deep .el-dropdown-menu__item {
--el-dropdown-menuItem-hover-color: #7F7F7F;
--el-dropdown-menuItem-hover-fill: rgba(246, 246, 246, 1);
}
</style>