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

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;