搜索页

src/components/biserialListItem/biserialListItem.vue

@@ -33,11 +33,11 @@
                             }}
                         </div>
                     </div>
-                    <div class="address-text dis-f al-item">
+                    <div class="address-text dis-f al-item" v-if="data && data.data && data.data.location">
                         <img src="../../assets/homeImage/addMarker.png" class="img" alt="">
                         <span>{{
                             location && location.data && location.data[1] ? `${location && location.data &&
-                            location.data[data && data.data && data.data.location.substring(0, 1)]} > ${location &&
+                            location.data[data && data.data && data.data.location&&data.data.location.substring(0, 1)]} > ${location &&
                             location.data[data && data.data && data.data.location]}` : ''
                         }}</span>
                     </div>

src/components/seachModule/seachModule.vue

@@ -97,9 +97,6 @@ const props = defineProps({
     }
 })
 
-//数据包
-let configData = store.state.indexData.config
-
 let getDataList = props.getDataList
 
 //搜索框

src/components/seachPage/input.vue

@@ -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>
-                    <div class="top-btn dis-f jus-x al-item">
+                        个人房源 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 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>
-                    <div class="top-btn dis-f jus-x al-item">
+                        中介房源 82
+                    </div>
+                    <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{
+        .select-top-btn-bg {
-            bottom:0;
+            background: #fff !important;
-            left:0;
+            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;
+        }
+
+        .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;
+        }
+
+        .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;
                 }
-        .second{
-            left:180px;
-            bottom:0;
             }
-        .third{
-            left:360px;
-            bottom:0;
         }
 
         .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>
   

src/components/selectTabBox/selectTabBox.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="dis-f s-w-100" style="border-bottom:1px solid #ebebeb;">
+    <div class="dis-f s-w-100" :style="[routePath === '/seachPage'?'':'border-bottom:1px solid #ebebeb;']">
         <div class="select-box s-w-50 bor-r">
             <div class="dis-f bor-b-das" :class="{ 'al-item housing-pd': routePath === '/needHousing' }">
                 <div class="tab-title">{{ routePath === '/needHousing' ? '目标区域' : '地理位置' }}</div>
@@ -127,7 +127,7 @@
                 </div>
             </div>
             <div class="dis-f al-item" style="padding:30px 0;">
-                <div class="tab-title">{{ routePath === '/needHousing' ? '租金预算' : '租金' }}</div>
+                <div class="tab-title" >{{ routePath === '/needHousing' ? '租金预算' : '租金' }}</div>
                 <div class="dis-f al-item rent-box jus-bet">
                     <div class="dis-f al-item">
                         <input type="text" class="input" v-model="rentObj.min" @blur="setRent">
@@ -191,9 +191,13 @@
             </div>
         </div>
     </div>
-    <div class="btm-list">
+    <div class="btm-list" v-if="routePath !== '/seachPage'">
         <div class="dis-f al-item">
-            共<span class="count">{{ count || 0 }}</span>条个人房源 <span v-show="selectTabCheck.title && selectTabCheck.id">
+            共<span class="count">{{ count || 0 }}</span>条
+            {{routePath === '/personHousing'?
+            '个人房源':routePath === '/intermediaryHousing'?
+            '中介房源':routePath === '/needHousing'?
+            '求房源':''}} <span v-show="selectTabCheck.title && selectTabCheck.id">
                 &nbsp
                 |
                 &nbsp</span>
@@ -228,7 +232,7 @@
 </template>
   
 <script setup>
-import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive } from 'vue';
+import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive,defineExpose } from 'vue';
 import { useRoute } from 'vue-router';
 import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
 import store from '../../store/index';
@@ -237,6 +241,11 @@ import store from '../../store/index';
 //数据包
 let configData = reactive({ data: {} })
 
