fix: 页面刷新请求问题

IdeaLeap · Feb 22, 2023 · 6a6bd1b · 6a6bd1b
1 parent 2aa2e4c
commit 6a6bd1b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 37 deletions.
diff --git a/frontend/components/ArticlesList/Item/index.vue b/frontend/components/ArticlesList/Item/index.vue
@@ -4,6 +4,23 @@ import type { Ref } from 'vue'
 import type { IArticleItem } from '~~/types/IArticleItem'
 const artlist = inject<Ref<IArticleItem[]>>('artlist')
 const [parent] = useAutoAnimate()
+const formatTime = (createdAt: string): string => {
+  const created = new Date(createdAt)
+  const now = new Date()
+  const duration = (now.getTime() - created.getTime()) / 1000 / 60
+  let ans = '刚刚'
+  if (duration > 0 && duration < 60) // 一小时内
+    ans = `${(duration).toFixed(0)}分钟前`
+  else if (duration < 60 * 24) // 一天内
+    ans = `${(duration / 60).toFixed(0)}小时前`
+  else if (duration < 60 * 24 * 30) // 一个月内
+    ans = `${(duration / 60 / 24).toFixed(0)}天前`
+  else if (duration < 60 * 24 * 30 * 365) // 一年内
+    ans = `${(duration / 60 / 24 / 30).toFixed(0)}月前`
+  else if (duration >= 60 * 24 * 30 * 365) // 超过一年
+    ans = `${(duration / 60 / 24 / 30 / 365).toFixed(0)}年前`
+  return ans
+}
 const hideHandler = (id: string) => {
   artlist && (artlist.value = artlist.value.filter(item => item.id !== id))
 }

diff --git a/frontend/components/ArticlesList/index.vue b/frontend/components/ArticlesList/index.vue
@@ -1,20 +1,22 @@
 <script setup lang="ts">
 import type { IArticleItem } from '~~/types/IArticleItem'
-const artlist = useState<IArticleItem[]>('artlist', () => [])
 const { data: articleAds } = (await useFetch('/api/global/ad'))
-const isLoading = useState('isLoading', () => false)
 const route = useRoute()
 let pagenum = 1
+const { data: artlist, pending } = await useFetch<IArticleItem[]>(() => `/api/articles/list?sort=${route.query?.sort || 'recommended'}&type=${route?.params?.type || ''}&pageNum=1&tag=${route?.params?.tag || ''}`)
 const addArtListItem = useThrottle(async () => {
-  useScrollBottom() && artlist.value?.length && artlist.value.push(...(await useFetchPostData(route?.params, route.query?.sort, ++pagenum)))
+  if (useScrollBottom() && artlist.value != null) {
+    const { data } = await useFetch<IArticleItem[]>(`/api/articles/list?sort=${route.query?.sort || 'recommended'}&type=${route?.params?.type || ''}&pageNum=${++pagenum}&tag=${route?.params?.tag || ''}`)
+    if (!data.value)
+      return
+    artlist.value.push(...data.value)
+  }
 })
+watch(route, () => {
+  pagenum = 1
+}, { immediate: true, deep: true })
 provide('artlist', artlist)
 provide('ads', articleAds)
-watch([() => route.query, () => route.params], async () => {
-  isLoading.value = true
-  artlist.value = await useFetchPostData(route?.params, route.query?.sort, pagenum = 1)
-  isLoading.value = false
-}, { deep: true, immediate: true })
 onMounted(() => {
   (window as any).addEventListener('scroll', addArtListItem)
 })
@@ -30,7 +32,7 @@ onUnmounted(() => {
       <template #fallback>
         <ArticlesListUiSkeleton />
       </template>
-      <ArticlesListUiSkeleton v-if="isLoading || !artlist?.length" />
+      <ArticlesListUiSkeleton v-if="pending || !artlist?.length" />
       <ArticlesListItem v-else />
     </ClientOnly>
   </div>

diff --git a/frontend/composables/Articlelist/useArtlistFn.ts b/frontend/composables/Articlelist/useArtlistFn.ts