no message

pages/index.html/index.vue

@@ -0,0 +1,185 @@
+<template>
+    <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" 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>
+
+    <MyPopup v-if="false"></MyPopup>
+</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.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) 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
+
+        console.log("data", data)
+
+        console.log(list.value, "list.value")
+
+        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`)
+}
+</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 {
+    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>