+//监听路由
+const route = useRoute()
+let routePath = ref('')
+routePath.value = route.path
+
 const { proxy } = getCurrentInstance()
 
 const props = defineProps({
@@ -250,17 +259,18 @@ let setSeachCondition = props.setSeachCondition
 //最新发布选项
 let listSort = shallowReactive({
     type: [
-        { title: '最新发布', type: 'new' },
+        { title: '最新发布', type: 'timestamp' },
-        { title: '热门', type: 'hot' },
+        { title: '热门', type: 'hotnum' },
-        { title: '价格从低到高', type: 'sort' },
+        { title: '价格从低到高', type: 'rentasc' },
-        { title: '加个从高到低' }
+        { title: '价格从高到低',type:'rentdesc'}
     ],
-    checkType: 'new',
+    checkType: 'timestamp',
     check: '最新发布'
 })
 
 //列表总数
-const count = inject('count')
+const count=inject('count')
+
 
 let list = shallowReactive([{
     name: '不限',
@@ -276,7 +286,7 @@ let list = shallowReactive([{
 }])
 //设置区域数据
 let setRegionList = () => {
-    let arr = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
+    let arr = store.state.seachTypeData[1] ? JSON.parse(JSON.stringify(store.state.seachTypeData[1].where)) : []
     arr.map((res, i) => {
         list[i] = res
     })
@@ -284,6 +294,7 @@ let setRegionList = () => {
         name: '不限',
         id: ''
     })
+    console.log(store.state.seachTypeData)
 }
 
 //按区域/学校选择的地区
@@ -402,12 +413,6 @@ let selectSeach = (data = []) => {
     setSeachCondition('location', data)
 }
 
-
-//监听路由
-const route = useRoute()
-let routePath = ref('')
-routePath.value = route.path
-
 //底部删除按钮
 let deleteSelect = (id) => {
     selectData.data.splice(id, 1)
@@ -514,6 +519,25 @@ let setOtherCheck = (data) => {
     setSeachCondition('', data)
 }
 
+//清除筛选
+let cleanSelect=()=>{
+    cleanRent()
+    otherCheck['list']=[]
+    releaseObj.id=0
+    gender.id=0
+    hireDate.id=0
+    hireDate.title=''
+    hireTypeObj.id=0
+    hireTypeObj.title=''
+    hireTypeObj.hireId='不限'
+    selectTabCheck.id = '';
+    selectTabCheck.title = '不限'
+    selectTabCheck.data = [];
+    selectData.data = []
+    schoolSelectObj.id = ''
+    schoolSelectObj.title = '不限'
+}
+
 watchEffect(() => {
     configData.data = store.state.indexData.config
     if (configData.data) {
@@ -528,6 +552,10 @@ watchEffect(() => {
         // seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
     }
 })
+
+defineExpose({
+    cleanSelect
+})
 </script>
 <script>
 export default {

src/utils/api.js

@@ -21,6 +21,9 @@ export default{
     },
     getLists:(params={})=>{//获取搜索数据  个人/中介/求房源
         return axios.post('/tenement/pc/api/lists',params)
+    },
+    apartment:(params={})=>{//获取公寓列表
+        return axios.get('/tenement/pc/api/apartment',params)
     }
     
 }

src/views/HomeView.vue

@@ -543,6 +543,7 @@ img {
 
   .img-box:hover .img-list {
     display: block;
+    cursor: pointer;
   }
 }
 
@@ -634,6 +635,7 @@ img {
         -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
         box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
         margin-bottom: 10px;
+        cursor: pointer;
       }
 
       .img {

src/views/housingView/person.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <pageTopBar></pageTopBar>
-        <seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
+        <seachModule :getDataList="setSeachSelectData"></seachModule>
         <div class="dis-f jus-x al-item">
             <div class="body-maxWidth mg-t-35">
                 <div class="dis-f jus-bet" v-show="dataList.data && dataList.data.length > 0">

src/views/seachIndex.vue

@@ -1,11 +1,11 @@
 <template>
     <div>
         <pageTopBar></pageTopBar>
-        <inputModule></inputModule>
+        <inputModule :getDataList="setSeachSelectData" :count="dataCount"></inputModule>
-        <!-- <seachModule :getDataList="setSeachSelectData"></seachModule> -->
         <div class="dis-f jus-x al-item">
             <div class="body-maxWidth mg-t-35">
-                <div class="dis-f jus-bet" v-show="dataList.data && dataList.data.length > 0">
+                <div class="dis-f jus-bet"
+                    v-show="dataList.data && dataList.data.length > 0 && seachSelectData.data.intermediary !== ''">
                     <div ref="list">
                         <biserialItem v-for="(item, i) in pageList['1']" :key="i" :item="item" :imgLoad="watchImgLoad"
                             listId="1"></biserialItem>
@@ -15,6 +15,9 @@
                             listId="2"></biserialItem>
                     </div>
                 </div>
+                <div v-show="seachSelectData.data.intermediary === ''" ref="gridContainer">
+                    <apartment-item v-for="item in listApartment" :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></noList>
                 </div>
@@ -27,25 +30,28 @@
 <script setup>
 import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick } from 'vue'
 import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
-// import seachModule from "../components/seachModule/seachModule.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';
 
 //获取数据
-let pages = ref(1)
+let pages = ref(1)//页数
-let dataList = reactive({ data: [], count: 0 })
+let dataList = reactive({ data: [], count: 0 })//个人/中介数据
-let dataCount = ref(0)
+let dataCount = ref(0)//数据数量
-let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })
+let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })//双列瀑布数据
-let seachSelectData = reactive({ data: {} })
+let seachSelectData = reactive({ data: {} })//搜索数据
-let loading = ref(false)
+let loading = ref(true)//开关
+let listApartment = ref([])//公寓数据
+let masonryInstance = null//瀑布实例
 provide('count', dataCount)
 
 //保存搜索设置
-let setSeachSelectData = (data) => {
+let setSeachSelectData = (data, type) => {
     pages.value = 1
 
     // if(data.location.length>0){
@@ -55,9 +61,9 @@ let setSeachSelectData = (data) => {
         ...data
     }
     loading.value = true
-    console.log('seachSelectData',seachSelectData.data)
+    // console.log('seachSelectData', seachSelectData.data, type)
-    return
+    // return
-    getDataList(seachSelectData.data)
+    getDataList(seachSelectData.data, type)
 }
 
 //初始化列表参数
@@ -70,19 +76,28 @@ let setInitial = () => {
 
 //获取搜索数据
 let getDataList = (data) => {
+    if (!loading.value) return
     let postData = {
         page: pages.value,
-        intermediary:0,
+        intermediary: 0,
         ...data
     }
-    api.getLists(postData).then(res => {
+    loading.value = false
+    let seachApi = null
+    if (seachSelectData.data.tabType !== 'apartment') {
+        seachApi = api.getLists(postData)
+    } else {
+        seachApi = api.apartment(postData)
+    }
+    seachApi.then(res => {
         if (res.code === 200) {
+            console.log(res.data)
             loading.value = true
             dataList.data = res.data.data
-            if (res.data.data.length === 0) {
+            if (res.data.data.length < 20) {
                 loading.value = false
-                return
             }
+            if (seachSelectData.data.tabType !== 'apartment') {
                 if (pages.value === 1) {
                     setInitial()
                 }
@@ -93,6 +108,16 @@ let getDataList = (data) => {
                     pageList['1'].push(dataList.data[0])
                     pageList['2'].push(dataList.data[1])
                 })
+            } else {
+                let data = res.data
+                listApartment.value = listApartment.value.concat(data.data)
+                nextTick(() => {
+                    masonryInstance.reloadItems();
+                    masonryInstance.layout();
+                })
+            }
+
+
         } else {
             // ElMessage(res.message)
         }
@@ -127,10 +152,15 @@ let downLoadMore = () => {
     })
 }
 
+const gridContainer = ref(null);
 //listImg
 onMounted(() => {
-    // getDataList()
+    masonryInstance = new Masonry(gridContainer.value, {
-    // window.addEventListener('scroll', downLoadMore, true);
+        itemSelector: '.item',
+        gutter: 20
+    });
+    getDataList()
+    window.addEventListener('scroll', downLoadMore, true);
 })
 
 onBeforeUnmount(() => {