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

2023-07-20 16:26:46 +08:00 · 2023-07-20 16:26:46 +08:00 · 60f0f45def
commit 60f0f45def
parent 416b5232ae
15 changed files with 281 additions and 111 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -1,5 +1,5 @@
 <template>
-  <router-view />
+  <router-view/>
 </template>
 <script setup>
 import { useRouter } from 'vue-router'
--- a/src/components/biserialListItem/biserialListItem.vue
+++ b/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;
--- a/src/components/seachModule/seachModule.vue
+++ b/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>
  
--- a/src/components/seachPage/input.vue
+++ b/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;
    }
 }

--- a/src/components/selectTabBox/selectTabBox.vue
+++ b/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;
        }
    }

--- a/src/main.js
+++ b/src/main.js
@ -22,7 +22,7 @@ import {
  ElMessage,
  ElSkeleton,
  ElSkeletonItem,
-  ElBreadcrumb
+  ElBreadcrumb,
  // 其他需要的组件
 } from 'element-plus'

--- a/src/store/index.js
+++ b/src/store/index.js
@ -9,6 +9,7 @@ export default createStore({
    wechat: {}, // 微信号 二维码等数据
    nav: [],  // 顶部的导航数据
    apartment: {}, // 公寓筛选的字段
+    routeList:[],//路由列表
  },
  getters: {

--- a/src/utils/axios.js
+++ b/src/utils/axios.js
@ -1,6 +1,8 @@
 import axios from 'axios';
 import QS from 'qs';
 import { goTologin } from '@/utils/util.js'
+import {showFullScreenLoading,tryHideFullScreenLoading} from './loading'
+
 axios.defaults.baseURL = 'https://app.gter.net'
 // axios.defaults.baseURL = '/index'
 axios.defaults.emulateJSON = true
@ -8,6 +10,7 @@ axios.defaults.withCredentials = true

 axios.interceptors.request.use( //响应拦截
    async config => {
+        showFullScreenLoading()
        // 开发时登录用的，可以直接替换小程序的 authorization
        // if (process.env.NODE_ENV == "development") config['headers']['authorization'] = "x2mmnl9grt51bpplj2k6ioiuummzhnw3"
        if (process.env.NODE_ENV == "development") config['headers']['authorization'] = "0h870ovk2xckoqfsh8a3t3sg4sg5z7eg"
@ -19,9 +22,9 @@ axios.interceptors.request.use( //响应拦截
 // 响应拦截器
 axios.interceptors.response.use(
    response => {
+        tryHideFullScreenLoading()
        if (response.status === 200) return Promise.resolve(response); //进行中        
        else return Promise.reject(response); //失败       
-
    },
    // 服务器状态码不是200的情况    
    error => {
--- a/src/utils/loading.js
+++ b/src/utils/loading.js
@ -0,0 +1,32 @@
+import { ElLoading } from 'element-plus'
+let loading;
+function startLoading() {
+    loading = ElLoading.service({
+        lock: true,
+        text: 'Loading',
+        background: 'rgba(0, 0, 0, 0.7)',
+    })
+}
+// 关闭loading事件
+function endLoading() {
+    loading.close()
+}
+
+// 默认状态
+let needLoadingRequestCount = 0
+
+// 开启loading
+export function showFullScreenLoading() {
+    if (needLoadingRequestCount === 0) {
+        startLoading()
+    }
+    needLoadingRequestCount++
+}
+// 取消loading
+export function tryHideFullScreenLoading() {
+    if (needLoadingRequestCount <= 0) return
+    needLoadingRequestCount--
+    if (needLoadingRequestCount === 0) {
+        endLoading()
+    }
+}
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -9,9 +9,6 @@
        <div v-for="(item, i) in apartmentData.data" :key="i">
          <listItem :style="{ 'margin-left': i === 0 ? 0 : '12px' }" :data="item" v-if="i < 4"></listItem>
        </div>
-        <!-- <listItem style="margin-left:12px;"></listItem>
-        <listItem style="margin-left:12px;"></listItem>
-        <listItem style="margin-left:12px;"></listItem> -->
      </div>
    </div>
    <!-- 科普 -->
@ -25,9 +22,11 @@
                  <img src="../assets/homeImage/informationO.png" class="img" alt="">
                  <span class="title">攻略</span>
                </div>
-                <div v-for="(item, i) in informationData" :key="i" class="dis-f al-item list-li">
+                <div v-for="(item, i) in informationData && informationData[0].list" :key="i" class="dis-f al-item list-li">
                  <div class="list-mark"></div>
-                  <span>{{ item }}</span>
+                  <div class="text-s" @click="informationDataOpen(item)">
+                    <span class="text">{{ item.title }}</span>
+                  </div>
                </div>
              </div>
              <div class="list-box">
@ -35,9 +34,11 @@
                  <img src="../assets/homeImage/informationT.png" class="img" alt="">
                  <span class="title">科普</span>
                </div>
-                <div v-for="(item, i) in informationData" :key="i" class="dis-f al-item list-li">
+                <div v-for="(item, i) in informationData && informationData[1].list" :key="i" class="dis-f al-item list-li">
                  <div class="list-mark"></div>
-                  <span>{{ item }}</span>
+                  <div class="text-s" @click="informationDataOpen(item)">
+                    <span class="text">{{ item.title }}</span>
+                  </div>
                </div>
              </div>
            </div>
@ -200,11 +201,16 @@ import footerTool from '@/components/footer/footer.vue'
 import { useRouter } from 'vue-router'
 import store from '../store/index';
 import api from "../utils/api";
+import { ElMessage } from 'element-plus'

 // 
-let informationData = [
-  '123456', '2456789', '3456789', '47894564', '545649879987'
-]
+let informationData = ref([
+  {}, {}
+])
+let informationDataOpen = (item) => {
+  window.open(item.url)
+}
+
 let ListSelectBtn = reactive({ data: [], selectType: 'recommend' })

 //首页数据
@ -235,7 +241,7 @@ watchEffect(() => {

    })
  }
-
+  informationData.value = store.state.indexData.articleList
 })

 //公寓数据
@ -311,6 +317,11 @@ let getRecommendList = () => {
        loadMore.value = false
        loadText.value = '到底了'
      }
+    } else {
+      ElMessage({
+        message: res.message,
+        center: true,
+      })
    }
  })
 }
