no message

pages/index.html/index.vue

@@ -8,8 +8,7 @@
         <div class="halving-line"></div>
         <div class="search-result">共 {{ count }} 条搜索数据</div>
     </div>
-
-    <div class="vote-list-box" ref="gridContainer">
+    <div class="vote-list-box" :class="{ 'firstdata': firstdataState }" ref="gridContainer" v-loading="loading">
         <a class="vote-item" target="_blank" :href="`/details/${item['uniqid']}`" v-for="(item, index) in list" :key="index" :class="{ 'isvote': item['isvote'] == 1 || item['status'] == 0 }" :style="{ '--main-color': colourValue[item.uniqidIndex]['main'], '--bg-color': colourValue[item.uniqidIndex]['bg'], '--bc-color': colourValue[item.uniqidIndex]['bc'] }">
             <div class="vote-title">
                 <div class="vote-state" v-if="item['status'] == 1">进行中</div>
@@ -44,7 +43,7 @@
                 </div>
             </div>
         </a>
-        <div class="empty-box flexcenter" v-if="keyword && list.length == 0"><Empty :isNeedIssue="true"></Empty></div>
+        <div class="empty-box flexcenter" v-if="keyword && list.length == 0 && !loading"><Empty :isNeedIssue="true"></Empty></div>
     </div>
 </template>
 <script setup>
@@ -57,10 +56,12 @@ import { useRoute } from "vue-router"
 const route = useRoute()
 const router = useRouter()
 let keyword = ref("")
-let page = 1 // 投票页数从 1 开始
+let page = ref(1) // 投票页数从 1 开始
 let count = ref(0)
 let list = ref([])
-let loading = false // 加载中
+let loading = ref(false) // 加载中
+
+const firstdataState = ref(true)
 
 keyword.value = route.query["keyword"]
 const gridContainer = ref(null)
@@ -77,13 +78,13 @@ onMounted(async () => {
 })
 
 const getList = () => {
-    if (page == 0 || loading) return
+    if (page.value == 0 || loading.value) return
 
-    loading = true
-    getListHttp({ page, keyword: keyword.value })
+    loading.value = true
+    getListHttp({ page: page.value, keyword: keyword.value })
         .then(res => {
             if (res.code != 200) {
-                page = 0
+                page.value = 0
                 ElMessage.error(res.message)
                 return
             }
@@ -94,15 +95,17 @@ const getList = () => {
             })
             list.value = list.value.concat(data.data)
             count.value = data.count
-            if (data.count > list.value.length) page++
-            else page = 0
+            if (data.count > list.value.length) page.value++
+            else page.value = 0
+
+            firstdataState.value = false
 
             nextTick(() => {
                 masonryInstance.reloadItems()
                 masonryInstance.layout()
             })
         })
-        .finally(() => (loading = false))
+        .finally(() => (loading.value = false))
 }
 
 const handleScroll = () => {
@@ -134,6 +137,11 @@ const handleLike = (token, index) => {
     })
 }
 
+// 使用 process.client 判断是否在浏览器环境下
+const isServer = computed(() => {
+    return process.server // 使用 process.client 判断是否在浏览器环境下
+})
+
 // 点击关闭搜索
 const closeKeyword = () => router.push("./index.html")
 
@@ -141,7 +149,7 @@ watch(
     () => route.query,
     () => {
         keyword.value = route.query["keyword"]
-        page = 1
+        page.value = 1
         list.value = []
         count.value = 0
         getList()
@@ -150,7 +158,7 @@ watch(
 
 try {
     if (process.server) {
-        await getListHttp({ page, keyword: keyword.value }).then(res => {
+        await getListHttp({ page: 1, keyword: keyword.value }).then(res => {
             let data = res.data
             data.data.forEach(element => {
                 let uniqidEnd = element["uniqid"].charAt(element["uniqid"].length - 1)
@@ -158,10 +166,6 @@ try {
             })
             list.value = list.value.concat(data.data)
             count.value = data.count
-            if (data.count > list.value.length) page++
-            else page = 0
-
-            console.log("keyword", keyword.value)
         })
     }
 } catch (error) {}
@@ -205,6 +209,15 @@ try {
     display: flex;
     flex-wrap: wrap;
     min-height: 100vh;
+    &.firstdata {
+        .vote-item {
+            margin-right: 22.5px;
+
+            &:nth-of-type(3n) {
+                margin-right: 0;
+            }
+        }
+    }
     .vote-item {
         width: 385px;
         background-color: rgba(255, 255, 255, 1);