XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

4.6

Browse Source
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-05-16 19:09:20 +08:00
parent 0946bddb11
commit fbb5a6599d
14 changed files with 855 additions and 714 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
src/views/seachIndex.vue
View File

@@ -8,7 +8,7 @@
<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"></apartment-item>
<apartment-item v-for="(item, index) in listApartment" :key="index" :item="item" :masonryInstance="masonryInstance"></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>
@@ -23,167 +23,169 @@
</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, 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: {}})
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 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 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
pages.value = 1;
seachSelectData.data = {
...data,
}
loading.value = true
getDataList(seachSelectData.data, type)
}
};
loading.value = true;
getDataList(seachSelectData.data, type);
};
//初始化列表参数
let setInitial = () => {
pageList[1] = []
pageList[2] = []
pageList.height1 = 0
pageList.height2 = 0
}
pageList[1] = [];
pageList[2] = [];
pageList.height1 = 0;
pageList.height2 = 0;
};
//获取搜索数据
let getDataList = (data, type = true) => {
console.log("data", data);
if (!type) {
//是否继续搜索
seachSelectData.data.tabType !== "apartment" ? (pageList.value = []) : (listApartment.value = [])
dataList.data = []
dataCount.value = 0
loading.value = false
return
seachSelectData.data.tabType !== "apartment" ? (pageList.value = []) : (listApartment.value = []);
dataList.data = [];
dataCount.value = 0;
loading.value = false;
return;
}
loadingText.value = " 加载中..... "
if (!loading.value) 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 = api.apartment(postData)
}
seachApi.then(res => {
};
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
dataList.data = res.data.data;
if (res.data.data.length < 20) {
loadingText.value = ` 到底了 `
loading.value = false
loadingText.value = ` 到底了 `;
loading.value = false;
} else {
loadingText.value = " 下拉加载更多 "
loading.value = true
loadingText.value = " 下拉加载更多 ";
loading.value = true;
}
if (seachSelectData.data.tabType !== "apartment") {
if (pages.value === 1) {
setInitial()
pageList.value = []
setInitial();
pageList.value = [];
}
pageList.tab = 1
dataList.count = res.data.count
dataCount.value = res.data.count
pageList.value = pageList.value.concat(dataList.data)
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()
})
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)
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()
masonryInstance.reloadItems();
masonryInstance.layout();
if (res.data.data.length >= 20) {
loading.value = true
loading.value = true;
}
})
});
}
inputModuleInfo.value.setListCount(seachSelectData.data, dataList.count)
inputModuleInfo.value.setListCount(seachSelectData.data, dataList.count);
} else {
ElMessage({
message: res.message,
center: true,
})
});
}
})
}
});
};
let isDownGetData = ref(true) // 是否可以下拉获取数据
let isDownGetData = ref(true); // 是否可以下拉获取数据
provide("isDownGetData", isDownGetData)
provide("isDownGetData", isDownGetData);
//加载更多
let downLoadMore = () => {
tool.loadMore(() => {
if (!loading.value || !isDownGetData.value) return
pages.value++
getDataList(seachSelectData.data)
})
}
if (!loading.value || !isDownGetData.value) return;
pages.value++;
getDataList(seachSelectData.data);
});
};
let inputModuleInfo = ref(null)
const gridContainer = ref(null)
const list = ref(null)
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
});
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()
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 {