@ -356,12 +367,12 @@ let indexWaterfallBoxCheck = (res) => {
 }

 //跳转个人房源
-let personHouseingInfo = (type, data,areaItem) => {
+let personHouseingInfo = (type, data, areaItem) => {
  router.push({
    path: `/personHousing`,
    query: {
      type,
-      data:JSON.stringify(data),
+      data: JSON.stringify(data),
      areaItem
    },
    // params:{
@ -438,7 +449,7 @@ img {

 .information-box {
  width: 836px;
-  height: 329px;
+  min-height: 329px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  border: none;
@ -492,6 +503,22 @@ img {
    .list-li {
      margin-top: 20px;
      cursor: pointer;
+
+      .text-s {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        .text {
+          font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+          font-weight: 400;
+          font-style: normal;
+          font-size: 16px;
+          text-align: left;
+          letter-spacing: normal;
+          color: #333333;
+        }
+      }
    }

    .list-mark {
@ -708,4 +735,5 @@ img {
  font-size: 16px;
  color: #7F7F7F;
  text-align: left;
-}</style>
+}
+</style>
--- a/src/views/detail.vue
+++ b/src/views/detail.vue
@ -4,7 +4,17 @@
        <div class="dis-f jus-x al-item">
            <div class="body-maxWidth mg-t-35">
                <div class="title-top-box">
-123
+                    <div class="breadcrumb-box">
+                        <el-breadcrumb :separator-icon="ArrowRight">
+                            <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
+                            <el-breadcrumb-item>promotion management</el-breadcrumb-item>
+                            <el-breadcrumb-item>promotion list</el-breadcrumb-item>
+                            <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
+                        </el-breadcrumb>
+                    </div>
+                    <div>
+
+                    </div>
                </div>
            </div>
        </div>
@ -59,7 +69,7 @@ img {
    justify-content: space-between;
 }

-.title-top-box{
+.title-top-box {
    width: 1200px;
    height: 186px;
    background: inherit;
@ -74,6 +84,10 @@ img {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
    font-size: 14px;
    transform: translateY(-38px);
+
+    .breadcrumb-box {
+        padding: 20px;
+    }
 }
 </style>
  
--- a/src/views/housingView/intermediary.vue
+++ b/src/views/housingView/intermediary.vue
@ -35,6 +35,7 @@ import noList from "../../components/public/empty-duck.vue";
 import circleBtn from '@/components/public/circle-btn.vue'
 import api from "../../utils/api";
 import tool from '../../toolJs/downLoadMore'
+import { ElMessage } from 'element-plus'

 //获取数据
 let pages = ref(1)
@ -70,15 +71,15 @@ let getDataList = (data) => {
    let postData = {
        page: pages.value,
        intermediary: 1,
+        limit:20,
        ...data
    }
    api.getLists(postData).then(res => {
        if (res.code === 200) {
            loading.value = true
            dataList.data = res.data.data
-            if (res.data.data.length === 0) {
+            if(res.data.count<20){
                loading.value = false
-                return
            }
            if (pages.value === 1) {
                setInitial()
@ -91,7 +92,10 @@ let getDataList = (data) => {
                pageList['2'].push(dataList.data[1])
            })
        } else {
-            // ElMessage(res.message)
+            ElMessage({
+                message: res.message,
+                center: true,
+            })
        }
    })
 }
@ -99,10 +103,12 @@ let getDataList = (data) => {
 //添加数据
 let addListData = () => {
    let num = null
-    if (pageList.tab >= 18){
-        loading.value = true
+    if (pageList.tab >= (dataList.count>20?20-2:dataList.count-2)) {
+        if(dataList.count>20){
+            loading.value = true
+        }
        return
-    } 
+    }
    pageList.tab++
    if (pageList.height1 > pageList.height2) {
        num = 2
--- a/src/views/housingView/needHousing.vue
+++ b/src/views/housingView/needHousing.vue
@ -36,6 +36,7 @@ import noList from "../../components/public/empty-duck.vue";
 import circleBtn from '@/components/public/circle-btn.vue'
 import api from "../../utils/api";
 import tool from '../../toolJs/downLoadMore'
+import { ElMessage } from 'element-plus'

 //获取数据
 let pages = ref(1)
@ -77,15 +78,15 @@ let getDataList = (data) => {
    let postData = {
        page: pages.value,
        intermediary: 0,
+        limit:20,
        ...data
    }
    api.getLists(postData).then(res => {
        if (res.code === 200) {
            loading.value = true
            dataList.data = res.data.data
-            if (res.data.data.length === 0) {
+            if(res.data.count<20){
                loading.value = false
-                return
            }
            if (pages.value === 1) {
                setInitial()
@ -98,7 +99,10 @@ let getDataList = (data) => {
                pageList['2'].push(dataList.data[1])
            })
        } else {
-            // ElMessage(res.message)
+            ElMessage({
+                message: res.message,
+                center: true,
+            })
        }
    })
 }
@ -106,10 +110,12 @@ let getDataList = (data) => {
 //添加数据
 let addListData = () => {
    let num = null
-    if (pageList.tab >= 18){
-        loading.value = true
+    if (pageList.tab >= (dataList.count>20?20-2:dataList.count-2)) {
+        if(dataList.count>20){
+            loading.value = true
+        }
        return
-    } 
+    }
    pageList.tab++
    if (pageList.height1 > pageList.height2) {
        num = 2
--- a/src/views/housingView/person.vue
+++ b/src/views/housingView/person.vue
@ -37,6 +37,7 @@ import circleBtn from '@/components/public/circle-btn.vue'
 import api from "../../utils/api";
 import tool from '../../toolJs/downLoadMore'
 import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'

 //路由
 const router = useRouter()
@ -82,9 +83,12 @@ let getDataList = (data) => {
    api.getLists(postData).then(res => {
        if (res.code === 200) {
            dataList.data = res.data.data
-            if (res.data.data.length === 0) {
+            // if (res.data.data.length === 0) {
+            //     loading.value = false
+            //     return
+            // }
+            if(res.data.count<20){
                loading.value = false
-                return
            }
            if (pages.value === 1) {
                setInitial()
@ -92,12 +96,16 @@ let getDataList = (data) => {
            pageList.tab = 1
            dataList.count = res.data.count
            dataCount.value = res.data.count
+            
            nextTick(() => {
                pageList['1'].push(dataList.data[0])
                pageList['2'].push(dataList.data[1])
            })
        } else {
-            // ElMessage(res.message)
+            ElMessage({
+                message: res.message,
+                center: true,
+            })
        }
    })
 }
@ -105,10 +113,12 @@ let getDataList = (data) => {
 //添加数据
 let addListData = () => {
    let num = null
-    if (pageList.tab >= 18){
-        loading.value = true
+    if (pageList.tab >= (dataList.count>20?20-2:dataList.count-2)) {
+        if(dataList.count>20){
+            loading.value = true
+        }
        return
-    } 
+    }
    pageList.tab++
    if (pageList.height1 > pageList.height2) {
        num = 2
@ -137,7 +147,9 @@ let downLoadMore = () => {
 //listImg
 onMounted(() => {
    let {type,data}=router.currentRoute.value.query
-    let typeData=JSON.parse(data)
+    let typeData=null
+    if(data)typeData=JSON.parse(data)
+    
    if(Object.keys(data).length>0){
        if(type!=='location'){
           seachSelectData.data={[type]:typeData.id} 
--- a/src/views/seachIndex.vue
+++ b/src/views/seachIndex.vue
@ -1,7 +1,7 @@
 <template>
    <div>
        <pageTopBar></pageTopBar>
-        <inputModule :getDataList="setSeachSelectData" :count="dataCount"></inputModule>
+        <inputModule :getDataList="setSeachSelectData" :count="dataCount" ref="inputModuleInfo"></inputModule>
        <div class="dis-f jus-x al-item">
            <div class="body-maxWidth mg-t-35">
                <div class="dis-f jus-bet"
@ -38,6 +38,12 @@ import tool from '../toolJs/downLoadMore'
 import inputModule from '../components/seachPage/input.vue'
 import apartmentItem from '@/components/public/apartment-item.vue';
 import Masonry from 'masonry-layout';
+import { useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus'
+
+//路由
+const route = useRouter()
+let routeQuery = reactive({ data: {} })

 //获取数据
 let pages = ref(1)//页数
@ -80,6 +86,7 @@ let getDataList = (data) => {
    let postData = {
        page: pages.value,
        intermediary: 0,
+        limit:20,
        ...data
    }
    loading.value = false
@ -94,7 +101,7 @@ let getDataList = (data) => {
            console.log(res.data)
            loading.value = true
            dataList.data = res.data.data
-            if (res.data.data.length < 20) {
+            if (res.data.count < 20) {
                loading.value = false
            }
            if (seachSelectData.data.tabType !== 'apartment') {
@ -119,7 +126,10 @@ let getDataList = (data) => {


        } else {
-            // ElMessage(res.message)
+            ElMessage({
+                message: res.message,
+                center: true,
+            })
        }
    })
 }
@ -127,10 +137,13 @@ let getDataList = (data) => {
 //添加数据
 let addListData = () => {
    let num = null
-    if (pageList.tab >= 18){
-        loading.value = true
+    console.log(pageList.tab , dataList.count)
+    if (pageList.tab >= (dataList.count>20?20-2:dataList.count-2)) {
+        if(dataList.count>20){
+            loading.value = true
+        }
        return
-    } 
+    }
    pageList.tab++
    if (pageList.height1 > pageList.height2) {
        num = 2
@ -149,12 +162,15 @@ let watchImgLoad = (id, listId, height) => {
 //加载更多
 let downLoadMore = () => {
    tool.loadMore(() => {
-        if (!loading.value||dataList.data.length==0) return
+        console.log(loading.value)
+        if (!loading.value) return
        pages.value++
        getDataList(seachSelectData.data)
    })
 }

+
+let inputModuleInfo=ref(null)
 const gridContainer = ref(null);
 //listImg
 onMounted(() => {
@ -162,7 +178,14 @@ onMounted(() => {
        itemSelector: '.item',
        gutter: 20
    });
-    getDataList()
+    routeQuery.data = route.currentRoute.value.query
+    console.log(routeQuery)
+    if(routeQuery.data.keyword){
+        inputModuleInfo.value.searchInit(routeQuery.data.keyword)
+        route.currentRoute.value.query={}
+    }else{
+        getDataList()
+    }
    window.addEventListener('scroll', downLoadMore, true);
 })