260 lines
8.4 KiB
Vue
260 lines
8.4 KiB
Vue
<template>
|
|
<div class="box-min-1200-src">
|
|
<pageTopBar></pageTopBar>
|
|
<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">
|
|
<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, index) in listApartment" :key="index" :item="item" :masonryInstance="masonryInstance" @handlecollect="handlecollect"></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>
|
|
<listBtmPrompt></listBtmPrompt>
|
|
<footerTool></footerTool>
|
|
</div>
|
|
<back-to-top></back-to-top>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick, getCurrentInstance } 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 { proxy } = getCurrentInstance();
|
|
|
|
//路由
|
|
const route = useRouter();
|
|
let routeQuery = reactive({ data: {} });
|
|
|
|
//获取数据
|
|
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 loadingText = ref(` 下拉加载更多 `);
|
|
let listApartment = ref([]); //公寓数据
|
|
let masonryInstance = null; //瀑布实例
|
|
let listMasonryInstance = null;
|
|
provide("count", dataCount);
|
|
|
|
//保存搜索设置
|
|
let setSeachSelectData = (data, type) => {
|
|
pages.value = 1;
|
|
seachSelectData.data = {
|
|
...data,
|
|
};
|
|
loading.value = true;
|
|
getDataList(seachSelectData.data, type);
|
|
};
|
|
|
|
//初始化列表参数
|
|
let setInitial = () => {
|
|
pageList[1] = [];
|
|
pageList[2] = [];
|
|
pageList.height1 = 0;
|
|
pageList.height2 = 0;
|
|
};
|
|
|
|
//获取搜索数据
|
|
let getDataList = (data, type = true) => {
|
|
if (!type) {
|
|
//是否继续搜索
|
|
seachSelectData.data.tabType !== "apartment" ? (pageList.value = []) : (listApartment.value = []);
|
|
dataList.data = [];
|
|
dataCount.value = 0;
|
|
loading.value = false;
|
|
return;
|
|
}
|
|
loadingText.value = " 加载中..... ";
|
|
if (!loading.value) return;
|
|
let postData = {
|
|
page: pages.value,
|
|
limit: 20,
|
|
...data,
|
|
};
|
|
loading.value = false;
|
|
let seachApi = null;
|
|
if (seachSelectData.data.tabType !== "apartment") seachApi = api.getLists(postData);
|
|
else seachApi = proxy.$post("https://api.gter.net/v1/apartment/lists", postData);
|
|
// else seachApi = api.apartment(postData)
|
|
|
|
seachApi.then((res) => {
|
|
if (res.code === 200) {
|
|
dataList.data = res.data.data;
|
|
if (res.data.data.length < 20) {
|
|
loadingText.value = ` 到底了 `;
|
|
loading.value = false;
|
|
} else {
|
|
loadingText.value = " 下拉加载更多 ";
|
|
loading.value = true;
|
|
}
|
|
if (seachSelectData.data.tabType !== "apartment") {
|
|
if (pages.value === 1) {
|
|
setInitial();
|
|
pageList.value = [];
|
|
}
|
|
pageList.tab = 1;
|
|
dataList.count = res.data.count;
|
|
dataCount.value = res.data.count;
|
|
pageList.value = pageList.value.concat(dataList.data);
|
|
nextTick(() => {
|
|
listMasonryInstance.reloadItems();
|
|
listMasonryInstance.layout();
|
|
});
|
|
} else {
|
|
let data = res.data;
|
|
dataList.count = res.data.count;
|
|
dataCount.value = res.data.count;
|
|
if (pages.value === 1) listApartment.value = [];
|
|
listApartment.value = listApartment.value.concat(data.data);
|
|
nextTick(() => {
|
|
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,
|
|
center: true,
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
let isDownGetData = ref(true); // 是否可以下拉获取数据
|
|
|
|
provide("isDownGetData", isDownGetData);
|
|
//加载更多
|
|
let downLoadMore = () => {
|
|
tool.loadMore(() => {
|
|
if (!loading.value || !isDownGetData.value) return;
|
|
pages.value++;
|
|
getDataList(seachSelectData.data);
|
|
});
|
|
};
|
|
|
|
let inputModuleInfo = ref(null);
|
|
const gridContainer = ref(null);
|
|
const list = ref(null);
|
|
//listImg
|
|
onMounted(() => {
|
|
listMasonryInstance = new Masonry(list.value, {
|
|
itemSelector: ".item",
|
|
gutter: 20,
|
|
});
|
|
masonryInstance = new Masonry(gridContainer.value, {
|
|
itemSelector: ".item",
|
|
gutter: 15,
|
|
});
|
|
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); //调用搜索组件的搜索功能
|
|
// route.currentRoute.value.query.keyword = ''
|
|
} else {
|
|
inputModuleInfo.value.checkPageType();
|
|
}
|
|
window.addEventListener("scroll", downLoadMore, true);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener("scroll", downLoadMore, true);
|
|
});
|
|
|
|
|
|
// 处理列表的点击收藏
|
|
const handlecollect = (uniqid) => {
|
|
let targetIndex = 0;
|
|
let token = "";
|
|
|
|
listApartment.value.forEach((element, index) => {
|
|
if (element.uniqid == uniqid) {
|
|
targetIndex = index;
|
|
token = element.token || "";
|
|
}
|
|
});
|
|
|
|
// api.apartmentCollection({ token }).then((res) => {
|
|
proxy.$post("https://api.gter.net/v1/apartment/collection", { token }).then((res) => {
|
|
if (res.code != 200) return;
|
|
const data = res.data;
|
|
listApartment.value[targetIndex]["iscollect"] = data.status;
|
|
ElMessage.success(res.message);
|
|
});
|
|
};
|
|
</script>
|
|
<style scoped lang="less">
|
|
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>
|