修改小程序bug

pages/mall/merchant/messages.uvue

@@ -13,9 +13,17 @@
 		</view>
 		
 			<scroll-view class="messages-list" direction="vertical" :refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
-			<view v-if="loading && conversations.length === 0" class="loading-container">
-				<text class="loading-icon">⏳</text>
-				<text class="loading-text">加载中...</text>
+			<view v-if="loading && conversations.length === 0" class="ske-msg-list">
+				<view v-for="n in 5" :key="n" class="ske-conv-item">
+					<view class="ske-avatar-circle"></view>
+					<view class="ske-conv-info">
+						<view class="ske-conv-top">
+							<view class="ske-bar ske-w50 ske-h28"></view>
+							<view class="ske-bar ske-w20 ske-h22"></view>
+						</view>
+						<view class="ske-bar ske-w75 ske-h22 ske-mt10"></view>
+					</view>
+				</view>
 			</view>
 			
 			<view v-else-if="conversations.length === 0" class="empty-container">
@@ -87,7 +95,8 @@
 				conversations: [] as ConversationType[],
 				loading: false,
 				refreshing: false,
-				merchantId: ''
+				merchantId: '',
+				isPageReady: false
 			}
 		},
 		
@@ -96,6 +105,17 @@
 		},
 		
 		onShow() {
+			// 先从缓存恢复会话列表，消除白屏
+			try {
+				const raw = uni.getStorageSync('merchant_msg_cache')
+				if (raw != null && raw !== '') {
+					const arr = JSON.parse(raw as string) as ConversationType[]
+					if (arr != null && (arr as any[]).length > 0) {
+						this.conversations = arr
+						this.isPageReady = true
+					}
+				}
+			} catch(e) {}
 			this.loadMessages()
 		},
 		
@@ -173,12 +193,17 @@
 					}
 					
 					this.conversations = Array.from(sessionMap.values()).sort((a, b) => b.unread - a.unread)
+					// 保存缓存
+					try {
+						uni.setStorageSync('merchant_msg_cache', JSON.stringify(this.conversations))
+					} catch(e) {}
 					
 				} catch (e) {
 					console.error('加载消息失败:', e)
 				} finally {
 					this.loading = false
 					this.refreshing = false
+					this.isPageReady = true
 				}
 			},
 			
@@ -248,4 +273,15 @@
 	.conv-arrow { font-size: 40rpx; color: #ccc; margin-left: 10rpx; }
 	
 	.safe-bottom { height: 160rpx; }
-</style>
+
+	/* ===== 骨架屏 ===== */
+	@keyframes ske-pulse { 0% { opacity: 1; } 50% { opacity: 0.45; } 100% { opacity: 1; } }
+	.ske-msg-list { padding: 20rpx; }
+	.ske-conv-item { display: flex; flex-direction: row; align-items: center; padding-top: 24rpx; padding-bottom: 24rpx; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: #f5f5f5; }
+	.ske-avatar-circle { width: 88rpx; height: 88rpx; border-radius: 44rpx; background-color: #e8e8e8; margin-right: 20rpx; flex-shrink: 0; animation: ske-pulse 1.4s ease-in-out infinite; }
+	.ske-conv-info { flex: 1; }
+	.ske-conv-top { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 10rpx; }
+	.ske-bar { border-radius: 8rpx; background-color: #e8e8e8; animation: ske-pulse 1.4s ease-in-out infinite; }
+	.ske-w20 { width: 20%; } .ske-w50 { width: 50%; } .ske-w75 { width: 75%; }
+	.ske-h22 { height: 22rpx; } .ske-h28 { height: 28rpx; } .ske-mt10 { margin-top: 10rpx; }
+</style>