首页跳转个人房源设置

src/components/checkGroup/checkBoxGroup.vue

@@ -24,7 +24,7 @@
 </template>
     
 <script setup>
-import { reactive ,ref,watchEffect,watch} from 'vue';
+import { reactive ,ref,watchEffect,watch,defineExpose} from 'vue';
 //props
 const props = defineProps({
     list: {
@@ -84,6 +84,16 @@ let closeBtn=()=>{
     closeSeach()
 }
 
+//设置参数
+let setCheckData=(data)=>{
+    console.log(checkList.list)
+    checkList.list=data
+}
+
+defineExpose({
+    setCheckData
+})
+
 </script>
 <style scoped>
 .seach-history-h {

src/components/indexSeachInfo/indexSeachInfo.vue

@@ -66,19 +66,22 @@ watchEffect(()=>{
 //
 let selectType = ref('')
 let selectData = reactive({data:[]})
+let nowSelectArea=reactive({data:{}})
 //点击选项
 let setSelectType = (num,data,item) => {
     if (seachType == 3) {
         if (num === selectType.value) {
             selectType.value = ''
+            nowSelectArea.data={}
         } else {
             selectType.value = num
             selectData.data=data
+            nowSelectArea.data={id:item.id,name:item.name}
         }
     }else if(seachType == 2){
-        props.checkBtn(item.id,'types')
+        props.checkBtn(item,'types')
     }else if(seachType == 1){
-        props.checkBtn(item.id,'school')
+        props.checkBtn(item,'school')
     }
 }
 //取消按钮
@@ -88,7 +91,7 @@ let closeSeach = () => {
 
 //确认按钮
 let selectSeach = (data) => {
-    props.checkBtn(data,'location')
+    props.checkBtn(data,'location',JSON.stringify(nowSelectArea.data))
     // console.log(data)
 }
 

src/components/seachModule/seachModule.vue

@@ -198,9 +198,9 @@ let setHotSeach=(item)=>{
 }
 
 //点击选项
-let checkBtn=(data,type)=>{
+let checkBtn=(data,type,areaItem)=>{
-    console.log(data,type)
+    console.log(data,type,areaItem)
-    getDataList(type,data)
+    getDataList(type,data,areaItem)
 }
 
 

src/components/selectTabBox/selectTabBox.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="dis-f s-w-100" :style="[routePath === '/seachPage'?'':'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>
@@ -34,7 +34,8 @@
                             </div>
                             <div class="hid-box">
                                 <checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
-                                    :closeSeach="closeSeach" :clearList="clearSelectTabCheck" :list="selectTabCheck.data">
+                                    :closeSeach="closeSeach" :clearList="clearSelectTabCheck" :list="selectTabCheck.data"
+                                    ref="checkBoxGroupInfo">
                                 </checkBoxGroup>
                             </div>
                         </div>
@@ -127,7 +128,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">
@@ -194,10 +195,10 @@
     <div class="btm-list" v-if="routePath !== '/seachPage'">
         <div class="dis-f al-item">
             共<span class="count">{{ count || 0 }}</span>条
-            {{routePath === '/personHousing'?
+            {{ routePath === '/personHousing' ?
-            '个人房源':routePath === '/intermediaryHousing'?
+                '个人房源' : routePath === '/intermediaryHousing' ?
-            '中介房源':routePath === '/needHousing'?
+                    '中介房源' : routePath === '/needHousing' ?
-            '求房源':''}} <span v-show="selectTabCheck.title && selectTabCheck.id">
+                        '求房源' : '' }} <span v-show="selectTabCheck.title && selectTabCheck.id">
                 &nbsp
                 |
                 &nbsp</span>
@@ -232,8 +233,8 @@
 </template>
   
 <script setup>
-import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive,defineExpose } from 'vue';
+import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive, defineExpose, nextTick } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRouter } from 'vue-router';
 import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
 import store from '../../store/index';
 
@@ -242,9 +243,11 @@ import store from '../../store/index';
 let configData = reactive({ data: {} })
 
 //监听路由
-const route = useRoute()
+const route = useRouter()
 let routePath = ref('')
-routePath.value = route.path
+let routeQuery = reactive({ data: {} })
+routePath.value = route.currentRoute.value.path
+routeQuery.data = route.currentRoute.value.query
 
 const { proxy } = getCurrentInstance()
 
@@ -262,14 +265,14 @@ let listSort = shallowReactive({
         { title: '最新发布', type: 'timestamp' },
         { title: '热门', type: 'hotnum' },
         { title: '价格从低到高', type: 'rentasc' },
-        { title: '价格从高到低',type:'rentdesc'}
+        { title: '价格从高到低', type: 'rentdesc' }
     ],
     checkType: 'timestamp',
     check: '最新发布'
 })
 
 //列表总数
-const count=inject('count')
+const count = inject('count')
 
 
 let list = shallowReactive([{
@@ -294,7 +297,9 @@ let setRegionList = () => {
         name: '不限',
         id: ''
     })
-    console.log(store.state.seachTypeData)
+    console.log('arr', JSON.stringify(list))
+    routerQuerySet()
+    // console.log(store.state.seachTypeData)
 }
 
 //按区域/学校选择的地区
@@ -393,8 +398,8 @@ let closeSeach = () => {
     showSelect.value = false
     clearSelectTabCheck.value = false
 }
-//确认按钮
+//根据地区id查找地区
-let selectSeach = (data = []) => {
+let seachAreaId = (data) => {
     let arr = []
     data.map(res => {
         selectTabCheck.data.map(item => {
@@ -403,7 +408,18 @@ let selectSeach = (data = []) => {
             }
         })
     })
-    selectData.data = arr
+    return arr
+}
+
+//设置当前地区选项
+let checkBoxGroupInfo = ref(null)
+let setCheckBoxData = (data) => {
+    checkBoxGroupInfo.value && checkBoxGroupInfo.value.setCheckData(data)
+}
+
+//确认按钮
+let selectSeach = (data = []) => {
+    selectData.data = seachAreaId(data)
     showSelect.value = false
     schoolSelectObj.id = ''
     schoolSelectObj.title = ''
@@ -513,29 +529,59 @@ let otherCheck = reactive({ list: [] })
 
 //设置其他
 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)
 }
 
 //清除筛选
-let cleanSelect=()=>{
+let cleanSelect = () => {
     cleanRent()
-    otherCheck['list']=[]
+    otherCheck['list'] = []
-    releaseObj.id=0
+    releaseObj.id = 0
-    gender.id=0
+    gender.id = 0
-    hireDate.id=0
+    hireDate.id = 0
-    hireDate.title=''
+    hireDate.title = ''
-    hireTypeObj.id=0
+    hireTypeObj.id = 0
-    hireTypeObj.title=''
+    hireTypeObj.title = ''
-    hireTypeObj.hireId='不限'
+    hireTypeObj.hireId = '不限'
     selectTabCheck.id = '';
     selectTabCheck.title = '不限'
     selectTabCheck.data = [];
     selectData.data = []
     schoolSelectObj.id = ''
     schoolSelectObj.title = '不限'
+    // setCheckData([])
+}
+
+//根据路由设置参数
+let setRouterQuerySet = ref(true)
+let routerQuerySet = () => {
+    console.log(setRouterQuerySet.value)
+    if (!setRouterQuerySet.value) return
+    //路由参数设置
+    if (Object.keys(routeQuery.data).length > 0) {
+        if (!routeQuery.data || routeQuery.data && !routeQuery.data.data) return
+        let data = JSON.parse(routeQuery.data.data)
+        if (routeQuery.data.type === 'school') {
+            selectPosition.value = 'school'
+            schoolSelectObj.id = data.id
+            schoolSelectObj.title = data.title
+        } else if (routeQuery.data.type === 'types') {
+            let type = data.id.toString().substring(0, 1)
+            hireTypeObj.id = data.id
+            hireTypeObj.title = data.name
+            hireTypeObj.hireId = type == 1 ? '合租' : type == 2 ? '整租' : '不限'
+        } else if (routeQuery.data.type === 'location') {
+            let areaItem = JSON.parse(routeQuery.data.areaItem)
+            console.log(areaItem)
+            selectTabCheck.id = areaItem.id;
+            selectTabCheck.title = areaItem.name
+            selectTabCheck.data = list[areaItem.id].data;
+            selectData.data = seachAreaId(data)
+            console.log(selectData.data)
+            setCheckBoxData(data)//设置地区选项
+        }
+    }
+    setRouterQuerySet.value = false
 }
 
 watchEffect(() => {
@@ -543,13 +589,10 @@ watchEffect(() => {
     if (configData.data) {
         hireTypeArr[1].hireType = setHireTypeArr(store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : [], 1)
         hireTypeArr[2].hireType = setHireTypeArr(store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : [], 2)
-        setRegionList()//设置地区数据
+        if (setRouterQuerySet.value) {
-        setSchoolData()//设置学校数据
+            setRegionList()//设置地区数据
-        // list
+            setSchoolData()//设置学校数据
-        // seachSchoolBtn.data = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
+        }
-        // hireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : []
-        // allHireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : []
-        // seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
     }
 })
 

src/views/HomeView.vue

@@ -356,12 +356,18 @@ let indexWaterfallBoxCheck = (res) => {
 }
 
 //跳转个人房源
-let personHouseingInfo = (type, data) => {
+let personHouseingInfo = (type, data,areaItem) => {
   router.push({
-    path: '/personHousing',
+    path: `/personHousing`,
     query: {
-      [type]: data
+      type,
+      data:JSON.stringify(data),
+      areaItem
     },
+    // params:{
+    //   type,
+    //   data:JSON.stringify(data)
+    // }
   })
 }
 

src/views/housingView/person.vue

@@ -136,10 +136,14 @@ let downLoadMore = () => {
 
 //listImg
 onMounted(() => {
-    console.log(router.params)
+    let {type,data}=router.currentRoute.value.query
-    console.log(router.currentRoute.value.query)
+    let typeData=JSON.parse(data)
-    if(Object.keys(router.currentRoute.value.query).length>0){
+    if(Object.keys(data).length>0){
-        seachSelectData.data={...router.currentRoute.value.query}
+        if(type!=='location'){
+           seachSelectData.data={[type]:typeData.id} 
+        }else{
+            seachSelectData.data={[type]:typeData} 
+        }
     }
     getDataList(seachSelectData.data)
     window.addEventListener('scroll', downLoadMore, true);