gter.net/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加加载提示语 添加搜索同步url 修改搜索页搜索类型显示

Browse Source
This commit is contained in:
luJianJun 2023-07-31 16:11:05 +08:00
parent 323e153967
commit 0b3643e04d
10 changed files with 80 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.vue
View File

@ -73,6 +73,11 @@ img {
width: 1200px;
}
.box-min-1200-src{
min-width:1200px;
overflow-x: scroll;
}
/* // 全局css 加上以下代码，可以隐藏上下箭头 */
/* // 取消input的上下箭头 */

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

@ -175,19 +175,18 @@ let seachList = (item) => {
historyArr.data.push(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',
houseingPageType: routePath.value === '/needHousing' ? 6 : routePath.value === '/intermediaryHousing' ? 1 : routePath.value === '/personHousing' ? 0 : 0
}
})
}
//设置搜索数据
let setSeachConditions = (type, data,second=null) => {
console.log(type,data,second)
if (type === 'rent') {
seachAllType['rent_min'] = data.min
seachAllType['rent_max'] = data.max

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

@ -215,11 +215,14 @@ let selectPage = (type) => {
seachAllType['searchid'] = setPageKey()
if (type === 'person') {
seachAllType['intermediary'] = 0
route.currentRoute.value.query.houseingPageType='0'
houseingPageType='0'
sessionStorage.setItem('houseingPageType',0)
selectTabBoxInfo.value.routerQuerySet()
} else if (type === 'intermediary') {
seachAllType['intermediary'] = 1
route.currentRoute.value.query.houseingPageType='1'
houseingPageType='1'
sessionStorage.setItem('houseingPageType',1)
// route.currentRoute.value.query.houseingPageType='1'
selectTabBoxInfo.value.routerQuerySet()
} else {
seachAllType['intermediary'] = ''
@ -238,8 +241,8 @@ seachVal.value = route.currentRoute.value.query.keyword&&route.currentRoute.valu
isNeedHousing.value = route.currentRoute.value.query.isNeedHousing === 'true'
//判断当前是什么页面
let houseingPageType = route.currentRoute.value.query.houseingPageType
console.log('houseingPageType',route.currentRoute.value.query)
let houseingPageType = sessionStorage.getItem('houseingPageType')
console.log('houseingPageType',houseingPageType)
let type = houseingPageType === '0' ? 'person' : houseingPageType === '1' ? 'intermediary' : houseingPageType === '6' ? 'need' : 'apartment'
tabType.value = type
@ -336,6 +339,7 @@ let searchInit = (data) => {
}
//搜索数据
let seachList = (item) => {
let routeInfo = route.currentRoute.value
if (!seachVal.value.replace(/\s/g, "")) return
if (!seachVal.value) {
return
@ -346,6 +350,13 @@ let seachList = (item) => {
} else {
searchInit(seachVal.value)
}
route.push({
path:routeInfo.path,
query:{
keyword:seachVal.value,
isNeedHousing:routeInfo.query.isNeedHousing
}
})
}
//筛选词条

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

@ -637,6 +637,7 @@ let setRouterQuerySet = ref(true)
let routerQuerySet = () => {
if(routePath.value==='/seachPage'){
deconstructionSeachData = routeQuery.data
deconstructionSeachData.houseingPageType=sessionStorage.getItem('houseingPageType')
}else{
deconstructionSeachData = deconstructionData(routeQuery.data)
}

54
src/views/HomeView.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="home">
<div class="home box-min-1200-src">
<pageTopBar :bannerList="bannerList.data"></pageTopBar>
<!-- 搜索模块 -->
<seachModule :getDataList="personHouseingInfo"></seachModule>
@ -21,7 +21,7 @@
<div class="list-box">
<div class="dis-f al-item mg-b-5">
<img src="../assets/homeImage/informationO.png" class="img" alt="">
<span class="title">攻略</span>
<span class="title">{{ informationData && informationData[0].name }}</span>
</div>
<div v-for="(item, i) in informationData && informationData[0].list" :key="i"
class="dis-f al-item list-li">
@ -34,7 +34,7 @@
<div class="list-box">
<div class="dis-f al-item mg-b-5">
<img src="../assets/homeImage/informationT.png" class="img" alt="">
<span class="title">科普</span>
<span class="title">{{ informationData && informationData[1].name }}</span>
</div>
<div v-for="(item, i) in informationData && informationData[1].list" :key="i"
class="dis-f al-item list-li">
@ -112,7 +112,24 @@
<skeletonBox v-for="item in noWaterfallList" :key="item">
</skeletonBox>
</div>
<div class="waterfall-box s-w-100" ref="list" v-show="waterfallList.length >0">
<div class="waterfall-box s-w-100" ref="list" v-show="waterfallList.length > 0">
<div class="waterfall-first-box item dis-f al-item jus-x" style="flex-wrap: wrap;">
<div v-for="(item, i) in indexData.data.tabs" :key="i" class="info-box dis-f al-item jus-x"
:class="[i==0?'first':i==1?'second':i==2?'third':'']"
style="flex-wrap: wrap;" @click="housingPage(item.path)">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/person.png" alt="" v-if="i==0" class="img">
<img src="../assets/homeImage/intermediary.png" alt="" v-if="i==1" class="img">
<img src="../assets/homeImage/brand.png" alt="" v-if="i==2" class="img">
<img src="../assets/homeImage/seek.png" alt="" v-if="i==3" class="img">
</div>
<div class="text-center s-w-100">
{{ item.name }}
</div>
</div>
</div>
</div>
<indexWaterfallBox v-for="(item, i) in waterfallList" :data="item" :key="i"></indexWaterfallBox>
</div>
</div>
@ -168,18 +185,17 @@ watchEffect(() => {
seachTypeData.data = store.state.seachTypeData
indexData.data = store.state.indexData
ListSelectBtn.data = store.state.ListSelectBtn
if (indexData.data.length) {
if (indexData.data.tabs.length) {
indexData.data.tabs.map(res => {
if (res.name === "个人房源") {
if (res.url==='/pages/personList/personList') {
res.path = '/personHousing'
} else if (res.name === "中介房源") {
} else if (res.url==='/pages/personList/personList?intermediary=1') {
res.path = '/intermediaryHousing'
} else if (res.name === "求房源") {
} else if (res.url==="/pages/restOfWorld/restOfWorld") {
res.path = '/needHousing'
} else if (res.name === "品牌公寓") {
res.path = ''
} else if (res.url==='/pages/irentList/irentList') {
res.path = '/apartment'
}
})
}
informationData.value = store.state.indexData.articleList
@ -214,9 +230,10 @@ let banner = () => {
//开关
let loadMore = ref(true)
let loadText = ref('加载中.....')
let loadText = ref('下拉加载更多')
//瀑布流数据
let getRecommendList = () => {
loadText.value = '加载中.....'
api.recommendList({
page: pages.value,
limit: 30,
@ -232,6 +249,7 @@ let getRecommendList = () => {
}
if (res.data.data.length >= 30) {
loadMore.value = true
loadText.value = '下拉加载更多'
} else {
loadMore.value = false
loadText.value = '到底了'
@ -253,10 +271,6 @@ let getRecommendList = () => {
let listDataTypeChange = (item) => {
ListSelectBtn.selectType = item.type
loadMore.value = false
waterfallList[1] = []
waterfallList[2] = []
waterfallList[3] = []
waterfallList[4] = []
pages.value = 1
pagevalue.value = 0
getRecommendList()
@ -285,7 +299,6 @@ const router = useRouter()
//跳转个人房源
let personHouseingInfo = (type, data, areaItem) => {
console.log(type, data, areaItem)
let areaItems = {}
let setData = null
if (type === "location") {
@ -307,6 +320,13 @@ let personHouseingInfo = (type, data, areaItem) => {
})
}
//跳转房源页
let housingPage=(path)=>{
router.push({
path: path,
})
}
const list = ref(null)
onMounted(() => {

8
src/views/detail.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="box-min-1200-src">
<pageTopBar></pageTopBar>
<div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35">
@ -205,7 +205,7 @@
<div class="title dis-f al-item">
<img src="../assets/img/detail/infoIcon.png" class="img" alt="">
<span>
基本信息
{{pageType != 3?'基本信息':'基本要求'}}
</span>
</div>
<!-- -->
@ -1345,9 +1345,10 @@ let recommendListData = ref([])
//广告参数
let pagevalue = ref(0)
//加载提示
let loadText = ref('加载中......')
let loadText = ref('下拉加载更多')
//获取瀑布流数据
let recommendList = () => {
loadText.value='加载中.....'
api.recommendList({
page: pages.value,
limit: 30,
@ -1359,6 +1360,7 @@ let recommendList = () => {
if (res.code === 200) {
if (res.data.data && res.data.data.length >= 30) {
loadMore.value = true
loadText.value='下拉加载更多'
} else {
loadMore.value = false
loadText.value = '到底了'

7
src/views/housingView/intermediary.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="box-min-1200-src">
<pageTopBar></pageTopBar>
<seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
<div class="dis-f jus-x al-item">
@ -48,7 +48,7 @@ let dataCount = ref(0)
let pageList = ref([])
let seachSelectData = reactive({ data: {} })
let loading = ref(true)
let loadingText=ref(' 加载中... ')
let loadingText=ref(' 下拉加载更多 ')
provide('count', dataCount)
//保存搜索设置
@ -63,6 +63,7 @@ let setSeachSelectData = (data) => {
//获取搜索数据
let getDataList = (data) => {
loadingText.value=' 加载中..... '
if(!loading.value)return
loading.value = false
let postData = {
@ -77,7 +78,7 @@ let getDataList = (data) => {
if(res.data.data.length<20){
loadingText.value=' 到底了 '
}else{
loadingText.value=' 加载中... '
loadingText.value=' 下拉加载更多 '
}
if (pages.value === 1) {
pageList.value = []

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

@ -1,5 +1,5 @@
<template>
<div>
<div class="box-min-1200-src">
<pageTopBar></pageTopBar>
<seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
<div class="dis-f jus-x al-item">
@ -49,7 +49,7 @@ let dataCount = ref(0)
let pageList = ref([])
let seachSelectData = reactive({ data: {} })
let loading = ref(true)
let loadingText=ref(' 加载中... ')
let loadingText=ref(' 下拉加载更多 ')
provide('count', dataCount)
//保存搜索设置
@ -64,6 +64,7 @@ let setSeachSelectData = (data) => {
//获取搜索数据
let getDataList = (data) => {
loadingText.value=' 加载中..... '
if(!loading.value)return
loading.value = false
let postData = {
@ -78,7 +79,7 @@ let getDataList = (data) => {
if(res.data.data.length<20){
loadingText.value=' 到底了 '
}else{
loadingText.value=' 加载中... '
loadingText.value=' 下拉加载更多 '
}
if (pages.value === 1) {
pageList.value = []

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

@ -1,5 +1,5 @@
<template>
<div>
<div class="box-min-1200-src">
<pageTopBar></pageTopBar>
<seachModule :getDataList="setSeachSelectData"></seachModule>
<div class="dis-f jus-x al-item">
@ -53,7 +53,7 @@ let dataCount = ref(0)
let pageList = ref([])
let seachSelectData = reactive({ data: {} })
let loading = ref(true)
let loadingText = ref(' 加载中... ')
let loadingText = ref(' 下拉加载更多 ')
provide('count', dataCount)
//保存搜索设置
@ -69,6 +69,7 @@ let setSeachSelectData = (data) => {
//获取搜索数据
let getDataList = (data) => {
loadingText.value=' 加载中..... '
if (!loading.value) return
loading.value = false
let postData = {
@ -82,7 +83,7 @@ let getDataList = (data) => {
if (res.data.data.length < 20) {
loadingText.value = ' 到底了 '
} else {
loadingText.value = ' 加载中... '
loadingText.value = ' 下拉加载更多 '
}
if (pages.value === 1) {
pageList.value = []

37
src/views/seachIndex.vue
View File

@ -54,7 +54,7 @@ let pageList = ref([])
// let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })//双列瀑布数据
let seachSelectData = reactive({ data: {} })//搜索数据
let loading = ref(true)//开关
let loadingText = ref(` 加载中..... `)
let loadingText = ref(` 下拉加载更多 `)
let listApartment = ref([])//公寓数据
let masonryInstance = null//瀑布实例
let listMasonryInstance = null
@ -86,6 +86,7 @@ let setInitial = () => {
//获取搜索数据
let getDataList = (data) => {
loadingText.value=' 加载中..... '
if (!loading.value) return
let postData = {
page: pages.value,
@ -108,7 +109,7 @@ let getDataList = (data) => {
loadingText.value = ` 到底了 `
loading.value = false
} else {
loadingText.value = ' 加载中... '
loadingText.value = ' 下拉加载更多 '
loading.value = true
}
if (seachSelectData.data.tabType !== 'apartment') {
@ -123,7 +124,7 @@ let getDataList = (data) => {
nextTick(() => {
// if (dataList.data[0]) pageList['1'].push(dataList.data[0])
// if (dataList.data[1]) pageList['2'].push(dataList.data[1])
console.log('listMasonryInstance',listMasonryInstance)
// console.log('listMasonryInstance',listMasonryInstance)
listMasonryInstance.reloadItems();
listMasonryInstance.layout();
})
@ -133,7 +134,6 @@ let getDataList = (data) => {
dataCount.value = res.data.count
if (pages.value === 1) listApartment.value = []
listApartment.value = listApartment.value.concat(data.data)
console.log(seachSelectData.data)
nextTick(() => {
masonryInstance.reloadItems();
masonryInstance.layout();
@ -154,33 +154,6 @@ let getDataList = (data) => {
})
}
//添加数据
let addListData = () => {
let num = null
// console.log(pageList.tab , (dataList.count>20?dataList.data.length-2:dataList.count-2))
if (pageList.tab > (dataList.count > 20 ? dataList.data.length - 2 : dataList.count - 2)) {
if (dataList.data.length >= 20) {
loading.value = true
} else {
loading.value = false
}
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(() => {
@ -211,9 +184,7 @@ onMounted(() => {
inputModuleInfo.value.searchInit(routeQuery.data.keyword)//调用搜索组件的搜索功能
route.currentRoute.value.query.keyword = ''
} else {
console.log(seachSelectData.data)
inputModuleInfo.value.checkPageType()
// getDataList(seachSelectData.data)
}
window.addEventListener('scroll', downLoadMore, true);
})