ソースを参照

fix: 财务管理页分账记录tab添加分页上拉加载更多

- loadSplitRecords 改为支持分页参数 isLoadMore
- 添加 onReachBottom 触发 splitRecords 自动加载
- 列表底部显示加载状态指示器
- 去掉 split-list 的 max-height 限制,让内容自然撑开页面滚动

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
skyline 2 週間 前
コミット
2f029ef2bc
1 ファイル変更54 行追加10 行削除
  1. 54 10
      admin-h5/src/pages/finance/index.vue

+ 54 - 10
admin-h5/src/pages/finance/index.vue

@@ -144,6 +144,11 @@
             </view>
           </view>
         </view>
+        <view class="load-more" v-if="splitRecords.length > 0">
+          <text class="load-more-text" v-if="splitLoadMoreStatus === 'more'">上拉加载更多</text>
+          <text class="load-more-text" v-else-if="splitLoadMoreStatus === 'loading'">正在加载...</text>
+          <text class="load-more-text" v-else>没有更多数据了</text>
+        </view>
       </view>
     </view>
     
@@ -164,6 +169,7 @@
 <script setup>
 import CustomTabBar from '../../components/CustomTabBar.vue'
 import { ref, onMounted } from 'vue'
+import { onReachBottom } from '@dcloudio/uni-app'
 import { getStationAccounts, getSplitRecords } from '../../api/finance.js'
 import { getDashboardData } from '../../api/stat.js'
 import { formatTime, showToast, formatAmount, storage, fmtDictName, getDictColor } from '../../utils/index.js'
@@ -187,6 +193,13 @@ const tabOptions = ['站点账户', '分账记录']
 const stationAccounts = ref([])
 const splitRecords = ref([])
 
+// 分页状态
+const splitPage = ref(1)
+const splitPageSize = ref(10)
+const splitHasMore = ref(true)
+const splitLoadMoreStatus = ref('more')
+const splitLoading = ref(false)
+
 onMounted(async () => {
   await loadDicts()
   loadFinanceData()
@@ -230,23 +243,50 @@ const loadStationAccounts = async () => {
   }
 }
 
-const loadSplitRecords = async () => {
-  loading.value = true
+const loadSplitRecords = async (isLoadMore = false) => {
+  if (!isLoadMore) {
+    splitPage.value = 1
+    splitRecords.value = []
+    splitHasMore.value = true
+    splitLoadMoreStatus.value = 'more'
+  } else {
+    splitLoadMoreStatus.value = 'loading'
+  }
+  splitLoading.value = true
   try {
-    const res = await getSplitRecords({ page: 1, pageSize: 10 })
-    
+    const res = await getSplitRecords({ pageNum: splitPage.value, pageSize: splitPageSize.value })
     if (res && res.code === 200) {
       const data = res.data
-      // 适配不同的数据结构
-      splitRecords.value = data.records || data.list || data
+      const records = data.records || data.list || data
+      const total = data.total || 0
+      const totalPages = Math.ceil(total / splitPageSize.value)
+      splitHasMore.value = splitPage.value < totalPages
+      splitLoadMoreStatus.value = splitHasMore.value ? 'more' : 'noMore'
+      if (isLoadMore) {
+        splitRecords.value = [...splitRecords.value, ...records]
+        splitPage.value++
+      } else {
+        splitRecords.value = records
+        splitPage.value = 2
+      }
     }
   } catch (error) {
-        showToast('获取分账记录失败')
+    showToast('获取分账记录失败')
   } finally {
-    loading.value = false
+    splitLoading.value = false
+  }
+}
+
+const loadMoreSplitRecords = () => {
+  if (activeTab.value === 1 && splitHasMore.value && !splitLoading.value && splitLoadMoreStatus.value !== 'loading') {
+    loadSplitRecords(true)
   }
 }
 
+onReachBottom(() => {
+  loadMoreSplitRecords()
+})
+
 const handleTabChange = (index) => {
   activeTab.value = index
 }
@@ -578,8 +618,6 @@ const getSplitTypeStyle = (type) => {
 
 /* ===== 分账记录列表 ===== */
 .split-list {
-  max-height: 1000rpx;
-  overflow-y: auto;
 }
 
 .split-item {
@@ -645,5 +683,11 @@ const getSplitTypeStyle = (type) => {
   word-break: break-all;
 }
 
+.load-more {
+  display: flex;
+  justify-content: center;
+  padding: 30rpx 0;
+}
+.load-more-text { font-size: 26rpx; color: #999999; }
 
 </style>