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

修改搜索失败还能下拉刷新

Browse Source
This commit is contained in:
A1300399510
2023-12-08 15:21:16 +08:00
parent 86021d3066
commit 51c7932205
9 changed files with 298 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,11 @@
<template>
<div class="dis-f jus-x">
<div class="body-maxWidth ">
<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="搜索房源或输入房源ID" @keyup.enter='seachList'>
<el-input v-model="seachVal" class="input-s" placeholder="搜索房源或输入房源ID" @keyup.enter="seachList">
<template #suffix>
<img src="../../assets/homeImage/seachIcon.svg" class="icon" alt="" @click="seachList">
<img src="../../assets/homeImage/seachIcon.svg" class="icon" alt="" @click="seachList" />
</template>
</el-input>
<!-- 地图找房的入口 暂时隐藏 -->
@@ -15,37 +15,31 @@
</div>
<div class="dis-f al-item">
<div class="tool-btn dis-f al-item jus-x" @click="gouser('fav')">
<img src="../../assets/homeImage/Mycollect.png" class="img" alt="">
<img src="../../assets/homeImage/Mycollect.png" class="img" alt="" />
我的收藏
</div>
<div class="tool-btn dis-f al-item jus-x mg-l-10" @click="gouser('publish')">
<img src="../../assets/homeImage/informationO.png" class="img" alt="">
<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 first" v-if="!isNeedHousing" @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'">
个人房源 {{ seachKey.key && seachKey.key.personal && seachKey.key.personal.count }}
<div class="top-btn dis-f jus-x al-item first" v-if="!isNeedHousing" @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'">
个人房源 {{ seachKey.key && seachKey.key.personal && seachKey.key.personal.count }}
<div class="dis-f jus-x btm-line-mg">
<div class="btm-line"></div>
</div>
</div>
个人房源 {{ seachKey.key && seachKey.key.personal && seachKey.key.personal.count }}
<div class="second-select" v-show="tabType === 'intermediary'">
<div class="box">
</div>
<div class="box"></div>
</div>
</div>
<div class="top-btn dis-f jus-x al-item first" v-if="isNeedHousing"
:class="{ 'select-top-btn-bg': tabType === 'need' }">
<div class="top-btn" :class="[tabType === 'need' ? 'select-top-btn' : 'first-no-select']"
v-show="tabType === 'need'">
<div class="top-btn dis-f jus-x al-item first" v-if="isNeedHousing" :class="{'select-top-btn-bg': tabType === 'need'}">
<div class="top-btn" :class="[tabType === 'need' ? 'select-top-btn' : 'first-no-select']" v-show="tabType === 'need'">
求房源
<div class="dis-f jus-x btm-line-mg">
<div class="btm-line"></div>
@@ -53,28 +47,19 @@
</div>
求房源{{ tabType }}
</div>
<div class="top-btn dis-f jus-x al-item second" v-if="isNeedHousing" @click="selectPage('intermediary')"
:class="{ 'select-top-btn-bg': tabType === 'intermediary' }">
<div class="top-btn dis-f jus-x al-item second" v-if="isNeedHousing" @click="selectPage('intermediary')" :class="{'select-top-btn-bg': tabType === 'intermediary'}">
<div class="first-select">
<div class="box">
</div>
<div class="box"></div>
</div>
</div>
<div class="top-btn dis-f jus-x al-item second" v-if="!isNeedHousing && houseingPageType != 6"
@click="selectPage('intermediary')" :class="{ 'select-top-btn-bg': tabType === 'intermediary' }">
<div class="top-btn dis-f jus-x al-item second" v-if="!isNeedHousing && houseingPageType != 6" @click="selectPage('intermediary')" :class="{'select-top-btn-bg': tabType === 'intermediary'}">
<div class="first-select" v-show="tabType === 'person'">
<div class="box">
</div>
<div class="box"></div>
</div>
<div class="third-select" v-show="tabType === 'apartment'">
<div class="box">
</div>
<div class="box"></div>
</div>
<div class="top-btn" :class="[tabType === 'intermediary' ? 'select-top-btn' : 'first-no-select']"
v-show="tabType === 'intermediary'">
<div class="top-btn" :class="[tabType === 'intermediary' ? 'select-top-btn' : 'first-no-select']" v-show="tabType === 'intermediary'">
中介房源 {{ seachKey.key && seachKey.key.intermediary && seachKey.key.intermediary.count }}
<div class="dis-f jus-x btm-line-mg">
<div class="btm-line"></div>
@@ -82,16 +67,11 @@
</div>
中介房源 {{ seachKey.key && seachKey.key.intermediary && seachKey.key.intermediary.count }}
</div>
<div class="top-btn dis-f jus-x al-item third" @click="selectPage('apartment')"
:class="{ 'select-top-btn-bg': tabType === 'apartment' }"
v-if="!isNeedHousing && houseingPageType != 6">
<div class="top-btn dis-f jus-x al-item third" @click="selectPage('apartment')" :class="{'select-top-btn-bg': tabType === 'apartment'}" v-if="!isNeedHousing && houseingPageType != 6">
<div class="second-select-third-box" v-show="tabType === 'intermediary'">
<div class="box">
</div>
<div class="box"></div>
</div>
<div class="top-btn" :class="[tabType === 'apartment' ? 'select-top-btn' : 'first-no-select']"
v-show="tabType === 'apartment'">
<div class="top-btn" :class="[tabType === 'apartment' ? 'select-top-btn' : 'first-no-select']" v-show="tabType === 'apartment'">
品牌公寓 {{ seachKey.key && seachKey.key.studentapartment && seachKey.key.studentapartment.count }}
<div class="dis-f jus-x btm-line-mg">
<div class="btm-line"></div>
@@ -101,76 +81,56 @@
</div>
<div class="top-btn dis-f jus-x al-item four" v-if="!isNeedHousing">
<div class="second-select-third-box" v-show="tabType === 'apartment'">
<div class="box">
</div>
<div class="box"></div>
</div>
</div>
</div>
<div v-show="tabType === 'apartment'" :class="{ 'show-box-pd': !showSelectModule }">
<apartmentSelect @handleTransfer="setSeachConditions" :seachPage="false" ref="apartmentSelectInfo">
</apartmentSelect>
<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" :setLocation="setLocation"
ref="selectTabBoxInfo"></selectTabBox>
<div class="select-box" :class="{'seach-select-h': showSelectModule}" :style="{overflow: showSelectModule ? 'visible' : 'hidden'}">
<selectTabBox :setSeachCondition="setSeachConditions" :setLocation="setLocation" 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="{'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>
<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 }}
<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="">
<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="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>
共<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="">
<img src="../../assets/homeImage/closeIcon.svg" @click="deleteSelect(i)" class="img" alt="" />
</div>
</div>
</div>
<span class="dis-f al-item sort-text" v-show="tabType !== 'apartment'">
<el-dropdown trigger="click" @command="listSortCheck">
<span class="dis-f al-item sort-text">
{{ listSort.check }}<img class="img" src="../../assets/homeImage/sortIcon.png" alt="">
</span>
<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" :command="j">
<div class="dropdown-text"
:class="{ 'dropdown-check-text': listSort.checkType === items.type }"
>{{
items.title
}}
<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>
</div>
</el-dropdown-item>
@@ -185,265 +145,273 @@
</div>
</template>
<script setup>
import { reactive, ref, shallowReactive, defineProps, watchEffect, defineExpose } from 'vue'
import selectTabBox from "../selectTabBox/selectTabBox.vue";
import apartmentSelect from '../apartment/seachModule.vue'
import store from '../../store/index';
import api from '@/utils/api';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import {reactive, ref, inject, shallowReactive, defineProps, watchEffect, defineExpose} from "vue"
import selectTabBox from "../selectTabBox/selectTabBox.vue"
import apartmentSelect from "../apartment/seachModule.vue"
import store from "../../store/index"
import api from "@/utils/api"
import {useRoute, useRouter} from "vue-router"
import {ElMessage} from "element-plus"
//路由
const route = useRouter()
const props = defineProps({
getDataList: {
type: Function
type: Function,
},
count: {
type: Number
}
type: Number,
},
isNoGetData: Boolean,
})
//选项卡
let tabType = ref('person')
let selectTabBoxInfo = ref(null)//个人/中介筛选实例
let apartmentSelectInfo = ref(null)//公寓筛选实例
let tabType = ref("person")
let selectTabBoxInfo = ref(null) //个人/中介筛选实例
let apartmentSelectInfo = ref(null) //公寓筛选实例
//设置请求数据
let selectPage = (type) => {
if (type === seachAllType['tabType'] || houseingPageType == 6) return
if (type === 'apartment') {
selectTabBoxInfo.value.cleanSelect()//清空筛选数据
let selectPage = type => {
if (type === seachAllType["tabType"] || houseingPageType == 6) return
if (type === "apartment") {
selectTabBoxInfo.value.cleanSelect() //清空筛选数据
} else {
apartmentSelectInfo.value.cleanSelect && apartmentSelectInfo.value.cleanSelect()
}
//清空数据
if (type === 'apartment')
if (type === "apartment")
seachAllType = reactive({
keyword: seachAllType['keyword'],
keyword: seachAllType["keyword"],
location: [],
intermediary: ''
intermediary: "",
})
tabType.value = type
seachAllType['tabType'] = type
seachAllType['searchid'] = setPageKey().searchid
seachAllType["tabType"] = type
seachAllType["searchid"] = setPageKey().searchid
//根据类型初始化筛选参数
if (type === 'person') {
seachAllType['intermediary'] = 0
seachAllType['isintermediary'] = 0
houseingPageType = '0'
sessionStorage.setItem('houseingPageType', 0)
if (type === "person") {
seachAllType["intermediary"] = 0
seachAllType["isintermediary"] = 0
houseingPageType = "0"
sessionStorage.setItem("houseingPageType", 0)
selectTabBoxInfo.value.routerQuerySet()
} else if (type === 'intermediary') {
seachAllType['intermediary'] = 1
seachAllType['isverified'] = 0
houseingPageType = '1'
sessionStorage.setItem('houseingPageType', 1)
} else if (type === "intermediary") {
seachAllType["intermediary"] = 1
seachAllType["isverified"] = 0
houseingPageType = "1"
sessionStorage.setItem("houseingPageType", 1)
// route.currentRoute.value.query.houseingPageType='1'
selectTabBoxInfo.value.routerQuerySet()
} else {
seachAllType['intermediary'] = ''
seachAllType['isverified'] = 0
seachAllType['isintermediary'] = 0
seachAllType["intermediary"] = ""
seachAllType["isverified"] = 0
seachAllType["isintermediary"] = 0
}
//初始化搜索框输入内容
if (tabType.value != 'need') {
if (tabType.value != "need") {
setSeachVal()
}
if ((seachVal.value && !setPageKey().searchid)) return
let seachObj=setSeachId()
getDataList(seachAllType,seachObj.count==0?false:true)
if (seachVal.value && !setPageKey().searchid) return
let seachObj = setSeachId()
getDataList(seachAllType, seachObj.count == 0 ? false : true)
}
let getDataList = props.getDataList
//搜索数据
let seachAllType = reactive({
keyword: '',
keyword: "",
location: [],
searchid: '',
intermediary: 0
searchid: "",
intermediary: 0,
})
//搜索内容
let seachVal = ref('')
let seachVal = ref("")
let isNeedHousing = ref(false)
seachVal.value = route.currentRoute.value.query.keyword && route.currentRoute.value.query.keyword.replace(/\s/g, "")
//判断是否从求房源页面跳转
isNeedHousing.value = route.currentRoute.value.query.isNeedHousing === 'true'
isNeedHousing.value = route.currentRoute.value.query.isNeedHousing === "true"
//判断当前是什么页面
let houseingPageType = sessionStorage.getItem('houseingPageType')
let houseingPageType = sessionStorage.getItem("houseingPageType")
let type = houseingPageType === '0' ? 'person' : houseingPageType === '1' ? 'intermediary' : houseingPageType === '6' ? 'need' : 'apartment'
let type = houseingPageType === "0" ? "person" : houseingPageType === "1" ? "intermediary" : houseingPageType === "6" ? "need" : "apartment"
tabType.value = type
if(tabType.value=='apartment'){
seachAllType['intermediary'] = ''
seachAllType['tabType']='apartment'
if (tabType.value == "apartment") {
seachAllType["intermediary"] = ""
seachAllType["tabType"] = "apartment"
}
//页面判断-抛出方法
let checkPageType = () => {
// houseingPageType 0个人 1中介 6求房源
let type = houseingPageType === '0' ? 'person' : houseingPageType === '1' ? 'intermediary' : houseingPageType === '6' ? 'need' : 'apartment'
let type = houseingPageType === "0" ? "person" : houseingPageType === "1" ? "intermediary" : houseingPageType === "6" ? "need" : "apartment"
tabType.value = type
seachAllType['tabType'] = type
if (type === 'person') {
seachAllType['intermediary'] = 0
} else if (type === 'intermediary') {
seachAllType['intermediary'] = 1
} else if (type === 'need') {
seachAllType['intermediary'] = 6
seachAllType['keyword'] = seachVal.value
seachAllType["tabType"] = type
if (type === "person") {
seachAllType["intermediary"] = 0
} else if (type === "intermediary") {
seachAllType["intermediary"] = 1
} else if (type === "need") {
seachAllType["intermediary"] = 6
seachAllType["keyword"] = seachVal.value
} else {
seachAllType['intermediary'] = ''
seachAllType["intermediary"] = ""
}
let seachObj=setSeachId()
getDataList(seachAllType,seachObj.count==0?false:true)
let seachObj = setSeachId()
getDataList(seachAllType, seachObj.count == 0 ? false : true)
}
//搜索key
let seachKey = reactive({
key: {
personal: {},
intermediary: {},
studentapartment: {}
}
studentapartment: {},
},
})
let seachInfoData=shallowReactive({
data:{}
let seachInfoData = shallowReactive({
data: {},
})
//直接输入url
if (isNeedHousing.value) {
tabType.value = 'need'
seachAllType['intermediary'] = 6
tabType.value = "need"
seachAllType["intermediary"] = 6
}
//切换选项重置输入框内容
let setSeachVal = () => {
seachAllType['searchid'] = setPageKey().searchid
seachAllType["searchid"] = setPageKey().searchid
seachVal.value = seachKey.key.keyword
}
//设置点击一级区域
let setLocation = (type, data) => {
seachAllType[type] = data
seachAllType['school'] = ''
seachAllType["school"] = ""
}
//设置搜索数据
let setSeachConditions = (type, data) => {
if (seachAllType['tabType'] !== 'apartment') {
if (type === 'rent') {
seachAllType['rent_min'] = data.min
seachAllType['rent_max'] = data.max
} else if (type !== '') {
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('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
} 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') {
if (type === "school") {
seachAllType.location = []
}
if (type === 'location') {
seachAllType.school = ''
if (type === "location") {
seachAllType.school = ""
}
} else {
seachAllType = {
tabType: 'apartment',
...type.value
tabType: "apartment",
...type.value,
}
}
if (tabType.value != 'need') {
if (tabType.value != "need") {
setSeachVal()
} else if (tabType.value == 'need') {
} else if (tabType.value == "need") {
seachVal.value = seachAllType.keyword
}
if (!seachAllType['tabType']) seachAllType['tabType'] = tabType.value
if (!seachAllType["tabType"]) seachAllType["tabType"] = tabType.value
if (!seachVal.value) {
seachAllType.searchid = ''
seachAllType.searchid = ""
}
//设置其他选项
if (seachAllType['tabType'] === 'person') {
seachAllType['isintermediary'] = 0
} else if (seachAllType['tabType'] === 'intermediary') {
seachAllType['isverified'] = 0
if (seachAllType["tabType"] === "person") {
seachAllType["isintermediary"] = 0
} else if (seachAllType["tabType"] === "intermediary") {
seachAllType["isverified"] = 0
} else {
seachAllType['isverified'] = 0
seachAllType['isintermediary'] = 0
seachAllType["isverified"] = 0
seachAllType["isintermediary"] = 0
}
let seachObj=setSeachId()
getDataList(seachAllType,seachObj.count==0?false:true)
let seachObj = setSeachId()
getDataList(seachAllType, seachObj.count == 0 ? false : true)
}
//设置当前搜索key
let setPageKey = () => {
return tabType.value === 'person' ? seachKey.key.personal : tabType.value === 'intermediary' ? seachKey.key.intermediary : tabType.value === 'apartment' ? seachKey.key.studentapartment : ''
return tabType.value === "person" ? seachKey.key.personal : tabType.value === "intermediary" ? seachKey.key.intermediary : tabType.value === "apartment" ? seachKey.key.studentapartment : ""
}
let setSeachId=()=>{
return tabType.value === 'person' ? seachInfoData.data.personal : tabType.value === 'intermediary' ? seachInfoData.data.intermediary : tabType.value === 'apartment' ? seachInfoData.data.studentapartment : ''
let setSeachId = () => {
return tabType.value === "person" ? seachInfoData.data.personal : tabType.value === "intermediary" ? seachInfoData.data.intermediary : tabType.value === "apartment" ? seachInfoData.data.studentapartment : ""
}
let isDownGetData = inject("isDownGetData")
//搜索初始化
let searchInit = (data) => {
api.search({ keyword: data }).then(res => {
if (res.code === 200) {
seachKey.key = res.data
seachInfoData.data=JSON.parse(JSON.stringify(res.data))
let seachObj=checkSearckInit(setSeachId())
seachAllType.searchid = seachObj.searchid
seachAllType['intermediary']=tabType.value==='person'?0:tabType.value==='intermediary'?1:tabType.value==='need'?6:''
seachAllType['tabType']=tabType.value
getDataList(seachAllType,seachObj.count==0?false:true)
} else {
ElMessage({
message: res.message,
center: true,
})
}
})
let searchInit = data => {
api.search({keyword: data})
.then(res => {
if (res.code === 200) {
seachKey.key = res.data
seachInfoData.data = JSON.parse(JSON.stringify(res.data))
let seachObj = checkSearckInit(setSeachId())
seachAllType.searchid = seachObj.searchid
seachAllType["intermediary"] = tabType.value === "person" ? 0 : tabType.value === "intermediary" ? 1 : tabType.value === "need" ? 6 : ""
seachAllType["tabType"] = tabType.value
getDataList(seachAllType, seachObj.count == 0 ? false : true)
isDownGetData.value = true
} else {
isDownGetData.value = false
ElMessage({
message: res.message,
center: true,
})
}
})
.catch(err => {
console.log("1111")
})
}
//判断搜索数据数量
let checkSearckInit=(data)=>{
if(data.count) return data
let obj={}
if(seachInfoData.data.personal.count>0){
obj=seachInfoData.data.personal
tabType.value = 'person'
seachAllType['intermediary']=0
}else if(seachInfoData.data.intermediary.count>0){
obj=seachInfoData.data.intermediary
tabType.value = 'intermediary'
seachAllType['intermediary']=1
}else if(seachInfoData.data.studentapartment.count>0){
obj=seachInfoData.data.studentapartment
tabType.value = 'apartment'
seachAllType['intermediary']=''
}else obj=setSeachId()
let checkSearckInit = data => {
if (data.count) return data
let obj = {}
if (seachInfoData.data.personal.count > 0) {
obj = seachInfoData.data.personal
tabType.value = "person"
seachAllType["intermediary"] = 0
} else if (seachInfoData.data.intermediary.count > 0) {
obj = seachInfoData.data.intermediary
tabType.value = "intermediary"
seachAllType["intermediary"] = 1
} else if (seachInfoData.data.studentapartment.count > 0) {
obj = seachInfoData.data.studentapartment
tabType.value = "apartment"
seachAllType["intermediary"] = ""
} else obj = setSeachId()
return obj
}
//搜索数据
let seachList = (item) => {
let seachList = item => {
let routeInfo = route.currentRoute.value
if (!seachVal.value.replace(/\s/g, "")) return
if (!seachVal.value) {
return
}
if (seachAllType['intermediary'] === 6) {
seachAllType['keyword'] = seachVal.value
let seachObj=setSeachId()
getDataList(seachAllType,seachObj.count==0?false:true)
if (seachAllType["intermediary"] === 6) {
seachAllType["keyword"] = seachVal.value
let seachObj = setSeachId()
getDataList(seachAllType, seachObj.count == 0 ? false : true)
} else {
searchInit(seachVal.value)
}
@@ -451,53 +419,53 @@ let seachList = (item) => {
path: routeInfo.path,
query: {
keyword: seachVal.value,
isNeedHousing: routeInfo.query.isNeedHousing
}
isNeedHousing: routeInfo.query.isNeedHousing,
},
})
}
//筛选词条
let typeText = ['地理位置', '出租方式', '租金', '租期', '性别要求', '发布时间', '其他']
let typeText = ["地理位置", "出租方式", "租金", "租期", "性别要求", "发布时间", "其他"]
//显示筛选组件
let showSelectModule = ref(false)
//选中地区
let selectData = reactive({ data: [] })
let selectData = reactive({data: []})
let selectTabCheck = reactive({
id: '',
title: '',
data: []
id: "",
title: "",
data: [],
})
//最新发布选项
let listSort = shallowReactive({
type: [
{ title: '最新发布', type: 'timestamp' },
{ title: '热门', type: 'hotnum' },
{ title: '价格从低到高', type: 'rentasc' },
{ title: '价格从高到低', type: 'rentdesc' }
{title: "最新发布", type: "timestamp"},
{title: "热门", type: "hotnum"},
{title: "价格从低到高", type: "rentasc"},
{title: "价格从高到低", type: "rentdesc"},
],
checkType: 'timestamp',
check: '最新发布'
checkType: "timestamp",
check: "最新发布",
})
//搜索列表排序
let listSortCheck = (item) => {
let obj= listSort.type[item]
let listSortCheck = item => {
let obj = listSort.type[item]
listSort.checkType = obj.type
listSort.check = obj.title
setSeachConditions('orderby', obj.type)
setSeachConditions("orderby", obj.type)
}
let seachArea = {};//区域找房
let seachArea = {} //区域找房
//获取区域下列数据
let getLocationData = (data) => {
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
id: item,
})
}
}
@@ -506,15 +474,14 @@ let getLocationData = (data) => {
//更新当前数据数量
let setListCount = (item, num) => {
if (item.tabType === "intermediary") {
seachKey.key['intermediary']['count'] = num
seachKey.key["intermediary"]["count"] = num
} else if (item.tabType === "person") {
seachKey.key['personal']['count'] = num
seachKey.key["personal"]["count"] = num
} else if (item.tabType === "apartment") {
seachKey.key['studentapartment']['count'] = num
seachKey.key["studentapartment"]["count"] = num
}
}
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)
@@ -522,18 +489,17 @@ watchEffect(() => {
defineExpose({
searchInit,
setListCount,
checkPageType
checkPageType,
})
// 跳转我的页面
const gouser = tab => {
if (!store.state['user']['uid']) {
if (!store.state["user"]["uid"]) {
store.state.showloginmodal = true
return
}
route.push(`/user?tab=${tab}`)
}
</script>
<style scoped lang="less">
img {
@@ -605,7 +571,7 @@ img {
border-bottom: 1px solid #ebebeb !important;
}
.box:hover{
.box:hover {
background-color: rgba(242, 242, 242, 1);
}
.box {
@@ -615,7 +581,7 @@ img {
background-color: rgba(246, 246, 246, 1);
border: none;
border-radius: 10px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
color: #555555;
font-size: 15px;
@@ -633,15 +599,15 @@ img {
}
.text-tps {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
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-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
color: #D7D7D7;
color: #d7d7d7;
}
}
}
@@ -652,22 +618,22 @@ img {
background: #62b1ff;
position: relative;
border-radius: 16px 16px 0 0;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 17px;
color: #FFFFFF;
color: #ffffff;
.btm-line {
height: 4px;
width:102px;
width: 102px;
background: inherit;
background-color: rgba(253, 223, 109, 1);
border: none;
border-radius: 53px;
}
.btm-line-mg{
margin-top:-5px;
.btm-line-mg {
margin-top: -5px;
}
.select-top-bos-show {
@@ -692,7 +658,7 @@ img {
line-height: 45px;
background: #fff !important;
border-radius: 16px 16px 0 0;
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 17px;
@@ -823,8 +789,8 @@ img {
}
}
.top-btn:hover{
color:#bcd7f3;
.top-btn:hover {
color: #bcd7f3;
}
.top-btn {
@@ -833,7 +799,7 @@ img {
position: absolute;
border-radius: 16px 16px 0 0;
cursor: pointer;
line-height:45px;
line-height: 45px;
}
}
}
@@ -846,13 +812,13 @@ img {
padding: 0 20px 25px 20px;
display: flex;
justify-content: space-between;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
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-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
@@ -867,14 +833,14 @@ img {
}
.count {
font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
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-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 14px;
@@ -890,7 +856,6 @@ img {
}
}
.input-box {
height: 92px;
background: inherit;
@@ -910,8 +875,8 @@ img {
margin-left: 10px;
}
.tool-btn:hover{
border-color:rgba(200, 200, 200, 1);
.tool-btn:hover {
border-color: rgba(200, 200, 200, 1);
}
.tool-btn {
@@ -924,7 +889,7 @@ img {
border-style: solid;
border-color: rgba(235, 235, 235, 1);
border-radius: 8px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
@@ -938,8 +903,8 @@ img {
}
}
.input-s:hover{
border-color:rgb(200, 200, 200);
.input-s:hover {
border-color: rgb(200, 200, 200);
}
.input-s {
@@ -987,11 +952,11 @@ img {
}
.dropdown-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #7F7F7F;
color: #7f7f7f;
text-align: center;
display: flex;
align-items: center;
@@ -1017,7 +982,7 @@ img {
}
.dropdown-check-text {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 14px;
@@ -1026,7 +991,7 @@ img {
::v-deep .el-input__wrapper {
color: #333333 !important;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px !important;
@@ -1037,8 +1002,7 @@ img {
}
::v-deep .el-dropdown-menu__item {
--el-dropdown-menuItem-hover-color: #7F7F7F;
--el-dropdown-menuItem-hover-color: #7f7f7f;
--el-dropdown-menuItem-hover-fill: rgba(246, 246, 246, 1);
}
</style>

121
src/views/seachIndex.vue
View File

@@ -1,73 +1,70 @@
<template>
<div class="box-min-1200-src">
<pageTopBar></pageTopBar>
<inputModule :getDataList="setSeachSelectData" :count="dataCount" ref="inputModuleInfo"></inputModule>
<inputModule :getDataList="setSeachSelectData" :count="dataCount" ref="inputModuleInfo" :isNoGetData="isNoGetData"></inputModule>
<div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35">
<div class="body-maxWidth"
v-show="dataList.data && dataList.data.length > 0 && seachSelectData.data.tabType !== 'apartment' && seachSelectData.data.intermediary !== ''"
ref="list">
<div class="body-maxWidth" v-show="dataList.data && dataList.data.length > 0 && seachSelectData.data.tabType !== 'apartment' && seachSelectData.data.intermediary !== ''" ref="list">
<biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
</div>
<div class="body-maxWidth" v-show="seachSelectData.data && seachSelectData.data.tabType === 'apartment' && dataList.data && dataList.data.length > 0"
ref="gridContainer">
<apartment-item v-for="item in listApartment" :item="item"></apartment-item>
<div class="body-maxWidth" v-show="seachSelectData.data && seachSelectData.data.tabType === 'apartment' && dataList.data && dataList.data.length > 0" ref="gridContainer">
<apartment-item v-for="(item, index) in listApartment" :key="index" :item="item"></apartment-item>
</div>
<div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
<noList hintText="暂无搜索结果" hintTextTwo="建议更换搜索关键词，或放宽筛选条件"></noList>
</div>
</div>
</div>
<loadMoreText :loadText="loadingText" v-show="dataList.data && dataList.data.length>0"></loadMoreText>
<loadMoreText :loadText="loadingText" v-show="dataList.data && dataList.data.length > 0"></loadMoreText>
<listBtmPrompt></listBtmPrompt>
<footerTool></footerTool>
</div>
<back-to-top></back-to-top>
</template>
<script setup>
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick } from 'vue'
import pageTopBar from '../components/pageTopBar/pageTopBar.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'
import apartmentItem from '@/components/public/apartment-item.vue';
import Masonry from 'masonry-layout';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import footerTool from '@/components/footer/footer.vue'
import loadMoreText from '../components/loadMore/loadMoreText.vue'
import backToTop from '@/components/public/backToTop.vue'
import {reactive, onMounted, ref, provide, onBeforeUnmount, nextTick} from "vue"
import pageTopBar from "../components/pageTopBar/pageTopBar.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"
import apartmentItem from "@/components/public/apartment-item.vue"
import Masonry from "masonry-layout"
import {useRouter} from "vue-router"
import {ElMessage} from "element-plus"
import footerTool from "@/components/footer/footer.vue"
import loadMoreText from "../components/loadMore/loadMoreText.vue"
import backToTop from "@/components/public/backToTop.vue"
//路由
const route = useRouter()
let routeQuery = reactive({ data: {} })
let routeQuery = reactive({data: {}})
//获取数据
let pages = ref(1)//页数
let dataList = reactive({ data: [], count: 0 })//个人/中介数据
let dataCount = ref(0)//数据数量
let pages = ref(1) //页数
let dataList = reactive({data: [], count: 0}) //个人/中介数据
let dataCount = ref(0) //数据数量
let pageList = ref([])
// let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })//双列瀑布数据
let seachSelectData = reactive({ data: {} })//搜索数据
let loading = ref(true)//开关
let seachSelectData = reactive({data: {}}) //搜索数据
let loading = ref(true) //开关
let loadingText = ref(` 下拉加载更多 `)
let listApartment = ref([])//公寓数据
let masonryInstance = null//瀑布实例
let listApartment = ref([]) //公寓数据
let masonryInstance = null //瀑布实例
let listMasonryInstance = null
provide('count', dataCount)
provide("count", dataCount)
//保存搜索设置
let setSeachSelectData = (data,type) => {
let setSeachSelectData = (data, type) => {
pages.value = 1
seachSelectData.data = {
...data
...data,
}
loading.value = true
getDataList(seachSelectData.data,type)
getDataList(seachSelectData.data, type)
}
//初始化列表参数
@@ -79,25 +76,26 @@ let setInitial = () => {
}
//获取搜索数据
let getDataList = (data,type=true) => {
let getDataList = (data, type = true) => {
// console.log(data,type)
if(!type){ //是否继续搜索
seachSelectData.data.tabType !== 'apartment'?pageList.value = []:listApartment.value = []
if (!type) {
//是否继续搜索
seachSelectData.data.tabType !== "apartment" ? (pageList.value = []) : (listApartment.value = [])
dataList.data = []
dataCount.value = 0
loading.value = false
return
}
loadingText.value=' 加载中..... '
loadingText.value = " 加载中..... "
if (!loading.value) return
let postData = {
page: pages.value,
limit: 20,
...data
...data,
}
loading.value = false
let seachApi = null
if (seachSelectData.data.tabType !== 'apartment') {
if (seachSelectData.data.tabType !== "apartment") {
seachApi = api.getLists(postData)
} else {
seachApi = api.apartment(postData)
@@ -110,10 +108,10 @@ let getDataList = (data,type=true) => {
loadingText.value = ` 到底了 `
loading.value = false
} else {
loadingText.value = ' 下拉加载更多 '
loadingText.value = " 下拉加载更多 "
loading.value = true
}
if (seachSelectData.data.tabType !== 'apartment') {
if (seachSelectData.data.tabType !== "apartment") {
if (pages.value === 1) {
setInitial()
pageList.value = []
@@ -123,8 +121,8 @@ let getDataList = (data,type=true) => {
dataCount.value = res.data.count
pageList.value = pageList.value.concat(dataList.data)
nextTick(() => {
listMasonryInstance.reloadItems();
listMasonryInstance.layout();
listMasonryInstance.reloadItems()
listMasonryInstance.layout()
})
} else {
let data = res.data
@@ -133,15 +131,14 @@ let getDataList = (data,type=true) => {
if (pages.value === 1) listApartment.value = []
listApartment.value = listApartment.value.concat(data.data)
nextTick(() => {
masonryInstance.reloadItems();
masonryInstance.layout();
masonryInstance.reloadItems()
masonryInstance.layout()
if (res.data.data.length >= 20) {
loading.value = true
}
})
}
inputModuleInfo.value.setListCount(seachSelectData.data, dataList.count)
} else {
ElMessage({
message: res.message,
@@ -151,43 +148,44 @@ let getDataList = (data,type=true) => {
})
}
let isDownGetData = ref(true) // 是否可以下拉获取数据
provide("isDownGetData", isDownGetData)
//加载更多
let downLoadMore = () => {
tool.loadMore(() => {
if (!loading.value) return
if (!loading.value || !isDownGetData.value) return
pages.value++
getDataList(seachSelectData.data)
})
}
let inputModuleInfo = ref(null)
const gridContainer = ref(null);
const gridContainer = ref(null)
const list = ref(null)
//listImg
onMounted(() => {
listMasonryInstance = new Masonry(list.value, {
itemSelector: '.item',
itemSelector: ".item",
gutter: 20,
});
})
masonryInstance = new Masonry(gridContainer.value, {
itemSelector: '.item',
gutter: 20
});
itemSelector: ".item",
gutter: 20,
})
routeQuery.data = route.currentRoute.value.query
if (routeQuery.data.keyword && routeQuery.data.keyword.replace(/\s/g, "") && routeQuery.data.houseingPageType != 6) {
inputModuleInfo.value.searchInit(routeQuery.data.keyword)//调用搜索组件的搜索功能
inputModuleInfo.value.searchInit(routeQuery.data.keyword) //调用搜索组件的搜索功能
// route.currentRoute.value.query.keyword = ''
} else {
inputModuleInfo.value.checkPageType()
}
window.addEventListener('scroll', downLoadMore, true);
window.addEventListener("scroll", downLoadMore, true)
})
onBeforeUnmount(() => {
window.removeEventListener('scroll', downLoadMore, true);
window.removeEventListener("scroll", downLoadMore, true)
})
</script>
<style scoped lang="less">
img {
@@ -238,4 +236,3 @@ img {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
}
</style>