feat(approve): add skeleton loading and pagination to approval list

- Add skeleton card component with loading animation for initial page load
- Implement independent pagination for pending and done tabs with page tracking
- Add loadMore functionality with infinite scroll on page bottom reach
- Integrate u-loadmore component to display pagination status
- Refactor list rendering with conditional skeleton display and template wrapper
- Add skeleton-card styling with consistent card appearance and shadow
- Update getData method to support paginated API requests with page and limit parameters
- Add resetAndLoad method to reset pagination when switching tabs
- Improve UX by showing loading state during initial data fetch

assets/css/approve/index.scss

@@ -33,6 +33,14 @@
 
   .list-wrap {
     padding: 0 28rpx;
+
+    .skeleton-card {
+      background: #ffffff;
+      border-radius: 16rpx;
+      margin-bottom: 24rpx;
+      padding: 28rpx;
+      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+    }
   }
 
   .approve-card {

pages/approve/index.vue

@@ -9,6 +9,15 @@
         </view>
 
         <view class="list-wrap">
+            <!-- 骨架屏：首次加载时展示 -->
+            <view v-if="skeletonLoading">
+                <view class="skeleton-card" v-for="i in 3" :key="i">
+                    <u-skeleton rows="3" title :animate="true" :loading="true" :rowsWidth="['100%', '60%', '40%']" rowsHeight="30"></u-skeleton>
+                </view>
+            </view>
+
+            <!-- 列表内容 -->
+            <template v-else>
                 <view class="approve-card" v-for="item in currentList" :key="item.id">
                     <view class="card-title">费用减免申请</view>
                     <view class="card-body">
@@ -43,6 +52,9 @@
                 </view>
 
                 <u-empty v-if="!currentList.length" mode="data" :text="currentTab === 0 ? '暂无待处理审批' : '暂无已处理审批'" iconSize="140" textSize="24"></u-empty>
+
+                <u-loadmore v-if="currentList.length" :status="loadStatus" @loadmore="loadMore" marginTop="10" marginBottom="30" fontSize="28" iconSize="25" :line="true" lineColor="#e4e7ed"></u-loadmore>
+            </template>
         </view>
     </view>
 </template>
@@ -60,58 +72,133 @@
                     { name: '已处理' }
                 ],
                 pendingList: [],
-                doneList: []
+                doneList: [],
+                // 分页参数（两个 tab 各自独立）
+                pendingPage: 1,
+                donePage: 1,
+                limit: 10,
+                pendingTotal: 0,
+                doneTotal: 0,
+                // 骨架屏：首次进入 tab 且无缓存数据时显示
+                skeletonLoading: false,
+                // loadMore 状态
+                loadStatus: 'loadmore'
             };
         },
         computed: {
             currentList() {
                 return this.currentTab === 0 ? this.pendingList : this.doneList;
+            },
+            currentPage() {
+                return this.currentTab === 0 ? this.pendingPage : this.donePage;
+            },
+            currentTotal() {
+                return this.currentTab === 0 ? this.pendingTotal : this.doneTotal;
             }
         },
         onShow() {
-            this.getData();
+            this.resetAndLoad();
+        },
+        onReachBottom() {
+            this.loadMore();
         },
         methods: {
             /**
-             * 获取审批列表，根据当前 Tab 传不同 status
+             * 重置当前 tab 分页并重新加载
+             * @return {void}
+             */
+            resetAndLoad() {
+                if (this.currentTab === 0) {
+                    this.pendingPage = 1;
+                    this.pendingList = [];
+                } else {
+                    this.donePage = 1;
+                    this.doneList = [];
+                }
+                this.skeletonLoading = true;
+                this.loadStatus = 'loadmore';
+                this.getData();
+            },
+            /**
+             * 获取审批列表，支持分页追加
              * @return {void}
              */
             getData() {
+                var page = this.currentTab === 0 ? this.pendingPage : this.donePage;
                 var statusVal = this.currentTab === 0 ? '0' : '1';
-                var params = { status: statusVal };
+                var params = {
+                    status: statusVal,
+                    page,
+                    limit: this.limit
+                };
                 if (this.order_sn) {
                     params.order_sn = this.order_sn;
                 }
-                this.request(API.feeApproveList, 'GET', params, true).then(res => {
+                this.request(API.feeApproveList, 'GET', params, !this.skeletonLoading).then(res => {
+                    this.skeletonLoading = false;
                     if (res.code === 0) {
                         var { list = [], total = 0 } = res.data || {};
                         if (this.currentTab === 0) {
-                            this.pendingList = list;
+                            this.pendingList = page === 1 ? list : [...this.pendingList, ...list];
+                            this.pendingTotal = total;
                             this.$set(this.tabList, 0, { name: total ? `待处理(${total})` : '待处理' });
                         } else {
-                            this.doneList = list;
+                            this.doneList = page === 1 ? list : [...this.doneList, ...list];
+                            this.doneTotal = total;
                         }
+                        this.updateLoadStatus();
                     }
+                }).catch(() => {
+                    this.skeletonLoading = false;
+                    this.loadStatus = 'loadmore';
                 });
             },
             /**
-             * 搜索
+             * 根据当前数据量与总数更新底部加载状态
              * @return {void}
              */
-            onSearch() {
+            updateLoadStatus() {
+                var listLen = this.currentTab === 0 ? this.pendingList.length : this.doneList.length;
+                var total = this.currentTab === 0 ? this.pendingTotal : this.doneTotal;
+                this.loadStatus = listLen >= total ? 'nomore' : 'loadmore';
+            },
+            /**
+             * 加载下一页
+             * @return {void}
+             */
+            loadMore() {
+                if (this.loadStatus !== 'loadmore') return;
+                this.loadStatus = 'loading';
+                if (this.currentTab === 0) {
+                    this.pendingPage++;
+                } else {
+                    this.donePage++;
+                }
                 this.getData();
             },
             /**
-             * Tab 切换
+             * 搜索时重置分页
+             * @return {void}
+             */
+            onSearch() {
+                this.resetAndLoad();
+            },
+            /**
+             * Tab 切换，如果目标 tab 无缓存则显示骨架屏
              * @param {Object} item - 选中的 tab 项
              * @return {void}
              */
             onTabChange(item) {
                 this.currentTab = item.index;
-                this.getData();
+                var targetList = this.currentTab === 0 ? this.pendingList : this.doneList;
+                if (!targetList.length) {
+                    this.resetAndLoad();
+                } else {
+                    this.updateLoadStatus();
+                }
             },
             /**
-             * 审批
+             * 跳转审批详情
              * @param {Object} item - 审批项
              * @return {void}
              */