个人/中介房源求房源页面

2023-07-18 16:30:48 +08:00
parent eb1bed2973
commit d1d1bf3e18
14 changed files with 561 additions and 157 deletions
--- a/src/components/biserialListItem/biserialListItem.vue
+++ b/src/components/biserialListItem/biserialListItem.vue
@@ -1,52 +1,60 @@
 <template>
    <div class="list-item" ref="list">
-        <div class="authentication-box dis-f al-item" v-if="data && data.verified == 1">
+        <div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1">
            <img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
            <img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
            <img src="../../assets/homeImage/authenticationText.png" class="text-img" alt="">
        </div>
        <div class="top-box">
            <div class="title-text">
-                {{ data && data.subject || '暂无标题' }}
+                {{ data && data.data && data.data.subject || '暂无标题' }}
            </div>
            <div class="mg-t-10 dis-f al-item-start jus-bet s-w-100">
                <div>
                    <div class="dis-f al-item">
                        <div class="tab-item first-tab">
-                            {{ data && data.gptype || '' }}
+                            {{ data && data.data && data.data.gptype || '' }}
                        </div>
-                        <div class="tab-item mg-l-8" v-if="listData && listData.data && listData.data.type[data && data.type]">
-                            {{ listData && listData.data && listData.data.type[data && data.type] || '' }}
+                        <div class="tab-item mg-l-8"
+                            v-if="listData && listData.data && listData.data.type[data && data.data && data.data.type]">
+                            {{ listData && listData.data && listData.data.type[data && data.data && data.data.type] || '' }}
                        </div>
-                        <div class="tab-item mg-l-8" v-if="data && data.elevator !== -1">
-                            {{ listData && listData.data && listData.data.elevator[data && data.elevator] || '' }}
+                        <div class="tab-item mg-l-8" v-if="data && data.data && data.data.elevator !== -1">
+                            {{ listData && listData.data && listData.data.elevator[data && data.data && data.data.elevator] ||
+                                '' }}
                        </div>
-                        <div class="tab-item mg-l-8" v-if="data && data.sunshinearea !== -1">
-                            {{ listData && listData.data && listData.data.sunshinearea[data && data.sunshinearea] || '' }}
+                        <div class="tab-item mg-l-8" v-if="data && data.data && data.data.sunshinearea !== -1">
+                            {{ listData && listData.data && listData.data.sunshinearea[data && data.data &&
+                                data.data.sunshinearea] || '' }}
                        </div>
