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-13 15:07:31 +08:00
parent c8f24835d3
commit f5e9e2ec62
7 changed files with 189 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,9 +12,9 @@
<div class="triangle"></div>
</div>
<div class="dis-f al-item pos-r">
<el-input v-model="seachValue" placeholder="搜索房源或输入房源ID" @blur="setHistoryShow"
<el-input v-model="seachValue" placeholder="搜索房源或输入房源ID" @keyup.enter='seachList' @blur="setHistoryShow"
@focus="setHistoryShow" style="height:48px;width:460px;"></el-input>
<div class="seach-btn dis-f al-item jus-x">
<div class="seach-btn dis-f al-item jus-x" @click="seachList">
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
搜索
</div>
@@ -25,8 +25,8 @@
历史搜索
</div>
<div class="info-box">
<div v-for="(item, i) in historyArr" :key="i" class="btn">
{{ item.title }}
<div v-for="(item, i) in historyArr.data" :key="i" class="btn">
{{ item }}
</div>
</div>
</div>
@@ -35,8 +35,8 @@
热门推荐
</div>
<div class="info-box">
<div v-for="(item, i) in historyArr" :key="i" class="btn">
{{ item.title }}
<div v-for="(item, i) in hotArr.data" :key="i" class="btn">
{{ item }}
</div>
</div>
</div>
@@ -57,10 +57,10 @@
</div>
</div>
<div class="seach-info-box dis-f">
<seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1"></seachInfo>
<seachInfo title="合租" seachType="2" :btn="hireType.data"></seachInfo>
<seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data"></seachInfo>
<seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data"></seachInfo>
<seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length"></seachInfo>
<seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length"></seachInfo>
<seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data" v-if="seachArea.data.length"></seachInfo>
<seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data" v-if="allHireType.data.length"></seachInfo>
</div>
<!-- -->
<!-- <div>
@@ -89,6 +89,12 @@ const props = defineProps({
default: function () {
return []
}
},
hotList:{
type:Array,
default:function(){
return []
}
}
})
//搜索框
@@ -101,23 +107,27 @@ let seachSchoolBtn=reactive({data:[]});//学校地区
let hireType={};//整租
let allHireType={};//合租
let seachArea={};//区域找房
let historyArr =reactive({data:[]})//历史查找记录
let hotArr =reactive({data:[]})
watchEffect(() => {
seachSchoolBtn.data = props.list[0] ? props.list[0].where : []
hireType.data = props.list[2] ? props.list[2].where[0].data : []
allHireType.data = props.list[2] ? props.list[2].where[1].data : []
seachArea.data = props.list[1] ? props.list[1].where : []
hotArr.data=props.hotList
})
let historyArr = [
{ title: '有阳台' },
{ title: '有洗衣机' },
{ title: '城大' },
{ title: '城大' },
{ title: '城大' },
{ title: '城大' },
{ title: '城大' },
{ title: '城大' },
]
//获取历史搜索记录
historyArr.data=JSON.parse(localStorage.getItem('historyArr'))||[]
//搜索数据
let seachList=()=>{
localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
}
defineExpose({
historyShow,
seachValue
@@ -186,6 +196,7 @@ defineExpose({
-webkit-box-shadow: none;
box-shadow: none;
margin-left: 20px;
cursor: pointer;
.text-img {
width: 100px;
@@ -245,6 +256,7 @@ defineExpose({
.btn {
margin: 20px 30px 0 0;
cursor: pointer;
}
}
}
@@ -290,6 +302,7 @@ defineExpose({
border-right: 0px;
border-radius: 0 8px 8px 0;
line-height: 48px;
cursor: pointer;
}
.img {
@@ -307,6 +320,7 @@ defineExpose({
.add-btn {
background: rgba(253, 218, 85, 1);
margin-left: 20px;
cursor: pointer;
}
.tool-btn {