Parcourir la source

更新 DiskFile.vue 页面中数据的滚动获取

reghao il y a 1 mois
Parent
commit
723d1277a4
1 fichiers modifiés avec 28 ajouts et 25 suppressions
  1. 28 25
      src/views/disk/DiskFile.vue

+ 28 - 25
src/views/disk/DiskFile.vue

@@ -134,7 +134,7 @@ import { getDiskFile, getFileDetail } from '@/api/disk'
 export default {
   data() {
     return {
-      queryForm: {
+      queryParams: {
         pn: 1,
         path: '/',
         fileType: null
@@ -145,7 +145,6 @@ export default {
       refreshing: false,
       showUploadSheet: false,
       currentFolderName: '全部文件',
-      pagination: { page: 1, limit: 15 },
       uploadActions: [
         { name: '离线下载', subname: '支持磁力、链接', icon: 'link-o' },
         { name: '上传文件', icon: 'description' },
@@ -169,7 +168,7 @@ export default {
     // 仅监听 path 的变化(从一个目录跳到另一个目录)
     '$route.query.path': {
       handler(newVal) {
-        this.queryForm.path = newVal || '/'
+        this.queryParams.path = newVal || '/'
         this.resetAndReload()
       }
     }
@@ -177,57 +176,61 @@ export default {
   methods: {
     resetAndReload() {
       this.fileList = []
-      this.pagination.page = 1
+      this.queryParams.pn = 1
       this.finished = false
       this.loading = true
       this.onLoad()
     },
 
     async onLoad() {
+      // 如果正在下拉刷新,不触发滚动加载
       if (this.refreshing) return
-      const currentPath = this.$route.query.path || '/'
+
       try {
-        // 构造后端需要的参数
-        const params = {
-          path: currentPath,
-          pn: this.pagination.page // 注意:通常后端分页参数名为 pn
-          // fileType: this.queryForm.fileType
-        }
+        // 确保 path 同步
+        this.queryParams.path = this.$route.query.path || '/'
+
+        const resp = await getDiskFile(this.queryParams)
 
-        const resp = await getDiskFile(params)
         if (resp.code === 0) {
-          const { pageList, namePathList } = resp.data
+          const respData = resp.data
+          const pageList = respData.pageList
+          const items = pageList.list || []
 
-          // 1. 处理文件列表
-          const items = pageList.list
-          if (this.pagination.page === 1) {
+          // 1. 拼接数据
+          if (this.queryParams.pn === 1) {
             this.fileList = items
           } else {
             this.fileList.push(...items)
           }
 
-          // 2. 更新面包屑/标题 (假设 namePathList 是当前路径的拆解)
-          if (namePathList && namePathList.length > 0) {
-            this.currentFolderName = namePathList[namePathList.length - 1].filename
+          // 2. 更新面包屑标题
+          if (respData.namePathList && respData.namePathList.length > 0) {
+            this.currentFolderName =
+              respData.namePathList[respData.namePathList.length - 1].filename
           } else {
             this.currentFolderName = '我的文件'
           }
 
-          // 3. 判断是否加载完成
+          // 3. 核心修复:结束本次 loading 状态
           this.loading = false
-          this.finished = true
-          if (this.fileList.length >= pageList.totalCount) {
+
+          // 4. 核心修复:判断是否还有更多数据
+          // hasNext 为 true 表示还有下一页,false 表示到头了
+          if (!pageList.hasNext) {
             this.finished = true
           } else {
-            this.pagination.page++
+            this.queryParams.pn++ // 只有还有下一页时,才增加页码
           }
         } else {
-          this.$toast(resp.msg)
+          this.loading = false
           this.finished = true
+          this.$toast(resp.msg)
         }
       } catch (error) {
         this.loading = false
         this.finished = true
+        console.error('加载失败:', error)
         this.$toast('加载失败')
       }
     },
@@ -264,7 +267,7 @@ export default {
       this.loading = true
 
       // 重置页码
-      this.pagination.page = 1
+      this.queryParams.pn = 1
 
       // 触发加载逻辑
       this.onLoad()