浏览代码

fix: admin-h5分账记录页修复上拉加载更多

- 补充缺失的 showToast 导入
- 改用 scroll-view + @scrolltolower 替代 onReachBottom,H5端更可靠
- 动态计算 scroll-view 高度

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
skyline 2 周之前
父节点
当前提交
fee53a8740
共有 1 个文件被更改,包括 59 次插入50 次删除
  1. 59 50
      admin-h5/src/pages/finance/split-record.vue

+ 59 - 50
admin-h5/src/pages/finance/split-record.vue

@@ -32,66 +32,71 @@
     </view>
 
     <!-- 分账列表 -->
-    <view class="split-list" v-if="list.length > 0">
-      <view class="split-item" v-for="(item, index) in list" :key="index">
-        <view class="item-header">
-          <text class="item-type" :style="getTypeStyle(item.type)">{{ fmtDictName('SplitRecord.type', item.type) }}</text>
-          <text class="item-amount">{{ formatAmount(item.amount) }}</text>
-        </view>
-        <view class="item-content">
-          <view class="info-row">
-            <text class="info-label">入账站点</text>
-            <text class="info-value">{{ item.toStationName || '-' }}</text>
-          </view>
-          <view class="info-row">
-            <text class="info-label">出账站点</text>
-            <text class="info-value">{{ item.fromStationName || '-' }}</text>
-          </view>
-          <view class="info-row">
-            <text class="info-label">分账交易流水号</text>
-            <text class="info-value trade-no">{{ item.tradeNo || '-' }}</text>
+    <scroll-view
+      class="split-scroll"
+      scroll-y
+      @scrolltolower="loadMore"
+      :style="{ height: scrollHeight + 'px' }">
+      <view class="split-list" v-if="list.length > 0">
+        <view class="split-item" v-for="(item, index) in list" :key="index">
+          <view class="item-header">
+            <text class="item-type" :style="getTypeStyle(item.type)">{{ fmtDictName('SplitRecord.type', item.type) }}</text>
+            <text class="item-amount">{{ formatAmount(item.amount) }}</text>
           </view>
-          <view class="info-row">
-            <text class="info-label">创建时间</text>
-            <text class="info-value">{{ formatTime(item.createTime) }}</text>
-          </view>
-          <view class="info-row">
-            <text class="info-label">更新时间</text>
-            <text class="info-value">{{ formatTime(item.updateTime) }}</text>
+          <view class="item-content">
+            <view class="info-row">
+              <text class="info-label">入账站点</text>
+              <text class="info-value">{{ item.toStationName || '-' }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">出账站点</text>
+              <text class="info-value">{{ item.fromStationName || '-' }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">分账交易流水号</text>
+              <text class="info-value trade-no">{{ item.tradeNo || '-' }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">创建时间</text>
+              <text class="info-value">{{ formatTime(item.createTime) }}</text>
+            </view>
+            <view class="info-row">
+              <text class="info-label">更新时间</text>
+              <text class="info-value">{{ formatTime(item.updateTime) }}</text>
+            </view>
           </view>
         </view>
       </view>
-    </view>
 
-    <!-- 加载更多 -->
-    <view class="load-more" v-if="list.length > 0">
-      <text class="load-more-text" v-if="loadMoreStatus === 'more'">上拉加载更多</text>
-      <text class="load-more-text" v-else-if="loadMoreStatus === 'loading'">正在加载...</text>
-      <text class="load-more-text" v-else>没有更多数据了</text>
-    </view>
+      <!-- 加载更多 -->
+      <view class="load-more" v-if="list.length > 0">
+        <text class="load-more-text" v-if="loadMoreStatus === 'more'">上拉加载更多</text>
+        <text class="load-more-text" v-else-if="loadMoreStatus === 'loading'">正在加载...</text>
+        <text class="load-more-text" v-else>没有更多数据了</text>
+      </view>
 
-    <!-- 空状态 -->
-    <view class="empty-state" v-if="list.length === 0 && !loading">
-      <view class="empty-icon-wrapper">
-        <AppIcon name="trending-up" :size="80" color="#999999" />
+      <!-- 空状态 -->
+      <view class="empty-state" v-if="list.length === 0 && !loading">
+        <view class="empty-icon-wrapper">
+          <AppIcon name="trending-up" :size="80" color="#999999" />
+        </view>
+        <text class="empty-text">暂无分账记录</text>
       </view>
-      <text class="empty-text">暂无分账记录</text>
-    </view>
 
-    <!-- 加载状态 -->
-    <view class="loading-state" v-if="loading && list.length === 0">
-      <view class="loading-spinner"></view>
-      <text class="loading-text">加载中...</text>
-    </view>
+      <!-- 加载状态 -->
+      <view class="loading-state" v-if="loading && list.length === 0">
+        <view class="loading-spinner"></view>
+        <text class="loading-text">加载中...</text>
+      </view>
+    </scroll-view>
   </view>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { onReachBottom } from '@dcloudio/uni-app'
 import { getSplitRecords } from '../../api/finance.js'
 import { getStationList } from '../../api/station.js'
-import { formatTime, formatAmount, fmtDictName, getDictColor } from '../../utils/index.js'
+import { formatTime, formatAmount, fmtDictName, getDictColor, showToast } from '../../utils/index.js'
 import { loadDicts } from '../../utils/dict.js'
 
 const list = ref([])
@@ -106,6 +111,7 @@ const selectedStationId = ref('')
 const selectedStationName = ref('')
 const activeType = ref('')
 const activeTypeLabel = ref('')
+const scrollHeight = ref(600)
 
 const typeOptions = [
   { label: '全部类型', value: '' }
@@ -208,15 +214,13 @@ const loadMore = () => {
   }
 }
 
-onReachBottom(() => {
-  loadMore()
-})
-
 const handleSearch = () => {
   loadData()
 }
 
 onMounted(async () => {
+  const sysInfo = uni.getSystemInfoSync()
+  scrollHeight.value = sysInfo.windowHeight - 44 // 减去导航栏高度
   await loadDicts()
   loadStations()
   loadData()
@@ -227,7 +231,12 @@ onMounted(async () => {
 .split-container {
   min-height: 100vh;
   background-color: #F5F7FA;
-  padding-bottom: 60rpx;
+  display: flex;
+  flex-direction: column;
+}
+
+.split-scroll {
+  flex: 1;
 }
 
 .filter-section {