feat: 文章列表新增无数据显示

IdeaLeap · Jan 30, 2023 · 42b48fb · 42b48fb
1 parent c32ad0f
commit 42b48fb
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/frontend/components/ArticlesList/Empty.vue b/frontend/components/ArticlesList/Empty.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="fcc">
+    <div>对不起，没有数据喔</div>
+  </div>
+</template>
diff --git a/frontend/components/ArticlesList/Navigation/Select.vue b/frontend/components/ArticlesList/Navigation/Select.vue
@@ -2,7 +2,9 @@
 const isShow = useState<boolean>('isShow', () => false)
 const iptValue = useState<string>('iptValue', () => '3天内')
 const artlistPath = useArtlistPath()
+const artlistData = useArtlist([])
 const iptValueHandler = (time: string) => {
+  artlistData.value = []
   isShow.value = false
   iptValue.value = time
 }

diff --git a/frontend/components/ArticlesList/index.vue b/frontend/components/ArticlesList/index.vue
@@ -2,6 +2,7 @@
 const route = useRoute()
 let pagenum = 1
 const isLoading = useState('isLoading', () => false)
+const isEmpty = useState('isEmpty', () => false)
 const artlistData = useArtlist([])
 const addArtListItem = () => {
   if (useScrollBottom()) {
@@ -17,10 +18,13 @@ watchEffect(() => {
   if (!artlistData.value.length) {
     isLoading.value = true
     useFetchPostData(route.path, route.query?.sort).then((data) => {
-      if (!data.length)
+      if (!data.length) {
+        isEmpty.value = true
         return
+      }
       artlistData.value = data
       isLoading.value = false
+      isEmpty.value = false
     })
   }
 }, { flush: 'post' })
@@ -37,9 +41,10 @@ onUnmounted(() => {
 <template>
   <div class="pb-5 box-border w-full">
     <ArticlesListNavigation />
-    <ul v-if="!isLoading">
+    <ul v-if="!isLoading && !isEmpty">
       <ArticlesListItem :artlist-item="artlistData" />
     </ul>
+    <ArticlesListEmpty v-else-if="isEmpty" />
     <ArticlesListSkeleton v-else />
   </div>
 </template>