505 lines
18 KiB
Vue
505 lines
18 KiB
Vue
<template>
|
|
<div class="dis-f jus-x al-item" style="position: relative;z-index: 333;">
|
|
<div class="body-maxWidth">
|
|
<div class="s-w-100 seach-box-bg">
|
|
<div class="seach-box">
|
|
<div class="top-seach dis-f al-item">
|
|
<div style="position: absolute;left: -8px;top: 20px;">
|
|
<div class="location-box dis-f jus-x al-item">
|
|
<img src="../../assets/homeImage/addressImg.png" class="img" alt="">
|
|
香港
|
|
</div>
|
|
<div class="triangle"></div>
|
|
</div>
|
|
<div class="dis-f al-item pos-r">
|
|
<el-input v-model="seachAllType.keyword" placeholder="搜索房源或输入房源ID" @keyup.enter='seachList'
|
|
@blur="setHistoryShow" @focus="setHistoryShow"
|
|
style="height:48px;width:460px;background:rgba(246, 246, 246, 1);"></el-input>
|
|
<div class="seach-btn dis-f al-item jus-x" @click="seachList">
|
|
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
|
|
搜索
|
|
</div>
|
|
<div class="seach-hiosory-box" :class="{ 'seach-history-h': historyShow }">
|
|
<div class="seach-history-info">
|
|
<div>
|
|
<div class="title">
|
|
历史搜索
|
|
</div>
|
|
<div class="info-box">
|
|
<div v-for="(item, i) in historyArr.data" :key="i" class="btn"
|
|
@click="setSeachVal(item)">
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:30px;">
|
|
<div class="title">
|
|
热门推荐
|
|
</div>
|
|
<div class="info-box">
|
|
<div v-for="(item, i) in hotArr.data" :key="i" class="btn"
|
|
@click="setHotSeach(item)">
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="tool-btn dis-f jus-x al-item map-btn">
|
|
<img src="../assets/homeImage/mapImg.png" class="img" alt="">
|
|
地图找房
|
|
</div> -->
|
|
<div class="tool-btn dis-f jus-x al-item add-btn" :class="{ 'mg-l-10': routePath === '/' }"
|
|
style="position: relative;">
|
|
<img src="../../assets/homeImage/addBtn.png" class="img" alt="">
|
|
发布房源
|
|
<choosing-identity></choosing-identity>
|
|
</div>
|
|
<div class=" dis-f jus-x al-item authentication-btn" v-if="routePath === '/personHousing'">
|
|
<img src="../../assets/homeImage/authenticationBtnImg.png" class="text-img" alt="">
|
|
<img src="../../assets/homeImage/authenticationBtnCode.svg" class="code-img" alt="">
|
|
<div class="btn-qrcode">
|
|
<img class="bj" src="@/assets/img/publicImage/housing-certification-bj.jpg">
|
|
<img class="QR-code" src="https://app.gter.net/tenement/pc/api/qrcode?type=propertyAuth">
|
|
</div>
|
|
</div>
|
|
<div class=" dis-f jus-x al-item authentication-btn intermediary-btn"
|
|
v-if="routePath === '/intermediaryHousing'">
|
|
<img src="../../assets/homeImage/intermediaryText.png" class="text-img" alt="">
|
|
<img src="../../assets/homeImage/intermediaryCode.svg" class="code-img" alt="">
|
|
<div class="btn-qrcode">
|
|
<img class="bj" src="@/assets/img/publicImage/mediation-authentication-bj.jpg">
|
|
<img class="QR-code" src="https://app.gter.net/tenement/pc/api/qrcode?type=middlemanAuth">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="seach-info-box dis-f" v-if="routePath === '/'">
|
|
<seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length"
|
|
:checkBtn="checkBtn">
|
|
</seachInfo>
|
|
<seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length"
|
|
:checkBtn="checkBtn"></seachInfo>
|
|
<seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data"
|
|
:checkBtn="checkBtn" v-if="seachArea.data.length"></seachInfo>
|
|
<seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data"
|
|
:checkBtn="checkBtn" v-if="allHireType.data.length"></seachInfo>
|
|
</div>
|
|
<!-- -->
|
|
<div
|
|
v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'">
|
|
<selectTabBox :setSeachCondition="setSeachConditions" :setLocation="setLocation"></selectTabBox>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watchEffect, reactive, defineProps } from 'vue';
|
|
import seachInfo from '../indexSeachInfo/indexSeachInfo.vue';
|
|
import selectTabBox from "../selectTabBox/selectTabBox.vue";
|
|
import choosingIdentity from '@/components/edit/choosingIdentity.vue'
|
|
import { useRouter } from 'vue-router';
|
|
import store from '../../store/index';
|
|
import api from "../../utils/api";
|
|
|
|
const props = defineProps({
|
|
getDataList: {
|
|
type: Function
|
|
}
|
|
})
|
|
|
|
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: [] });//学校地区
|
|
let hireType = {};//整租
|
|
let allHireType = {};//合租
|
|
let seachArea = {};//区域找房
|
|
let historyArr = reactive({ data: [] })//历史查找记录
|
|
let hotArr = reactive({ data: [] })
|
|
let seachAllType = reactive({
|
|
keyword: '',
|
|
location: []
|
|
})
|
|
|
|
|
|
//获取区域下列数据
|
|
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
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
//监听路由
|
|
const route = useRouter()
|
|
let routePath = ref('')
|
|
routePath.value = route.currentRoute.value.meta.path
|
|
|
|
watchEffect(() => {
|
|
seachSchoolBtn.data = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
|
|
hireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : []
|
|
allHireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : []
|
|
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)
|
|
hotArr.data = store.state.indexData.hotSearcheWords
|
|
})
|
|
|
|
//获取历史搜索记录
|
|
historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []
|
|
|
|
//搜索数据
|
|
let seachList = (item) => {
|
|
let string = seachAllType.keyword
|
|
if (!string.replace(/\s/g, "")) return
|
|
if (historyArr.data.indexOf(seachAllType.keyword) === -1) {
|
|
historyArr.data.unshift(seachAllType.keyword)
|
|
}
|
|
localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
|
|
sessionStorage.setItem('houseingPageType', routePath.value === '/needHousing' ? '6' : routePath.value === '/intermediaryHousing' ? '1' : routePath.value === '/personHousing' ? '0' : '0')
|
|
route.push({
|
|
path: '/seachPage',
|
|
query: {
|
|
keyword: seachAllType.keyword,
|
|
isNeedHousing: routePath.value === '/needHousing',
|
|
}
|
|
})
|
|
}
|
|
|
|
//设置点击一级区域
|
|
let setLocation=(type,data)=>{
|
|
seachAllType[type] = data
|
|
seachAllType['school']=''
|
|
}
|
|
|
|
//设置搜索数据
|
|
let setSeachConditions = (type, data, second = null) => {
|
|
if (type === 'rent') {
|
|
seachAllType['rent_min'] = data.min
|
|
seachAllType['rent_max'] = data.max
|
|
} else if (type !== '') {
|
|
seachAllType[type] = data
|
|
} else if (type === '') {
|
|
data.indexOf('isintermediary') !== -1 ? seachAllType['isintermediary'] = 1 : seachAllType['isintermediary'] = 0
|
|
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 = ''
|
|
}
|
|
if (second) {
|
|
seachAllType[second.type] = second.id
|
|
}
|
|
getDataList(seachAllType)
|
|
}
|
|
|
|
//点击历史搜索记录
|
|
let setSeachVal = (item) => {
|
|
seachAllType.keyword = item
|
|
seachList()
|
|
// getDataList(seachAllType)
|
|
}
|
|
|
|
//点击热门地区
|
|
let setHotSeach = (item) => {
|
|
seachAllType.keyword = item
|
|
if (historyArr.data.indexOf(item) === -1) historyArr.data.unshift(item)
|
|
localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
|
|
seachList()
|
|
}
|
|
|
|
//点击选项
|
|
let checkBtn = (data, type, areaItem) => {
|
|
getDataList(type, data, areaItem)
|
|
}
|
|
|
|
|
|
defineExpose({
|
|
historyShow
|
|
})
|
|
</script>
|
|
<style scoped lang="less">
|
|
.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;
|
|
}
|
|
|
|
.authentication-btn:hover .btn-qrcode {
|
|
display: block;
|
|
}
|
|
|
|
.btn-qrcode {
|
|
height: 365px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 58px;
|
|
z-index: 333;
|
|
display: none;
|
|
}
|
|
|
|
.btn-qrcode .bj {
|
|
height: 100%;
|
|
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2784313725490196);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.btn-qrcode .QR-code {
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 110px;
|
|
border-radius: 50%;
|
|
bottom: 86px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.seach-box-bg {
|
|
background: #d7d7d7 !important;
|
|
background: inherit;
|
|
border: none;
|
|
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);
|
|
font-size: 14px;
|
|
margin-top: 20px;
|
|
padding-top: 5px;
|
|
|
|
.seach-box {
|
|
background: #FFFFFF;
|
|
/* transform: translate(0, 5px); */
|
|
border-radius: 16px;
|
|
|
|
.top-seach {
|
|
padding: 20px;
|
|
position: relative;
|
|
justify-content: end;
|
|
border-bottom: 1px solid #ebebeb;
|
|
|
|
.intermediary-btn {
|
|
background: rgba(241, 245, 247, 1);
|
|
}
|
|
|
|
.authentication-btn {
|
|
width: 160px;
|
|
height: 48px;
|
|
background: inherit;
|
|
background-color: rgba(244, 243, 255, 1);
|
|
border: none;
|
|
border-radius: 8px;
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
margin-left: 20px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
|
|
.text-img {
|
|
width: 100px;
|
|
height: 26px;
|
|
}
|
|
|
|
.code-img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
|
|
.seach-history-h {
|
|
max-height: 375px !important;
|
|
transition: max-height 0.5s ease-in-out;
|
|
}
|
|
|
|
.seach-hiosory-box {
|
|
position: absolute;
|
|
top: 55px;
|
|
z-index: 99;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.seach-history-info {
|
|
width: 560px;
|
|
background: inherit;
|
|
background-color: rgba(255, 255, 255, 1);
|
|
box-sizing: border-box;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: rgba(235, 235, 235, 1);
|
|
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);
|
|
padding: 20px 25px;
|
|
|
|
.title {
|
|
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
|
font-weight: 650;
|
|
font-style: normal;
|
|
font-size: 16px;
|
|
color: #000000;
|
|
}
|
|
|
|
.info-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 15px;
|
|
color: #555555;
|
|
text-align: left;
|
|
|
|
.btn {
|
|
margin: 20px 30px 0 0;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.location-box {
|
|
width: 80px;
|
|
height: 40px;
|
|
background: inherit;
|
|
background-color: rgba(68, 68, 68, 1);
|
|
border: none;
|
|
border-radius: 8px;
|
|
border-top-left-radius: 0px;
|
|
border-bottom-left-radius: 0px;
|
|
-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);
|
|
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
|
font-weight: 650;
|
|
font-style: normal;
|
|
font-size: 14px;
|
|
color: #FFFFFF;
|
|
line-height: 48px;
|
|
position: absolute;
|
|
z-index: 666;
|
|
}
|
|
|
|
.triangle {
|
|
border: 7px solid;
|
|
border-color: transparent #000 transparent transparent;
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
bottom: -47px;
|
|
left: -7px;
|
|
}
|
|
|
|
.seach-btn {
|
|
width: 100px;
|
|
height: 48px;
|
|
background: inherit;
|
|
background-color: rgba(98, 177, 255, 1);
|
|
border: none;
|
|
border-right: 0px;
|
|
border-radius: 0 8px 8px 0;
|
|
line-height: 48px;
|
|
cursor: pointer;
|
|
transform: translateX(-3px);
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 16px;
|
|
color: #000000;
|
|
}
|
|
|
|
.img {
|
|
width: 20px;
|
|
height: 20px;
|
|
object-fit: contain;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.map-btn {
|
|
background: rgba(80, 227, 194, 1);
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.add-btn {
|
|
background: rgba(253, 218, 85, 1);
|
|
margin-left: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mg-l-10 {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.tool-btn {
|
|
width: 160px;
|
|
height: 48px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-size: 16px;
|
|
color: #000000;
|
|
line-height: 48px;
|
|
}
|
|
}
|
|
|
|
.seach-info-box {
|
|
padding: 20px 10px;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
::v-deep .el-input__wrapper {
|
|
background: rgba(246, 246, 246, 1);
|
|
}
|
|
</style>
|
|
|