-                        <div class="tab-item mg-l-8" v-if="listData && listData.data && listData.data.gender[data && data.gender]">
-                            {{ listData && listData.data && listData.data.gender[data && data.gender] || '' }}
+                        <div class="tab-item mg-l-8"
+                            v-if="listData && listData.data && listData.data.gender[data && data.data && data.data.gender]">
+                            {{ listData && listData.data && listData.data.gender[data && data.data && data.data.gender] || ''
+                            }}
                        </div>
                    </div>
                    <div class="address-text dis-f al-item">
                        <img src="../../assets/homeImage/addMarker.png" class="img" alt="">
                        <span>{{
-                            location && location.data && location.data[1] ? `${location && location.data && location.data[data && data.location && data.location.substring(0, 1)]} > ${location && location.data[data && data.location]}` : ''
+                            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]}` : ''
                        }}</span>
                    </div>
                    <div class="price-text dis-f" style="align-items: end;">
                        <span class="unit">HK$</span>
-                        <span class="price">{{ data && data.rent }}</span>
+                        <span class="price">{{ data && data.data && data.data.rent }}</span>
                        <span>/月</span>
-                        <span class="time" v-show="data && data.rentalduration != 0">[ 租期{{ data && data.rentalduration }}{{
-                            data && data.rentalperiod }} ]</span>
+                        <span class="time" v-show="data && data.data && data.data.rentalduration != 0">[ 租期{{ data &&
+                            data.data && data.data.rentalduration }}{{
+        data && data.data && data.data.rentalperiod }} ]</span>
                    </div>
                </div>
                <div class="img">
                    <div>
-                        <img :src="data && data.ispic ? data && data.imageurl : data && data.isvideo ? data && data.imageurl : ''"
-                            @load="loadFinish" class="img " alt="">
-                        <div class="s-img dis-f jus-x al-item" v-if="data && data.isvideo">
+                        <img :src="data && data.data && data.data.ispic ? data && data.data.imageurl : data && data.data && data.data.isvideo ? data && data.data && data.data.imageurl : ''"
+                            @load="loadFinish" @error="loadFinish" class="img " alt="">
+                        <div class="s-img dis-f jus-x al-item" v-if="data && data.data && data.data.isvideo">
                            <img src="../../assets/homeImage/videoIcon.svg" class="img" alt="">
                        </div>
                    </div>
@@ -55,22 +63,25 @@
            <img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath === '/personHousing'" alt="">
            <img src="../../assets/homeImage/intermediaryCorner.svg" v-if="routePath === '/intermediaryHousing'"
                class="tab-img" alt="">
+            <img src="../../assets/homeImage/needHousingCorner.svg" v-if="routePath === '/needHousing'"
+                class="tab-img" alt="">
        </div>
        <div class="btm-box dis-f al-item">
-            <img :src="data && data.avatar" class="user-img" alt="">
-            <span class="user-name">{{ data && data.author }}</span>
-            <div class="btn" v-if="data && data.isintermediary !== 1 && !data.intermediary_text">{{
-                listData && listData.data && listData.data.intermediary[data && data.intermediary] }}</div>
-            <div class="btn" v-if="data && data.isintermediary !== 1 && data.intermediary_text">{{ data && data.intermediary_text
+            <img :src="data && data.data && data.data.avatar" class="user-img" alt="">
+            <span class="user-name">{{ data && data.data && data.data.author }}</span>
+            <div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && !data.data.intermediary_text">{{
+                listData && listData.data && listData.data.intermediary[data && data.data && data.data.intermediary] }}</div>
+            <div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && data.intermediary_text">{{ data &&
+                data.data.intermediary_text
            }}</div>
-            <img src="../../assets/homeImage/intermediaryTabImg.png" v-if="data && data.isintermediary == 1"
+            <img src="../../assets/homeImage/intermediaryTabImg.png" v-if="data && data.data && data.data.isintermediary == 1"
                class="intermediary-tab-img" alt="">
        </div>
    </div>
 </template>
  
 <script setup>
-import { ref, defineProps, reactive,onMounted,getCurrentInstance } from "vue";
+import { ref, defineProps, reactive, onMounted, getCurrentInstance, watchEffect } from "vue";
 import { useRoute, useRouter } from 'vue-router';
 import store from '../../store/index';
 let props = defineProps({
@@ -80,18 +91,21 @@ let props = defineProps({
    imgLoad: {
        type: Function
    },
-    listId:{
-        type:[String,Number]
+    listId: {
+        type: [String, Number]
    }
 })
-let data = {}
-data = props.item
+let data = reactive({ data: {} })
+watchEffect(() => {
+    data.data = props.item
+})

-let listId=props.listId
+
+let listId = props.listId
 let imgRef = null
-let loadFinish=()=>{
-    let height=imgRef.ctx.$refs.list.offsetHeight
-    props.imgLoad(data.id,listId,height)
+let loadFinish = () => {
+    let height = imgRef.ctx.$refs.list.offsetHeight
+    props.imgLoad(data.id, listId, height)
 }

 //监听路由
@@ -107,7 +121,7 @@ location.data = store.state.indexData && store.state.indexData.config && store.s
 let listData = reactive({ data: {} })
 listData.data = store.state.indexData && store.state.indexData.config

-onMounted(()=>{
+onMounted(() => {
    imgRef = getCurrentInstance()
 })

@@ -128,7 +142,8 @@ img {
 .jus-bet {
    justify-content: space-between;
 }
-.al-item-start{
+
+.al-item-start {
    align-items: flex-start;
 }

@@ -352,7 +367,8 @@ img {
            text-align: center;
        }
    }
-}</style>
+}
+</style>


  
--- a/src/components/checkGroup/checkBoxGroup.vue
+++ b/src/components/checkGroup/checkBoxGroup.vue
@@ -6,7 +6,8 @@
                    <img src="../../assets/homeImage/topTitleIcon.svg"
                        v-show="!checkList.list || (checkList.list && !checkList.list.length)" class="img" alt="">
                    <div class="none-btn" v-show="(checkList.list && checkList.list.length)"></div>
-                    <span :class="[(checkList.list && checkList.list.length) ? 'none-title' : 'title']">不限</span>
+                    <span :class="[(checkList.list && checkList.list.length) ? 'none-title' : 'title']">不限
+                    </span>
                </div>
                <div style="padding-top:10px;">
                    <el-checkbox-group v-model="checkList.list">
@@ -47,6 +48,10 @@ const props = defineProps({
        default:()=>{
            return ()=>{}
        }
+    },
+    clearList:{
+        type:Boolean,
+        default:true
    }
 })
 let list =reactive([])
@@ -64,7 +69,7 @@ watchEffect(() => {
    list.splice(0,list.length)
    list.push(...props.list)
    // console.log(show)
-    if(show){
+    if(show&&props.clearList){
        checkList.list=[]
    }
 })
@@ -75,7 +80,7 @@ watch(()=>checkList.list,(nval,avl)=>{

 //取消
 let closeBtn=()=>{
-    checkList.list.splice(0,checkList.list.length)
+    // checkList.list.splice(0,checkList.list.length)
    closeSeach()
 }

--- a/src/components/indexSeachInfo/indexSeachInfo.vue
+++ b/src/components/indexSeachInfo/indexSeachInfo.vue
@@ -10,7 +10,7 @@
                    :class="[{ 'pad-15': seachType === '3' }]">
                    <div @click="setSelectType(i + 1,item.data)" v-for="(item, i) in btn.data" :key="i" :class="[
                        { 'btn': seachType === '1' },
-                        { 'mg-l-17': seachType === '1' && i % 4 !== 0 },
+                        { 'mg-l-17': seachType === '1' && i % 5 !== 0 },
                        { 'seach-long-btn btn': seachType === '2' },
                        { 'mg-l-17': seachType === '2' && i % 3 !== 0 },
                        { 'select-btn': seachType === '3' },
@@ -196,7 +196,7 @@ let selectSeach = (data) => {
    }

    .btn {
-        width: 117px;
+        width: 90px;
        height: 32px;
        background: inherit;
        background-color: rgba(246, 246, 246, 1);
--- a/src/components/pageTopBar/pageTopBar.vue
+++ b/src/components/pageTopBar/pageTopBar.vue
@@ -33,7 +33,7 @@
          <el-carousel :interval="5000" arrow="always" height="330" style="height:330px;">
            <el-carousel-item v-for="item in bannerLists.data" :key="item.feedId">
              <div style="width:100%;height:100%;" class="dis-f jus-x al-item">
-                <img class="carousel-img" :src="item.imageurl" alt="">
+                <img class="carousel-img" :src="item.imageurl" alt="" @click="openInfo(item)">
              </div>
            </el-carousel-item>
          </el-carousel>
@@ -123,6 +123,10 @@ let changeTabBtnType = (item) => {
  })
 }

+let openInfo=(data)=>{
+  window.open(data.url)
+}
+
 //监听路由
 const route = useRoute()
 let routePath = ref('')
--- a/src/components/seachModule/seachModule.vue
+++ b/src/components/seachModule/seachModule.vue
@@ -12,7 +12,7 @@
                            <div class="triangle"></div>
                        </div>
                        <div class="dis-f al-item pos-r">
-                            <el-input v-model="seachAllType.seachValue" placeholder="搜索房源或输入房源ID" @keyup.enter='seachList'
+                            <el-input v-model="seachAllType.keyword" 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" @click="seachList">
                                <img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
@@ -24,8 +24,8 @@
                                        <div class="title">
                                            历史搜索
                                        </div>
-                                        <div class="info-box" @click="setSeachVal(item)">
-                                            <div v-for="(item, i) in historyArr.data" :key="i" class="btn">
+                                        <div class="info-box">
+                                            <div v-for="(item, i) in historyArr.data" :key="i" class="btn" @click="setSeachVal(item)">
                                                {{ item }}
                                            </div>
                                        </div>
@@ -35,7 +35,7 @@
                                            热门推荐
                                        </div>
                                        <div class="info-box">
-                                            <div v-for="(item, i) in hotArr.data" :key="i" class="btn">
+                                            <div v-for="(item, i) in hotArr.data" :key="i" class="btn" @click="setHotSeach(item)">
                                                {{ item }}
                                            </div>
                                        </div>
@@ -105,6 +105,12 @@ 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: [] });//学校地区
@@ -114,9 +120,8 @@ let seachArea = {};//区域找房
 let historyArr = reactive({ data: [] })//历史查找记录
 let hotArr = reactive({ data: [] })
 let seachAllType = reactive({
-    seachValue: '',
-    location: [],
-    types: ''
+    keyword: '',
+    location: []
 })


@@ -151,14 +156,12 @@ watchEffect(() => {
 historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []

 //搜索数据
-let seachList = () => {
-    console.log()
-    let data = {
-        searchid: seachAllType.seachValue,
-        types: ''
+let seachList = (item) => {
+    if(historyArr.data.indexOf(seachAllType.keyword)===-1){
+        historyArr.data.push(seachAllType.keyword)
    }
    localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
-    getDataList(data)
+    getDataList(seachAllType)
 }

 //设置搜索数据
@@ -173,13 +176,21 @@ let setSeachConditions = (type, data) => {
        data.indexOf('iselevator')!==-1?seachAllType['iselevator']=1:seachAllType['iselevator']=0
        data.indexOf('issunshinearea')!==-1?seachAllType['issunshinearea']=1:seachAllType['issunshinearea']=0
    }
-    console.log(seachAllType)
+    getDataList(seachAllType)
 }

 //点击历史搜索记录
 let setSeachVal = (item) => {
-    seachAllType.seachValue = item
-    seachList()
+    seachAllType.keyword = item
+    getDataList(seachAllType)
+}
+
+//点击热门地区
+let setHotSeach=(item)=>{
+    seachAllType.keyword = item
+    if(historyArr.data.indexOf(item)===-1)historyArr.data.push(item)
+    localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
+    getDataList(seachAllType)
 }


--- a/src/components/selectTabBox/selectTabBox.vue
+++ b/src/components/selectTabBox/selectTabBox.vue
@@ -18,7 +18,7 @@
                            <div class="check-none dis-f al-item" :class="{ 'check-text': selectTabCheck.id === item.id }"
                                @click="setSelectData(item.id, item.data, item.name)" v-for="(item, i) in list" :key="i">
                                <div class="dis-f al-item">{{ item.name }} <div class="dis-f al-item"
-                                        v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp > &nbsp
+                                        v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp>&nbsp
                                        <div :class="{ 'check-data': selectData.data && selectData.data.length > 0 }">
                                            {{
                                                selectData.data && selectData.data.length === 0 ? '不限' :
@@ -34,7 +34,7 @@
                            </div>
                            <div class="hid-box">
                                <checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
-                                    :closeSeach="closeSeach" :list="selectTabCheck.data">
+                                    :closeSeach="closeSeach" :clearList="clearSelectTabCheck" :list="selectTabCheck.data">
                                </checkBoxGroup>
                            </div>
                        </div>
@@ -44,7 +44,7 @@
                                    class="img" alt="">
                            </div>
                            <div class="right-btn" @click="nextSchoolData">
-                                <img :src="schoolPages === shcoolData.length-1 ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
+                                <img :src="schoolPages === shcoolData.length - 1 ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
                                    class="img" alt="">
                            </div>
                            <el-carousel :autoplay="false" arrow="never" :loop="false" height="50px"
@@ -69,10 +69,10 @@
                            style="position: relative;padding: 0;height:30px;width: 420px;">
                            <div class="check-none dis-f al-item btn"
                                :class="[{ 'btn-check': selectTabCheck.id === item.id }]" style="margin-right:10px;"
-                                @click="setSelectData(item.id, item.data, item.title)" v-for="(item, i) in list" :key="i">
-                                <div class="dis-f al-item">{{ item.title }} <div class="dis-f al-item"
-                                        v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp > &nbsp
-                                        <div>
+                                @click="setSelectData(item.id, item.data, item.name)" v-for="(item, i) in list" :key="i">
+                                <div class="dis-f al-item">{{ item.name }} <div class="dis-f al-item"
+                                        v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp>&nbsp
+                                        <div :class="{'select-num':selectData.data && selectData.data.length}">
                                            {{
                                                selectData.data && selectData.data.length === 0 ? '不限' :
                                                selectData.data && selectData.data.length
@@ -86,14 +86,14 @@
                            </div>
                            <div class="hid-box">
                                <checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
-                                    :closeSeach="closeSeach" :list="selectTabCheck.data">
+                                    :closeSeach="closeSeach" :clearList="clearSelectTabCheck" :list="selectTabCheck.data">
                                </checkBoxGroup>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
-            <div class="dis-f pad-t-b-15 bor-b-das" :class="{ 'housing-pd': routePath === '/needHousing' }">
+            <div class="dis-f pad-t-b-15 bor-b-das" :class="{ 'housing-pd pd-t-25': routePath === '/needHousing' }">
                <div class="tab-title">{{ routePath === '/needHousing' ? '求租方式' : '出租方式' }}</div>
                <div class="tab-text dis-f al-item" style="padding-bottom:0;">
                    <div class="dis-f" v-for="(item, i) in hireTypeArr" :key="i">
@@ -127,7 +127,7 @@
                    </div>
                </div>
            </div>
-            <div class="dis-f al-item" style="padding:25px 0;">
+            <div class="dis-f al-item" style="padding:30px 0;">
                <div class="tab-title">{{ routePath === '/needHousing' ? '租金预算' : '租金' }}</div>
                <div class="dis-f al-item rent-box jus-bet">
                    <div class="dis-f al-item">
@@ -136,7 +136,7 @@
                        <input type="text" class="input" v-model="rentObj.max" @blur="setRent">
                        <span class="unit-box">HK$/月</span>
                    </div>
-                    <div class="clean-btn dis-f al-item jus-x" v-show="rentObj.min || rentObj.max">
+                    <div class="clean-btn dis-f al-item jus-x" v-show="rentObj.min || rentObj.max" @click="cleanRent">
                        <div class="img-box dis-f jus-x al-item">
                            <img class="img" src="../../assets/homeImage/closeIcon.svg" alt="">
                        </div>
@@ -213,9 +213,9 @@
                </span>
                <template #dropdown>
                    <el-dropdown-menu class="pd-10 el-dropdown-menu">
-                        <el-dropdown-item v-for="(items, j) in listSort.type" :key="j" @click="listSortCheck(items)">
-                            <div class="dropdown-text"
-                                :class="{ 'dropdown-check-text': listSort.checkType === items.type }">{{
+                        <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>
@@ -229,7 +229,7 @@
 </template>
  
 <script setup>
-import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject,shallowReactive } from 'vue';
+import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive } from 'vue';
 import { useRoute } from 'vue-router';
 import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
 import store from '../../store/index';
@@ -241,12 +241,12 @@ let configData = reactive({ data: {} })
 const { proxy } = getCurrentInstance()

 const props = defineProps({
-    setSeachCondition:{
-        type:Function
+    setSeachCondition: {
+        type: Function
    }
 })

-let setSeachCondition=props.setSeachCondition
+let setSeachCondition = props.setSeachCondition

 //最新发布选项
 let listSort = shallowReactive({
@@ -276,14 +276,14 @@ let list = shallowReactive([{
    data: []
 }])
 //设置区域数据
-let setRegionList=()=>{
-    let arr=store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
-    arr.map((res,i)=>{
-           list[i]=res
+let setRegionList = () => {
+    let arr = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
+    arr.map((res, i) => {
+        list[i] = res
    })
    list.unshift({
-        name:'不限',
-        id:''
+        name: '不限',
+        id: ''
    })
 }

@@ -322,41 +322,52 @@ let setSchoolData = () => {
 let setSchoolObj = (obj) => {
    schoolSelectObj.id = obj.id
    schoolSelectObj.title = obj.title
-    setSeachCondition('school',obj.id)
+    setSeachCondition('school', obj.id)
 }

 //学校轮播组件
 let prevSchoolData = () => {
-    if(schoolPages.value===0)return
+    if (schoolPages.value === 0) return
    const schoolData = proxy.$refs.schoolData
    schoolPages.value--
    schoolData.prev()
 }

 let nextSchoolData = () => {
-    if(schoolPages.value === shcoolData.length-1)return
+    if (schoolPages.value === shcoolData.length - 1) return
    const schoolData = proxy.$refs.schoolData
    schoolPages.value++
    schoolData.next()
 }

 //点击区域/学校选项
+let clearSelectTabCheck=ref(true)
 let setSelectData = (id, data = [], title) => {
+    showSelect.value = true
+    console.log(id ,selectTabCheck.id, data, title)
+    
+    if (id === selectTabCheck.id){
+        clearSelectTabCheck.value=false
+        return
+    } 
+    clearSelectTabCheck.value=true
    selectTabCheck.id = id;
    selectTabCheck.title = title
    selectTabCheck.data = data;
    selectData.data = []
-    showSelect.value = true
+    if(id===''){
+        setSeachCondition('location', [])
+    }
 }
 //取消按钮
 let closeSeach = () => {
-    selectTabCheck.id = ''
-    selectData.data = []
+    console.log(selectTabCheck,selectData)
    showSelect.value = false
+    clearSelectTabCheck.value=false
 }
 //确认按钮
 let selectSeach = (data = []) => {
-    let arr=[]
+    let arr = []
    data.map(res => {
        selectTabCheck.data.map(item => {
            if (res === item.id) {
@@ -366,7 +377,7 @@ let selectSeach = (data = []) => {
    })
    selectData.data = arr
    showSelect.value = false
-    setSeachCondition('location',data)
+    setSeachCondition('location', data)
 }


@@ -384,6 +395,7 @@ let deleteSelect = (id) => {
 let listSortCheck = (item) => {
    listSort.checkType = item.type
    listSort.check = item.title
+    setSeachCondition('orderby', item.type)
 }


@@ -409,7 +421,7 @@ let setHireTypeArr = (type, id) => {
 let hireTypeObj = reactive({ id: '', title: '', hireId: '不限' })//出租方式所选

 let setHireId = (title) => {
-    if(hireTypeObj.hireId != title){
+    if (hireTypeObj.hireId != title) {
        hireTypeObj.id = ''
        hireTypeObj.title = ''
    }
@@ -419,32 +431,39 @@ let setHireId = (title) => {
 let dropdownCommand = (obj) => {
    hireTypeObj.id = obj.id
    hireTypeObj.title = obj.title
-    setSeachCondition('types',obj.id)
+    setSeachCondition('types', obj.id)
 }

 //租金
 let rentObj = reactive({ min: '', max: '' })

-let setRent=()=>{
-    setSeachCondition('rent',rentObj)
+let setRent = () => {
+    setSeachCondition('rent', rentObj)
+}
+
+//清空租金
+let cleanRent=()=>{
+    rentObj.min=''
+    rentObj.max=''
+    setSeachCondition('rent', rentObj)
 }

 //租期
 let hireData = reactive([{ title: '不限', id: 0 }, { title: '一年以上', id: 1 }, { title: '低于一年', id: 2 }])
 let hireDate = reactive({ id: 0, title: '' })
 //设置租期
-let setHireDate = (item)=>{
+let setHireDate = (item) => {
    hireDate.id = item.id
-    setSeachCondition('rentalduration',item.id)
+    setSeachCondition('rentalduration', item.id)
 }

 //性别
 let genderData = reactive([{ title: '不限', id: 0 }, { title: '女', id: 1 }, { title: '男', id: 2 }])
 let gender = reactive({ id: 0 })
 //设置性别
-let setGender=(item)=>{
+let setGender = (item) => {
    gender.id = item.id
-    setSeachCondition('gender',item.id)
+    setSeachCondition('gender', item.id)
 }

 //发布时间
@@ -452,9 +471,9 @@ let releaseTime = reactive([{ title: '不限', id: 0 }, { title: '三天', id: '
 let releaseObj = reactive({ id: 0 })

 //设置发布时间
-let setReleaseObj=(item)=>{
+let setReleaseObj = (item) => {
    releaseObj.id = item.id
-    setSeachCondition('publish',item.id)
+    setSeachCondition('publish', item.id)
 }

 //其他
@@ -462,11 +481,11 @@ let otherData = reactive([{ title: '认证房源', id: 'isverified' }, { title:
 let otherCheck = reactive({ list: [] })

 //设置其他
-let setOtherCheck=(data)=>{
+let setOtherCheck = (data) => {
    // data.indexOf('isverified')!==-1?setSeachCondition('isverified',1):setSeachCondition('isverified',0)
    // data.indexOf('iselevator')!==-1?setSeachCondition('iselevator',1):setSeachCondition('iselevator',0)
    // data.indexOf('issunshinearea')!==-1?setSeachCondition('issunshinearea',1):setSeachCondition('issunshinearea',0)
-    setSeachCondition('',data)
+    setSeachCondition('', data)
 }

 watchEffect(() => {
@@ -535,6 +554,9 @@ img {
 .housing-pd {
    padding: 5px 0 25px 0;
 }
+.pd-t-25{
+    padding-top:25px;
+}

 .housing-pd-25 {
    padding: 0 25px;
@@ -757,7 +779,7 @@ img {
                .img {
                    width: 10px;
                    height: 10px;
-                    margin-left: 5px;
+                    margin-left: 10px;
                }
            }
        }
@@ -857,7 +879,7 @@ img {
        .img {
            width: 10px;
            height: 10px;
-            margin-left: 5px;
+            margin-left: 10px;
        }
    }

@@ -870,6 +892,18 @@ img {
        border: 1px solid #50E3C2;
        background: #eefcf9;
    }
+
+    .select-num {
+        padding:0px 10px;
+        background: inherit;
+        background-color: rgba(80, 227, 194, 1);
+        border: none;
+        border-radius: 13px;
+        -moz-box-shadow: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+        color: #FFFFFF;
+    }
 }

 .rent-box {
@@ -893,6 +927,7 @@ img {
        font-size: 13px;
        letter-spacing: normal;
        color: #333333;
+        cursor: pointer;

        .img-box {
            width: 14px;