首页跳转个人房源设置

2023-07-20 12:21:39 +08:00 · 2023-07-20 12:21:39 +08:00 · daf15376e9
commit daf15376e9
parent 7d2ac77df4
6 changed files with 116 additions and 50 deletions
--- a/src/components/checkGroup/checkBoxGroup.vue
+++ b/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 {
--- a/src/components/indexSeachInfo/indexSeachInfo.vue
+++ b/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)
 }

--- a/src/components/seachModule/seachModule.vue
+++ b/src/components/seachModule/seachModule.vue
@ -198,9 +198,9 @@ let setHotSeach=(item)=>{
 }

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


--- a/src/components/selectTabBox/selectTabBox.vue
+++ b/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 === '/intermediaryHousing'?
-            '中介房源':routePath === '/needHousing'?
-            '求房源':''}} <span v-show="selectTabCheck.title && selectTabCheck.id">
+            {{ routePath === '/personHousing' ?
+                '个人房源' : routePath === '/intermediaryHousing' ?
+                    '中介房源' : routePath === '/needHousing' ?
+                        '求房源' : '' }} <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 { useRoute } from 'vue-router';
+import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive, defineExpose, nextTick } from 'vue';
+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
 }
-//确认按钮
-let selectSeach = (data = []) => {
+//根据地区id查找地区
+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']=[]
-    releaseObj.id=0
-    gender.id=0
-    hireDate.id=0
-    hireDate.title=''
-    hireTypeObj.id=0
-    hireTypeObj.title=''
-    hireTypeObj.hireId='不限'
+    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 = '不限'
+    // 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()//设置地区数据
-        setSchoolData()//设置学校数据
-        // list
-        // 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 : []
+        if (setRouterQuerySet.value) {
+            setRegionList()//设置地区数据
+            setSchoolData()//设置学校数据
+        }
    }
 })

--- a/src/views/HomeView.vue
+++ b/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)
+    // }
  })
 }

--- a/src/views/housingView/person.vue
+++ b/src/views/housingView/person.vue
@ -136,10 +136,14 @@ let downLoadMore = () => {

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