feat(transfer): 添加骨架屏加载效果

- 新增骨架屏样式，包含渐变动画效果和按钮占位样式
- 在列表加载时显示骨架屏，提升用户体验
- 添加loading状态控制，确保骨架屏仅在首次加载且无数据时显示
- 优化列表显示逻辑，使用v-else-if避免骨架屏与列表同时显示

assets/css/transfer/task.scss

@@ -38,6 +38,35 @@
     }
     }
 
 
     .list {
     .list {
+        // 骨架屏样式
+        .skeleton-box {
+            .skeleton-item {
+                background: linear-gradient(90deg, #f0f0f2 25%, #e8e8e8 50%, #f0f0f2 75%);
+                background-size: 200% 100%;
+                animation: skeleton-loading 1.5s infinite;
+                border-radius: 6rpx;
+            }
+
+            .skeleton-btn {
+                width: 100%;
+                height: 50rpx;
+                background: linear-gradient(90deg, #f0f0f2 25%, #e8e8e8 50%, #f0f0f2 75%);
+                background-size: 200% 100%;
+                animation: skeleton-loading 1.5s infinite;
+                border-radius: 8rpx;
+                margin-top: 10rpx;
+            }
+        }
+
+        @keyframes skeleton-loading {
+            0% {
+                background-position: 200% 0;
+            }
+            100% {
+                background-position: -200% 0;
+            }
+        }
+
         .box {
         .box {
             position: relative;
             position: relative;
             padding: 15px 17rpx 20rpx 17rpx;
             padding: 15px 17rpx 20rpx 17rpx;

pages/transfer/task.vue

@@ -22,7 +22,24 @@
                 </view>
                 </view>
             </view>
             </view>
         </view>
         </view>
-        <view class="list" v-if="list.length > 0">
+        <!-- 骨架屏 -->
+        <view class="list" v-if="loading && list.length === 0">
+            <view class="box row skeleton-box" v-for="i in 3" :key="'skeleton-' + i">
+                <view class="skeleton-item" style="flex: 0 0 100%; width: 60%; height: 32rpx; margin-bottom: 16rpx;"></view>
+                <view class="skeleton-item" style="flex: 0 0 50%; width: 80%; height: 28rpx; margin-bottom: 16rpx;"></view>
+                <view class="skeleton-item" style="flex: 0 0 50%; width: 70%; height: 28rpx; margin-bottom: 16rpx;"></view>
+                <view class="bor" style="flex: 0 0 100%;"></view>
+                <view class="skeleton-item" style="flex: 0 0 50%; width: 75%; height: 28rpx; margin-bottom: 14rpx;"></view>
+                <view class="skeleton-item" style="flex: 0 0 50%; width: 65%; height: 28rpx; margin-bottom: 14rpx;"></view>
+                <view class="skeleton-item" style="flex: 0 0 50%; width: 70%; height: 28rpx; margin-bottom: 14rpx;"></view>
+                <view class="skeleton-item" style="flex: 0 0 50%; width: 55%; height: 28rpx; margin-bottom: 14rpx;"></view>
+                <view class="skeleton-item" style="flex: 0 0 50%; width: 60%; height: 28rpx; margin-bottom: 14rpx;"></view>
+                <view class="skeleton-item" style="flex: 0 0 50%; width: 50%; height: 28rpx; margin-bottom: 14rpx;"></view>
+                <view class="skeleton-btn"></view>
+            </view>
+        </view>
+        <!-- 列表 -->
+        <view class="list" v-else-if="list.length > 0">
             <view class="box row" v-for="(item, index) in list" :key="index">
             <view class="box row" v-for="(item, index) in list" :key="index">
                 <view class="input-box row verCenter" style="flex: 0 0 100%;">
                 <view class="input-box row verCenter" style="flex: 0 0 100%;">
                     <text class="label">源 库 位：</text>
                     <text class="label">源 库 位：</text>
@@ -229,6 +246,7 @@
                 limit: 1000,
                 limit: 1000,
                 index: 0,
                 index: 0,
                 list: [],
                 list: [],
+                loading: true, //加载状态
                 detail: {},
                 detail: {},
                 warehouse_id: '',
                 warehouse_id: '',
                 stock_in_type: '',
                 stock_in_type: '',
@@ -315,6 +333,7 @@
              * 获取列表数据
              * 获取列表数据
              */
              */
             getData() {
             getData() {
+                this.loading = true;
                 this.request(API.getTransferDetail, 'GET', { page: this.page, limit: this.limit, ...this.searchParams }, false).then(res => {
                 this.request(API.getTransferDetail, 'GET', { page: this.page, limit: this.limit, ...this.searchParams }, false).then(res => {
                     if (res.code === 0) {
                     if (res.code === 0) {
                         this.list = res.data.trans_items;
                         this.list = res.data.trans_items;
@@ -324,6 +343,7 @@
                             icon: 'error'
                             icon: 'error'
                         });
                         });
                     }
                     }
+                    this.loading = false;
                 });
                 });
             },
             },
             /**
             /**