<template>
<Head>
<Title>寄托面经</Title>
</Head>
<Header></Header>
<div class="search-result flexacenter" v-if="keyword">
<div class="keyword flexacenter" @click="clearKeyword">{{ keyword }} <img class="keyword-icon" src="@/assets/img/cross-circle-icon.png" /></div>
<div class="halving-line"></div>
<div class="total">共 {{ count }} 条搜索数据</div>
</div>
<div class="content" ref="gridContainer">
<div class="empty-box flexcenter" v-if="list.length == 0 && page == 0">
<empty hint="没有找到相关结果，请更换搜索关键词"></empty>
</div>
<template v-else>
<Item v-for="(item, index) in list" :key="index" :item="item" @handleLike="handleLike"></Item>
</template>
</div>
<div class="in-end" v-if="page == 0 && list.length > 0">- 到底了 -</div>
</template>
<script setup>
import { ElMessage } from "element-plus"
const gridContainer = ref(null)
let masonryInstance = null
const route = useRoute()
let keyword = ref("") // 搜索
keyword.value = route.query["keyword"]
watchEffect(() => {
if (keyword.value != route.query["keyword"]) {
// keyword.value = route.query["keyword"]
// console.log("keyword", keyword.value)
list.value = []
page.value = 1
keyword.value = route.query["keyword"]
getList(route.query["keyword"])
}
})
onMounted(async () => {
let Masonry = await import("masonry-layout")
masonryInstance = new Masonry.default(gridContainer.value, {
itemSelector: ".box",
gutter: 22.5,
})
// masonryInstance.reloadItems()
// masonryInstance.layout()
window.addEventListener("scroll", handleScroll)
})
const handleScroll = () => {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
const scrollHeight = document.documentElement.scrollHeight
const clientHeight = document.documentElement.clientHeight
// 列表下 滑动到底部 获取新数据
if (scrollTop + clientHeight >= scrollHeight - 40) getList()
}
let page = ref(1)
let count = ref(0)
let list = ref([]) // 列表数据
let loading = false // 加载中
const getList = () => {
if (page.value == 0 || loading) return
loading = true
getListHttp({ page: page.value, keyword: keyword.value })
.then(res => {
if (res.code != 200) {
page.value = 0
ElMessage({
message: res.message,
type: "error",
})
return
}
// console.log("res", res.code)
let data = res.data
// list.value = data.data
list.value = list.value.concat(data.data || [])
if (data.count > list.value.length) page.value++
else page.value = 0
count.value = data["count"]
nextTick(() => {
masonryInstance.reloadItems()
masonryInstance.layout()
})
})
.finally(() => (loading = false))
}
getList()
const handleLike = token => {
operateLikeHttp({ token }).then(res => {
if (res.code != 200) return
let data = res.data
list.value.forEach(element => {
console.log(element, "element")
if (element["token"] == token) {
element["islike"] = data["status"]
element["likenum"] = data["count"]
}
})
ElMessage({
message: res.message,
type: "success",
})
})
}
onUnmounted(() => {
window.removeEventListener("scroll", handleScroll)
})
const router = useRouter()
// 清除搜索
const clearKeyword = () => {
router.push(`/index.html`)
}
try {
if (process.server) {
await getListHttp({ page: 1, keyword: keyword.value }).then(res => {
if (res.code != 200) {
page.value = 0
ElMessage({
message: res.message,
type: "error",
})
return
}
let data = res.data
list.value = list.value.concat(data.data || [])
})
}
} catch (error) {}
</script>
<style scoped lang="less">
.search-result {
width: 1200px;
margin: 0 auto 30px;
.keyword {
color: #fa6b11;
font-size: 14px;
cursor: pointer;
.keyword-icon {
width: 14px;
height: 14px;
margin-left: 9px;
}
}
.halving-line {
width: 1px;
height: 13px;
background: #d7d7d7;
margin: 0 20px;
}
.total {
font-size: 13px;
color: #7f7f7f;
}
}
.content {
min-height: 540px;
width: 1200px;
// height: 1000px;
margin: 0 auto 93px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.empty-box {
width: 1200px;
height: 540px;
background-color: rgba(255, 255, 255, 1);
border-radius: 16px;
}
}
.in-end {
font-size: 12px;
color: #7f7f7f;
text-align: center;
margin-bottom: 88px;
}
</style>