添加鼠标移动到可点模块 鼠标样式改变 全局新增加载动画

src/components/biserialListItem/biserialListItem.vue

@@ -19,31 +19,44 @@
                             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.data && data.data.elevator !== -1">
-                            {{ listData && listData.data && listData.data.elevator[data && data.data && data.data.elevator] ||
+                        <div class="tab-item mg-l-8" v-if="data && data.data && data.data.elevator !== -1&&data.data.elevator">
+                            {{ listData && listData.data && listData.data.elevator[data && data.data && data.data.elevator]
+                                ||
                                 '' }}
                         </div>
-                        <div class="tab-item mg-l-8" v-if="data && data.data && data.data.sunshinearea !== -1">
+                        <div class="tab-item mg-l-8" v-if="data && data.data && data.data.sunshinearea !== -1&&data.data.sunshinearea !== 0&&data.data.sunshinearea">
                             {{ 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.data && data.data.gender]">
-                            {{ listData && listData.data && listData.data.gender[data && data.data && data.data.gender] || ''
+                            v-if="listData && listData.data && listData.data.gender[data && data.data && data.data.gender]&&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" v-if="data && data.data && data.data.location">
                         <img src="../../assets/homeImage/addMarker.png" class="img" alt="">
-                        <span>{{
+                        <span v-if="!Array.isArray(data.data.location)">{{
                             location && location.data && location.data[1] ? `${location && location.data &&
-                            location.data[data && data.data && data.data.location&&data.data.location.substring(0, 1)]} > ${location &&
-                            location.data[data && data.data && data.data.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>
+                        <span v-if="Array.isArray(data.data.location)">{{
+                            location && location.data && location.data[data && data.data &&
+                            data.data.location && data.data.location[0].substring(0, 1)]
+                        }}>
+                            <span v-for="(item,i) in data.data.location">
+                                {{ location &&
+                                    location.data[item] }}
+                            </span>
+                        </span>
                     </div>
                     <div class="price-text dis-f" style="align-items: end;">
                         <span class="unit">HK$</span>
-                        <span class="price">{{ data && data.data && data.data.rent }}</span>
+                        <span class="price" v-if="!Array.isArray(data && data.data &&data.data.rent)">{{ data && data.data && data.data.rent }}</span>
+                        <span class="price" v-if="Array.isArray(data && data.data &&data.data.rent)">{{ data && data.data && data.data.rent[0] }}~{{ data && data.data && data.data.rent[1] }}</span>
                         <span>/月</span>
                         <span class="time" v-show="data && data.data && data.data.rentalduration != 0">[ 租期{{ data &&
                             data.data && data.data.rentalduration }}{{
@@ -51,7 +64,7 @@
                     </div>
                 </div>
                 <div class="img">
-                    <div>
+                    <div class="dis-f">
                         <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">
@@ -63,19 +76,20 @@
             <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="">
+            <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.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>
+                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.data && data.data.isintermediary == 1"
-                class="intermediary-tab-img" alt="">
+            <img src="../../assets/homeImage/intermediaryTabImg.png"
+                v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="">
         </div>
     </div>
 </template>
@@ -104,7 +118,8 @@ watchEffect(() => {
 let listId = props.listId
 let imgRef = null
 let loadFinish = () => {
-    let height = imgRef.ctx.$refs.list.offsetHeight
+    let height = imgRef.ctx.$refs&&imgRef.ctx.$refs.list&&imgRef.ctx.$refs.list.offsetHeight
+    console.log(data.id, listId, height)
     props.imgLoad(data.id, listId, height)
 }
 
@@ -198,6 +213,7 @@ img {
     box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
     position: relative;
     margin-bottom: 20px;
+    cursor: pointer;
 
     .mg-t-10 {
         margin-top: 10px;

src/components/seachModule/seachModule.vue

@@ -25,7 +25,8 @@
                                             历史搜索
                                         </div>
                                         <div class="info-box">
-                                            <div v-for="(item, i) in historyArr.data" :key="i" class="btn" @click="setSeachVal(item)">
+                                            <div v-for="(item, i) in historyArr.data" :key="i" class="btn"
+                                                @click="setSeachVal(item)">
                                                 {{ item }}
                                             </div>
                                         </div>
@@ -35,7 +36,8 @@
                                             热门推荐
                                         </div>
                                         <div class="info-box">
-                                            <div v-for="(item, i) in hotArr.data" :key="i" class="btn" @click="setHotSeach(item)">
+                                            <div v-for="(item, i) in hotArr.data" :key="i" class="btn"
+                                                @click="setHotSeach(item)">
                                                 {{ item }}
                                             </div>
                                         </div>
@@ -64,13 +66,15 @@
                         </div>
                     </div>
                     <div class="seach-info-box dis-f" v-if="routePath === '/'">
-                        <seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length" :checkBtn="checkBtn">
+                        <seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length"
+                            :checkBtn="checkBtn">
                         </seachInfo>
-                        <seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length" :checkBtn="checkBtn"></seachInfo>
-                        <seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data" :checkBtn="checkBtn"
-                            v-if="seachArea.data.length"></seachInfo>
-                        <seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data" :checkBtn="checkBtn"
-                            v-if="allHireType.data.length"></seachInfo>
+                        <seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length"
+                            :checkBtn="checkBtn"></seachInfo>
+                        <seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data"
+                            :checkBtn="checkBtn" v-if="seachArea.data.length"></seachInfo>
+                        <seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data"
+                            :checkBtn="checkBtn" v-if="allHireType.data.length"></seachInfo>
                     </div>
                     <!--  -->
                     <div
@@ -87,7 +91,7 @@
 import { ref, watchEffect, reactive, defineProps } from 'vue';
 import seachInfo from '../indexSeachInfo/indexSeachInfo.vue';
 import selectTabBox from "../selectTabBox/selectTabBox.vue";
-import { useRoute } from 'vue-router';
+import { useRouter } from 'vue-router';
 import store from '../../store/index';
 import api from "../../utils/api";
 
@@ -102,10 +106,10 @@ let getDataList = props.getDataList
 //搜索框
 let historyShow = ref(false);
 let setHistoryShow = () => {
-    if(historyShow.value){
+    if (historyShow.value) {
         setTimeout(() => {
             historyShow.value = !historyShow.value
-        },500);
+        }, 500);
         return
     }
     historyShow.value = !historyShow.value
@@ -136,9 +140,10 @@ let getLocationData = (data) => {
 }
 
 //监听路由
-const route = useRoute()
+const route = useRouter()
 let routePath = ref('')
-routePath.value = route.path
+routePath.value = route.currentRoute.value.path
+console.log(route)
 
 watchEffect(() => {
     seachSchoolBtn.data = store.state.seachTypeData[0] ? store.state.seachTypeData[0].where : []
@@ -154,11 +159,17 @@ historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []
 
 //搜索数据
 let seachList = (item) => {
-    if(historyArr.data.indexOf(seachAllType.keyword)===-1){
+    if (historyArr.data.indexOf(seachAllType.keyword) === -1) {
         historyArr.data.push(seachAllType.keyword)
     }
     localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
-    getDataList(seachAllType)
+    route.push({
+        path: '/seachPage',
+        query: {
+            keyword:seachAllType.keyword
+        }
+    })
+    // getDataList(seachAllType)
 }
 
 //设置搜索数据
@@ -166,41 +177,42 @@ let setSeachConditions = (type, data) => {
     if (type === 'rent') {
         seachAllType['rent_min'] = data.min
         seachAllType['rent_max'] = data.max
-    } else if(type!==''){
+    } 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
+    } 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 === 'school') {
+        seachAllType.location = []
     }
-    if(type==='location'){
-        seachAllType.school=''
+    if (type === 'location') {
+        seachAllType.school = ''
     }
-    console.log('seachAllType',seachAllType)
+    console.log('seachAllType', seachAllType)
     getDataList(seachAllType)
 }
 
 //点击历史搜索记录
 let setSeachVal = (item) => {
     seachAllType.keyword = item
-    getDataList(seachAllType)
+    seachList()
+    // getDataList(seachAllType)
 }
 
 //点击热门地区
-let setHotSeach=(item)=>{
+let setHotSeach = (item) => {
     seachAllType.keyword = item
-    if(historyArr.data.indexOf(item)===-1)historyArr.data.push(item)
+    if (historyArr.data.indexOf(item) === -1) historyArr.data.push(item)
     localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
     getDataList(seachAllType)
 }
 
 //点击选项
-let checkBtn=(data,type,areaItem)=>{
-    console.log(data,type,areaItem)
-    getDataList(type,data,areaItem)
+let checkBtn = (data, type, areaItem) => {
+    console.log(data, type, areaItem)
+    getDataList(type, data, areaItem)
 }
 
 
@@ -438,6 +450,5 @@ defineExpose({
             flex-wrap: wrap;
         }
     }
-}
-</style>
+}</style>
   

src/components/seachPage/input.vue

@@ -71,7 +71,8 @@
                     </div>
                 </div>
                 <div v-show="tabType === 'apartment'" :class="{ 'show-box-pd': !showSelectModule }">
-                    <apartmentSelect @handleTransfer="setSeachConditions" :seachPage="false" ref="apartmentSelectInfo"></apartmentSelect>
+                    <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 }"
@@ -146,11 +147,16 @@
     </div>
 </template>
 <script setup>
-import { reactive, ref, shallowReactive, defineProps, watchEffect } from 'vue'
+import { reactive, ref, shallowReactive, defineProps, watchEffect, defineExpose } from 'vue'
 import selectTabBox from "../selectTabBox/selectTabBox.vue";
 import apartmentSelect from '../apartment/seach.vue'
 import store from '../../store/index';
 import api from '@/utils/api';
+import { useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus'
+
+//路由
+const route = useRouter()
 
 const props = defineProps({
     getDataList: {
@@ -164,22 +170,22 @@ const props = defineProps({
 //选项卡
 let tabType = ref('person')
 let selectTabBoxInfo = ref(null)//个人/中介筛选实例
-let apartmentSelectInfo=ref(null)//公寓筛选实例
+let apartmentSelectInfo = ref(null)//公寓筛选实例
 //设置请求数据
 let selectPage = (type) => {
-    if(type==='apartment'){
+    if (type === 'apartment') {
         selectTabBoxInfo.value.cleanSelect()//清空筛选数据
-    }else{
+    } else {
         apartmentSelectInfo.value.cleanSelect()
     }
     //清空数据
-    if(type==='apartment')
-    seachAllType = reactive({
-        keyword: '',
-        location: [],
-        searchid: '',
-        intermediary: 0
-    })
+    if (type === 'apartment')
+        seachAllType = reactive({
+            keyword: '',
+            location: [],
+            searchid: '',
+            intermediary: 0
+        })
 
     tabType.value = type
     seachAllType['tabType'] = type
@@ -197,6 +203,7 @@ let getDataList = props.getDataList
 
 //搜索内容
 let seachVal = ref('')
+seachVal.value = route.currentRoute.value.query.keyword
 //搜索key
 let seachKey = reactive({ key: {} })
 
@@ -250,7 +257,10 @@ let searchInit = (data) => {
             // console.log(seachAllType)
             getDataList(seachAllType, tabType.value)
         } else {
-
+            ElMessage({
+                message: res.message,
+                center: true,
+            })
         }
     })
 }
@@ -313,7 +323,9 @@ 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)
 })
-
+defineExpose({
+    searchInit
+})
 
 </script>
 <style scoped>
@@ -397,6 +409,7 @@ img {
             font-weight: 400;
             color: #555555;
             font-size: 15px;
+            cursor: pointer;
 
             .icon-img {
                 width: 6px;
@@ -568,6 +581,7 @@ img {
             height: 45px;
             position: absolute;
             border-radius: 16px 16px 0 0;
+            cursor: pointer;
         }
     }
 }
@@ -659,6 +673,7 @@ img {
         font-style: normal;
         font-size: 16px;
         color: #000000;
+        cursor: pointer;
 
         .img {
             width: 20px;
@@ -696,6 +711,7 @@ img {
         border-color: rgba(235, 235, 235, 1);
         border-radius: 155px;
         margin-left: 10px;
+        cursor: pointer;
 
         .img {
             width: 24px;
@@ -706,6 +722,7 @@ img {
     .icon {
         width: 20px;
         height: 20px;
+        cursor: pointer;
     }
 }
 

src/components/selectTabBox/selectTabBox.vue

@@ -297,7 +297,7 @@ let setRegionList = () => {
         name: '不限',
         id: ''
     })
-    console.log('arr', JSON.stringify(list))
+    // console.log('arr', JSON.stringify(list))
     routerQuerySet()
     // console.log(store.state.seachTypeData)
 }
@@ -1086,6 +1086,7 @@ img {
             width: 8px;
             height: 8px;
             margin-left: 8px;
+            cursor: pointer;
         }
     }