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

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

assets/css/picking/index.scss

@@ -54,6 +54,37 @@
         padding-bottom: 150rpx;
         padding-bottom: 150rpx;
         flex-wrap: wrap;
         flex-wrap: wrap;
 
 
+        // 骨架屏样式
+        .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: 68rpx;
+                height: 30rpx;
+                background: linear-gradient(90deg, #f0f0f2 25%, #e8e8e8 50%, #f0f0f2 75%);
+                background-size: 200% 100%;
+                animation: skeleton-loading 1.5s infinite;
+                border-radius: 8rpx;
+                position: absolute;
+                right: 17rpx;
+                bottom: 13rpx;
+            }
+        }
+
+        @keyframes skeleton-loading {
+            0% {
+                background-position: 200% 0;
+            }
+            100% {
+                background-position: -200% 0;
+            }
+        }
+
         .box {
         .box {
             position: relative;
             position: relative;
             padding: 15rpx 17rpx 17rpx 17rpx;
             padding: 15rpx 17rpx 17rpx 17rpx;

pages/picking/index.vue

@@ -23,8 +23,22 @@
                 <text class="iconfont icon-a-juxing11" @click="clearInput()" v-if="input_flag"></text>
                 <text class="iconfont icon-a-juxing11" @click="clearInput()" v-if="input_flag"></text>
             </view>
             </view>
         </view>
         </view>
+        <!-- 骨架屏 -->
+        <view class="list row bothSide" v-if="loading && list.length === 0">
+            <view class="box skeleton-box" v-for="i in 4" :key="'skeleton-' + i">
+                <view class="skeleton-item" style="width: 65%; height: 32rpx; margin-bottom: 20rpx;"></view>
+                <view class="skeleton-item" style="width: 50%; height: 32rpx; margin-bottom: 20rpx;"></view>
+                <view class="skeleton-item" style="width: 55%; height: 32rpx; margin-bottom: 20rpx;"></view>
+                <view class="bor row"></view>
+                <view class="skeleton-item" style="width: 45%; height: 28rpx; margin-bottom: 16rpx;"></view>
+                <view class="skeleton-item" style="width: 40%; height: 28rpx; margin-bottom: 16rpx;"></view>
+                <view class="skeleton-item" style="width: 70%; height: 28rpx; margin-bottom: 16rpx;"></view>
+                <view class="skeleton-item" style="width: 50%; height: 28rpx; margin-bottom: 16rpx;"></view>
+                <view class="skeleton-btn"></view>
+            </view>
+        </view>
         <!-- 列表区 -->
         <!-- 列表区 -->
-        <view class="list row bothSide" v-if="list.length > 0">
+        <view class="list row bothSide" v-else-if="list.length > 0">
             <view class="box" v-for="(item, index) in list" :key="index">
             <view class="box" v-for="(item, index) in list" :key="index">
                 <view class="text-item row verCenter">
                 <view class="text-item row verCenter">
                     <text class="label">出库单号：</text>
                     <text class="label">出库单号：</text>
@@ -84,6 +98,8 @@
                 limit: 30,
                 limit: 30,
                 array: ['出库单号', '全量搜索'],
                 array: ['出库单号', '全量搜索'],
                 list: [],
                 list: [],
+                loading: true, //加载状态
+                hasMoreData: true,
                 searchParams: {
                 searchParams: {
                     search_mod: 0,
                     search_mod: 0,
                     search_keyword: '',
                     search_keyword: '',
@@ -118,6 +134,7 @@
              * 获取列表数据
              * 获取列表数据
              */
              */
             getData() {
             getData() {
+                this.loading = true;
                 this.request(API.getNoTakeList, 'POST', { page: this.page, limit: this.limit, ...this.searchParams }, false).then(res => {
                 this.request(API.getNoTakeList, 'POST', { page: this.page, limit: this.limit, ...this.searchParams }, false).then(res => {
                     if (res.code === 0) {
                     if (res.code === 0) {
                         if (res.data.list.length > 0) {
                         if (res.data.list.length > 0) {
@@ -132,6 +149,7 @@
                             icon: 'error'
                             icon: 'error'
                         });
                         });
                     }
                     }
+                    this.loading = false;
                 });
                 });
             },
             },
             /**
             /**