修改搜索失败还能下拉刷新

src/views/seachIndex.vue

@@ -1,73 +1,70 @@
 <template>
     <div class="box-min-1200-src">
         <pageTopBar></pageTopBar>
-        <inputModule :getDataList="setSeachSelectData" :count="dataCount" ref="inputModuleInfo"></inputModule>
+        <inputModule :getDataList="setSeachSelectData" :count="dataCount" ref="inputModuleInfo" :isNoGetData="isNoGetData"></inputModule>
         <div class="dis-f jus-x al-item">
             <div class="body-maxWidth mg-t-35">
-                <div class="body-maxWidth"
-                    v-show="dataList.data && dataList.data.length > 0 && seachSelectData.data.tabType !== 'apartment' && seachSelectData.data.intermediary !== ''"
-                    ref="list">
+                <div class="body-maxWidth" v-show="dataList.data && dataList.data.length > 0 && seachSelectData.data.tabType !== 'apartment' && seachSelectData.data.intermediary !== ''" ref="list">
                     <biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
                 </div>
-                <div class="body-maxWidth" v-show="seachSelectData.data && seachSelectData.data.tabType === 'apartment' && dataList.data && dataList.data.length > 0"
-                    ref="gridContainer">
-                    <apartment-item v-for="item in listApartment" :item="item"></apartment-item>
+                <div class="body-maxWidth" v-show="seachSelectData.data && seachSelectData.data.tabType === 'apartment' && dataList.data && dataList.data.length > 0" ref="gridContainer">
+                    <apartment-item v-for="(item, index) in listApartment" :key="index" :item="item"></apartment-item>
                 </div>
                 <div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
                     <noList hintText="暂无搜索结果" hintTextTwo="建议更换搜索关键词，或放宽筛选条件"></noList>
                 </div>
             </div>
         </div>
-        <loadMoreText :loadText="loadingText" v-show="dataList.data && dataList.data.length>0"></loadMoreText>
+        <loadMoreText :loadText="loadingText" v-show="dataList.data && dataList.data.length > 0"></loadMoreText>
         <listBtmPrompt></listBtmPrompt>
         <footerTool></footerTool>
     </div>
     <back-to-top></back-to-top>
 </template>
-  
+
 <script setup>
-import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick } from 'vue'
-import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
-import biserialItem from '../components/biserialListItem/biserialListItem.vue'
-import listBtmPrompt from "../components/public/have-questions.vue";
-import noList from "../components/public/empty-duck.vue";
-import api from "../utils/api";
-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'
-import footerTool from '@/components/footer/footer.vue'
-import loadMoreText from '../components/loadMore/loadMoreText.vue'
-import backToTop from '@/components/public/backToTop.vue'
+import {reactive, onMounted, ref, provide, onBeforeUnmount, nextTick} from "vue"
+import pageTopBar from "../components/pageTopBar/pageTopBar.vue"
+import biserialItem from "../components/biserialListItem/biserialListItem.vue"
+import listBtmPrompt from "../components/public/have-questions.vue"
+import noList from "../components/public/empty-duck.vue"
+import api from "../utils/api"
+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"
+import footerTool from "@/components/footer/footer.vue"
+import loadMoreText from "../components/loadMore/loadMoreText.vue"
+import backToTop from "@/components/public/backToTop.vue"
 
 //路由
 const route = useRouter()
-let routeQuery = reactive({ data: {} })
+let routeQuery = reactive({data: {}})
 
 //获取数据
-let pages = ref(1)//页数
-let dataList = reactive({ data: [], count: 0 })//个人/中介数据
-let dataCount = ref(0)//数据数量
+let pages = ref(1) //页数
+let dataList = reactive({data: [], count: 0}) //个人/中介数据
+let dataCount = ref(0) //数据数量
 let pageList = ref([])
 // let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })//双列瀑布数据
-let seachSelectData = reactive({ data: {} })//搜索数据
-let loading = ref(true)//开关
+let seachSelectData = reactive({data: {}}) //搜索数据
+let loading = ref(true) //开关
 let loadingText = ref(` 下拉加载更多 `)
-let listApartment = ref([])//公寓数据
-let masonryInstance = null//瀑布实例
+let listApartment = ref([]) //公寓数据
+let masonryInstance = null //瀑布实例
 let listMasonryInstance = null
-provide('count', dataCount)
+provide("count", dataCount)
 
 //保存搜索设置
