gterFang/src/views/housingView/needHousing.vue

<template>
    <div class="box-min-1200-src">
        <pageTopBar></pageTopBar>
        <seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
        <div class="dis-f jus-x al-item">
            <div class="body-maxWidth mg-t-35" >
                <div v-show="dataList.data && dataList.data.length > 0" ref="list">
                    <biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
                </div>
                <div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
                    <noList></noList>
                </div>
            </div>
        </div>
        <loadMoreText :loadText="loadingText"></loadMoreText>
        <listBtmPrompt></listBtmPrompt>
        <footerTool></footerTool>
    </div>

    <!-- 右下角咨询 -->
    <circle-btn></circle-btn>
    <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 seachModule from "../../components/seachModule/seachModule.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 circleBtn from '@/components/public/circle-btn.vue'
import api from "../../utils/api";
import tool from '../../toolJs/downLoadMore'
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 Masonry from 'masonry-layout';


//瀑布实例
let listMasonryInstance = null
//获取数据
let pages = ref(1)
let dataList = reactive({ data: [], count: 0 })
let dataCount = ref(0)
let pageList = ref([])
let seachSelectData = reactive({ data: {} })
let loading = ref(true)
let loadingText=ref(' 下拉加载更多 ')
provide('count', dataCount)

//保存搜索设置
let setSeachSelectData = (data) => {
    pages.value = 1
    seachSelectData.data = {
        ...data
    }
    loading.value = true
    getDataList(seachSelectData.data)
}

//获取搜索数据
let getDataList = (data) => {
    loadingText.value=' 加载中..... '
    if(!loading.value)return
    loading.value = false
    let postData = {
        page: pages.value,
        intermediary: 6,
        limit:20,
        ...data
    }
    api.getLists(postData).then(res => {
        if (res.code === 200) {
            dataList.data = res.data.data
            if(res.data.data.length<20){
                loadingText.value=' 到底了 '
            }else{
                loadingText.value=' 下拉加载更多 '
            }
            if (pages.value === 1) {
                pageList.value = []
            }
            pageList.value = pageList.value.concat(res.data.data)
            pageList.tab = 1
            dataList.count = res.data.count
            dataCount.value = res.data.count
            nextTick(() => {
                listMasonryInstance.reloadItems();
                listMasonryInstance.layout();
                if (dataList.data.length >= 20) loading.value = true
            })
        } else {
            ElMessage({
                message: res.message,
                center: true,
            })
        }
    })
}

//加载更多
let downLoadMore = () => {
    tool.loadMore(() => {
        if (!loading.value) return
        pages.value++
        getDataList(seachSelectData.data)
    })
}

let list = ref('')

//listImg
onMounted(() => {
    listMasonryInstance = new Masonry(list.value, {
        itemSelector: '.item',
        gutter: 20,
        percentPosition: true
    });
    getDataList()
    window.addEventListener('scroll', downLoadMore, true);
})

onBeforeUnmount(() => {
    window.removeEventListener('scroll', downLoadMore, true);
})

</script>
<style scoped>
img {
    object-fit: contain;
}

.dis-f {
    display: flex;
}

.jus-x {
    justify-content: center;
}

.al-item {
    align-items: center;
}

.pos-r {
    position: relative;
}

.body-maxWidth {
    width: 1200px;
    min-width: 1200px;
}

.s-w-100 {
    width: 100%;
}

.jus-bet {
    justify-content: space-between;
}

.mg-t-35 {
    margin-top: 35px;
}

.no-list-box {
    height: 500px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 16px;
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
}
</style>