gterFang/src/views/seachIndex.vue

<template>
    <div>
        <pageTopBar></pageTopBar>
        <inputModule :getDataList="setSeachSelectData" :count="dataCount"></inputModule>
        <div class="dis-f jus-x al-item">
            <div class="body-maxWidth mg-t-35">
                <div class="dis-f jus-bet"
                    v-show="dataList.data && dataList.data.length > 0 && seachSelectData.data.intermediary !== ''">
                    <div ref="list">
                        <biserialItem v-for="(item, i) in pageList['1']" :key="i" :item="item" :imgLoad="watchImgLoad"
                            listId="1"></biserialItem>
                    </div>
                    <div>
                        <biserialItem v-for="(item, i) in pageList['2']" :key="i" :item="item" :imgLoad="watchImgLoad"
                            listId="2"></biserialItem>
                    </div>
                </div>
                <div v-show="seachSelectData.data.intermediary === ''" ref="gridContainer">
                    <apartment-item v-for="item in listApartment" :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></noList>
                </div>
            </div>
        </div>
        <listBtmPrompt></listBtmPrompt>
    </div>
</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';

//获取数据
let pages = ref(1)//页数
let dataList = reactive({ data: [], count: 0 })//个人/中介数据
let dataCount = ref(0)//数据数量
let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })//双列瀑布数据
let seachSelectData = reactive({ data: {} })//搜索数据
let loading = ref(true)//开关
let listApartment = ref([])//公寓数据
let masonryInstance = null//瀑布实例
provide('count', dataCount)

//保存搜索设置
let setSeachSelectData = (data, type) => {
    pages.value = 1

    // if(data.location.length>0){
    //     data.location=JSON.stringify(data.location)
    // }
    seachSelectData.data = {
        ...data
    }
    loading.value = true
    // console.log('seachSelectData', seachSelectData.data, type)
    // return
    getDataList(seachSelectData.data, type)
}

//初始化列表参数
let setInitial = () => {
    pageList[1] = []
    pageList[2] = []
    pageList.height1 = 0
    pageList.height2 = 0
}

//获取搜索数据
let getDataList = (data) => {
    if (!loading.value) return
    let postData = {
        page: pages.value,
        intermediary: 0,
        ...data
    }
    loading.value = false
    let seachApi = null
    if (seachSelectData.data.tabType !== 'apartment') {
        seachApi = api.getLists(postData)
    } else {
        seachApi = api.apartment(postData)
    }
    seachApi.then(res => {
        if (res.code === 200) {
            console.log(res.data)
            loading.value = true
            dataList.data = res.data.data
            if (res.data.data.length < 20) {
                loading.value = false
            }
            if (seachSelectData.data.tabType !== 'apartment') {
                if (pages.value === 1) {
                    setInitial()
                }
                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 {
                let data = res.data
                listApartment.value = listApartment.value.concat(data.data)
                nextTick(() => {
                    masonryInstance.reloadItems();
                    masonryInstance.layout();
                })
            }


        } else {
            // ElMessage(res.message)
        }
    })
}

//添加数据
let addListData = () => {
    let num = null
    if (pageList.tab >= 18){
        loading.value = true
        return
    } 
    pageList.tab++
    if (pageList.height1 > pageList.height2) {
        num = 2
    } else {
        num = 1
    }
    pageList[num].push(dataList.data[pageList.tab])
}

//监听图片加载
let watchImgLoad = (id, listId, height) => {
    pageList[`height${listId}`] += height
    addListData()
}

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

const gridContainer = ref(null);
//listImg
onMounted(() => {
    masonryInstance = new Masonry(gridContainer.value, {
        itemSelector: '.item',
        gutter: 20
    });
    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>