-let setSeachSelectData = (data,type) => {
+let setSeachSelectData = (data, type) => {
     pages.value = 1
     seachSelectData.data = {
-        ...data
+        ...data,
     }
     loading.value = true
-    getDataList(seachSelectData.data,type)
+    getDataList(seachSelectData.data, type)
 }
 
 //初始化列表参数
@@ -79,25 +76,26 @@ let setInitial = () => {
 }
 
 //获取搜索数据
-let getDataList = (data,type=true) => {
+let getDataList = (data, type = true) => {
     // console.log(data,type)
-    if(!type){ //是否继续搜索
-        seachSelectData.data.tabType !== 'apartment'?pageList.value = []:listApartment.value = []
+    if (!type) {
+        //是否继续搜索
+        seachSelectData.data.tabType !== "apartment" ? (pageList.value = []) : (listApartment.value = [])
         dataList.data = []
         dataCount.value = 0
         loading.value = false
         return
     }
-    loadingText.value=' 加载中..... '
+    loadingText.value = " 加载中..... "
     if (!loading.value) return
     let postData = {
         page: pages.value,
         limit: 20,
-        ...data
+        ...data,
     }
     loading.value = false
     let seachApi = null
-    if (seachSelectData.data.tabType !== 'apartment') {
+    if (seachSelectData.data.tabType !== "apartment") {
         seachApi = api.getLists(postData)
     } else {
         seachApi = api.apartment(postData)
@@ -110,10 +108,10 @@ let getDataList = (data,type=true) => {
                 loadingText.value = ` 到底了 `
                 loading.value = false
             } else {
-                loadingText.value = ' 下拉加载更多 '
+                loadingText.value = " 下拉加载更多 "
                 loading.value = true
             }
-            if (seachSelectData.data.tabType !== 'apartment') {
+            if (seachSelectData.data.tabType !== "apartment") {
                 if (pages.value === 1) {
                     setInitial()
                     pageList.value = []
@@ -123,8 +121,8 @@ let getDataList = (data,type=true) => {
                 dataCount.value = res.data.count
                 pageList.value = pageList.value.concat(dataList.data)
                 nextTick(() => {
-                    listMasonryInstance.reloadItems();
-                    listMasonryInstance.layout();
+                    listMasonryInstance.reloadItems()
+                    listMasonryInstance.layout()
                 })
             } else {
                 let data = res.data
@@ -133,15 +131,14 @@ let getDataList = (data,type=true) => {
                 if (pages.value === 1) listApartment.value = []
                 listApartment.value = listApartment.value.concat(data.data)
                 nextTick(() => {
-                    masonryInstance.reloadItems();
-                    masonryInstance.layout();
+                    masonryInstance.reloadItems()
+                    masonryInstance.layout()
                     if (res.data.data.length >= 20) {
                         loading.value = true
                     }
                 })
             }
             inputModuleInfo.value.setListCount(seachSelectData.data, dataList.count)
-
         } else {
             ElMessage({
                 message: res.message,
@@ -151,43 +148,44 @@ let getDataList = (data,type=true) => {
     })
 }
 
+let isDownGetData = ref(true)  // 是否可以下拉获取数据
+
+provide("isDownGetData", isDownGetData)
 //加载更多
 let downLoadMore = () => {
     tool.loadMore(() => {
-        if (!loading.value) return
+        if (!loading.value || !isDownGetData.value) return
         pages.value++
         getDataList(seachSelectData.data)
     })
 }
 
-
 let inputModuleInfo = ref(null)
-const gridContainer = ref(null);
+const gridContainer = ref(null)
 const list = ref(null)
 //listImg
 onMounted(() => {
     listMasonryInstance = new Masonry(list.value, {
-        itemSelector: '.item',
+        itemSelector: ".item",
         gutter: 20,
-    });
+    })
     masonryInstance = new Masonry(gridContainer.value, {
-        itemSelector: '.item',
-        gutter: 20
-    });
+        itemSelector: ".item",
+        gutter: 20,
+    })
     routeQuery.data = route.currentRoute.value.query
     if (routeQuery.data.keyword && routeQuery.data.keyword.replace(/\s/g, "") && routeQuery.data.houseingPageType != 6) {
-        inputModuleInfo.value.searchInit(routeQuery.data.keyword)//调用搜索组件的搜索功能
+        inputModuleInfo.value.searchInit(routeQuery.data.keyword) //调用搜索组件的搜索功能
         // route.currentRoute.value.query.keyword = ''
     } else {
         inputModuleInfo.value.checkPageType()
     }
-    window.addEventListener('scroll', downLoadMore, true);
+    window.addEventListener("scroll", downLoadMore, true)
 })
 
 onBeforeUnmount(() => {
-    window.removeEventListener('scroll', downLoadMore, true);
+    window.removeEventListener("scroll", downLoadMore, true)
 })
-
 </script>
 <style scoped lang="less">
 img {
@@ -238,4 +236,3 @@ img {
     box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
 }
 </style>
-