重新筛选

This commit is contained in:
A1300399510
2024-03-21 19:03:11 +08:00
parent a21ce33503
commit 172b7274a9
8 changed files with 684 additions and 209 deletions

View File

@@ -86,6 +86,7 @@ const getData = () => {
text: "Loading",
background: "rgba(0, 0, 0, 0.7)",
})
requestLoading = true
proxy

View File

@@ -3,7 +3,7 @@
<pageTopBar :bannerList="bannerList.data.intermediaryHousing"></pageTopBar>
<seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
<div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35" >
<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>
@@ -17,26 +17,25 @@
<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 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';
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick } from "vue"
import pageTopBar from "../../components/pageTopBar/pageTopBar.vue"
import seachModule from "../../components/seachModule/seachModule1.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"
import store from "../../store/index"
//瀑布实例
let listMasonryInstance = null
@@ -47,24 +46,26 @@ let dataCount = ref(0)
let pageList = ref([])
let seachSelectData = reactive({ data: {} })
let loading = ref(true)
let loadingText=ref(' 下拉加载更多 ')
provide('count', dataCount)
let loadingText = ref(" 下拉加载更多 ")
provide("count", dataCount)
//轮播
let bannerList = reactive({ data: [] })
let banner = () => {
api.banner().then(res => {
if (res.code === 200) {
bannerList.data = res.data
}
})
api.banner().then(res => {
if (res.code === 200) {
bannerList.data = res.data
}
})
}
//保存搜索设置
let setSeachSelectData = (data) => {
let setSeachSelectData = (data, noMask = false) => {
pages.value = 1
store.state.intermediaryPitchValue = data
seachSelectData.data = {
...data
...data,
noMask,
}
loading.value = true
getDataList(seachSelectData.data)
@@ -72,22 +73,22 @@ let setSeachSelectData = (data) => {
//获取搜索数据
let getDataList = (data) => {
loadingText.value=' 加载中..... '
if(!loading.value)return
loadingText.value = " 加载中..... "
if (!loading.value) return
loading.value = false
let postData = {
page: pages.value,
intermediary: 1,
limit:20,
...data
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 (res.data.data.length < 20) {
loadingText.value = " 到底了 "
} else {
loadingText.value = " 下拉加载更多 "
}
if (pages.value === 1) {
pageList.value = []
@@ -97,8 +98,8 @@ let getDataList = (data) => {
dataList.count = res.data.count
dataCount.value = res.data.count
nextTick(() => {
listMasonryInstance.reloadItems();
listMasonryInstance.layout();
listMasonryInstance.reloadItems()
listMasonryInstance.layout()
if (dataList.data.length >= 20) loading.value = true
})
} else {
@@ -119,23 +120,22 @@ let downLoadMore = () => {
})
}
let list = ref('')
let list = ref("")
//listImg
onMounted(() => {
listMasonryInstance = new Masonry(list.value, {
itemSelector: '.item',
gutter: 20
});
getDataList()
itemSelector: ".item",
gutter: 20,
})
// getDataList()
banner()
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 {
@@ -186,4 +186,3 @@ img {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
}
</style>

View File

@@ -50,13 +50,12 @@ let loadingText = ref(" 下拉加载更多 ")
provide("count", dataCount)
//保存搜索设置
let setSeachSelectData = data => {
console.log("保存数据的:", data);
let setSeachSelectData = (data, noMask = false) => {
store.state.needPitchValue = data
pages.value = 1
seachSelectData.data = {
// ...needPitchValue,
...data,
noMask,
}
loading.value = true
getDataList(seachSelectData.data)
@@ -114,18 +113,14 @@ let downLoadMore = () => {
let list = ref("")
//listImg
const needPitchValue = store.state.needPitchValue
provide("pitchValue", needPitchValue)
// const needPitchValue = reactive({ ...store.state.needPitchValue })
onMounted(() => {
listMasonryInstance = new Masonry(list.value, {
itemSelector: ".item",
gutter: 20,
})
getDataList({...needPitchValue})
// getDataList()
window.addEventListener("scroll", downLoadMore, true)
})

View File

@@ -4,7 +4,7 @@
<seachModule :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" style="width:1200px;" ref="list">
<div v-show="dataList.data && dataList.data.length > 0" style="width: 1200px;" 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">
@@ -19,23 +19,23 @@
<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 { 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 Masonry from 'masonry-layout';
import { reactive, onMounted, ref, provide, onBeforeUnmount, nextTick,getCurrentInstance } from "vue"
import pageTopBar from "../../components/pageTopBar/pageTopBar.vue"
import seachModule from "../../components/seachModule/seachModule1.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 { 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 Masonry from "masonry-layout"
import store from "../../store/index"
//路由
@@ -51,15 +51,19 @@ let dataCount = ref(0)
let pageList = ref([])
let seachSelectData = reactive({ data: {} })
let loading = ref(true)
let loadingText = ref(' 下拉加载更多 ')
provide('count', dataCount)
let loadingText = ref(" 下拉加载更多 ")
provide("count", dataCount)
const { proxy } = getCurrentInstance()
//保存搜索设置
let setSeachSelectData = (data) => {
let setSeachSelectData = (data, noMask = false) => {
store.state.personPitchValue = data
pages.value = 1
seachSelectData.data = {
...data
...data,
noMask,
}
loading.value = true
getDataList(seachSelectData.data)
@@ -68,31 +72,32 @@ let setSeachSelectData = (data) => {
//轮播
let bannerList = reactive({ data: [] })
let banner = () => {
api.banner().then(res => {
if (res.code === 200) {
bannerList.data = res.data
}
})
api.banner().then(res => {
if (res.code === 200) {
bannerList.data = res.data
}
})
}
//获取搜索数据
let getDataList = (data) => {
loadingText.value=' 加载中..... '
let getDataList = data => {
loadingText.value = " 加载中..... "
if (!loading.value) return
loading.value = false
let postData = {
page: pages.value,
intermediary: 0,
...data
...data,
}
if(!postData['orderby'])postData['orderby']='timestamp'
if (!postData["orderby"]) postData["orderby"] = "timestamp"
api.getLists(postData).then(res => {
if (res.code === 200) {
dataList.data = res.data.data
if (res.data.data.length < 20) {
loadingText.value = ' 到底了 '
loadingText.value = " 到底了 "
} else {
loadingText.value = ' 下拉加载更多 '
loadingText.value = " 下拉加载更多 "
}
if (pages.value === 1) {
pageList.value = []
@@ -102,8 +107,8 @@ let getDataList = (data) => {
dataList.count = res.data.count
dataCount.value = res.data.count
nextTick(() => {
listMasonryInstance.reloadItems();
listMasonryInstance.layout();
listMasonryInstance.reloadItems()
listMasonryInstance.layout()
if (dataList.data.length >= 20) loading.value = true
})
} else {
@@ -115,7 +120,6 @@ let getDataList = (data) => {
})
}
//加载更多
let downLoadMore = () => {
tool.loadMore(() => {
@@ -125,14 +129,13 @@ let downLoadMore = () => {
})
}
let list = ref(null)
//listImg
onMounted(() => {
listMasonryInstance = new Masonry(list.value, {
itemSelector: '.item',
gutter: 20
});
itemSelector: ".item",
gutter: 20,
})
// let { type, data } = router.currentRoute.value.query
// let typeData = null
// if (data) typeData = JSON.parse(data)
@@ -144,14 +147,13 @@ onMounted(() => {
// }
// }
banner()
getDataList(seachSelectData.data)
window.addEventListener('scroll', downLoadMore, true);
// getDataList(seachSelectData.data)
window.addEventListener("scroll", downLoadMore, true)
})
onBeforeUnmount(() => {
window.removeEventListener('scroll', downLoadMore, true);
window.removeEventListener("scroll", downLoadMore, true)
})
</script>
<style scoped lang="less">
img {
@@ -202,4 +204,3 @@ img {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
}
</style>