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

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;
     }
 }