修改小程序bug

pages/mall/merchant/index.uvue

@@ -41,7 +41,38 @@
 				</view>
 			</view>
 
-			<view class="content-area">
+			<!-- 骨架屏：数据首次加载中 -->
+			<view v-if="!isPageReady" class="ske-body">
+				<view class="ske-card-wrap">
+					<view class="ske-row ske-mb16"><view class="ske-bar ske-w30 ske-h28"></view></view>
+					<view class="ske-grid-row">
+						<view v-for="n in 4" :key="n" class="ske-cell25">
+							<view class="ske-icon-sq"></view>
+							<view class="ske-bar ske-w40 ske-mt8 ske-h32"></view>
+							<view class="ske-bar ske-w60 ske-mt6 ske-h20"></view>
+						</view>
+					</view>
+				</view>
+				<view class="ske-card-wrap">
+					<view class="ske-row ske-mb16"><view class="ske-bar ske-w30 ske-h28"></view></view>
+					<view class="ske-grid-row">
+						<view v-for="n in 8" :key="n" class="ske-cell25">
+							<view class="ske-icon-sq"></view>
+							<view class="ske-bar ske-w60 ske-mt8 ske-h20"></view>
+						</view>
+					</view>
+				</view>
+				<view class="ske-card-wrap">
+					<view v-for="n in 3" :key="n" class="ske-order-row">
+						<view class="ske-order-img"></view>
+						<view class="ske-order-info">
+							<view class="ske-bar ske-w70 ske-h26 ske-mb8"></view>
+							<view class="ske-bar ske-w40 ske-h22"></view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view v-if="isPageReady" class="content-area">
 				<!-- 今日数据卡片 -->
 				<view class="stats-card">
 					<view class="stats-header">
@@ -332,7 +363,8 @@
 				} as PendingCountsType,
 				recentOrders: [] as OrderType[],
 				unreadCount: 0,
-				refreshing: false
+				refreshing: false,
+				isPageReady: false
 			}
 		},
 
@@ -348,6 +380,32 @@
 		},
 
 		onShow() {
+			// 先从缓存恢复数据，消除白屏
+			try {
+				const raw = uni.getStorageSync('merchant_idx_cache')
+				if (raw != null && raw !== '') {
+					const c = JSON.parse(raw as string) as UTSJSONObject
+					this.shopInfo.shop_name = c.getString('shop_name') ?? null
+					this.shopInfo.shop_logo = c.getString('shop_logo') ?? null
+					this.shopInfo.rating_avg = c.getNumber('rating_avg') ?? null
+					this.shopInfo.total_sales = c.getNumber('total_sales') ?? null
+					this.todayStats = {
+						orders: c.getNumber('c_orders'),
+						sales: c.getNumber('c_sales'),
+						visitors: c.getNumber('c_visitors'),
+						conversion: c.getNumber('c_conversion')
+					}
+					this.pendingCounts = {
+						pending_shipment: c.getNumber('c_pship') ?? 0,
+						refund_requests: c.getNumber('c_refund') ?? 0,
+						low_stock: c.getNumber('c_lstock') ?? 0,
+						pending_reviews: c.getNumber('c_reviews') ?? 0
+					}
+					this.unreadCount = c.getNumber('c_unread') ?? 0
+					this.isPageReady = true
+				}
+			} catch(e) {}
+			// 后台刷新数据
 			if (this.merchantId) {
 				this.loadAllData()
 				this.startRealtimeSubscription()
@@ -424,6 +482,25 @@
 				await this.loadPendingCounts()
 				await this.loadRecentOrders()
 				await this.loadUnreadCount()
+				this.isPageReady = true
+				// 保存缓存
+				try {
+					uni.setStorageSync('merchant_idx_cache', JSON.stringify({
+						shop_name: this.shopInfo.shop_name ?? '',
+						shop_logo: this.shopInfo.shop_logo ?? '',
+						rating_avg: this.shopInfo.rating_avg ?? 5.0,
+						total_sales: this.shopInfo.total_sales ?? 0,
+						c_orders: this.todayStats.orders ?? 0,
+						c_sales: this.todayStats.sales ?? 0,
+						c_visitors: this.todayStats.visitors ?? 0,
+						c_conversion: this.todayStats.conversion ?? 0,
+						c_pship: this.pendingCounts.pending_shipment ?? 0,
+						c_refund: this.pendingCounts.refund_requests ?? 0,
+						c_lstock: this.pendingCounts.low_stock ?? 0,
+						c_reviews: this.pendingCounts.pending_reviews ?? 0,
+						c_unread: this.unreadCount
+					}))
+				} catch(e) {}
 			},
 
 			formatNumber(value: number | null): string {
@@ -900,6 +977,22 @@
 	.mp-tab-navbar { height: calc(88rpx + var(--status-bar-height)); padding-top: var(--status-bar-height); background-color: #ffffff; display: flex; flex-direction: row; align-items: center; justify-content: center; border-bottom-width: 1rpx; border-bottom-style: solid; border-bottom-color: #f0f0f0; }
 	.mp-tab-title { font-size: 34rpx; font-weight: bold; color: #333333; }
 	.safe-bottom { height: 160rpx; }
+
+	/* ===== 骨架屏 ===== */
+	@keyframes ske-pulse { 0% { opacity: 1; } 50% { opacity: 0.45; } 100% { opacity: 1; } }
+	.ske-body { padding: 24rpx; }
+	.ske-card-wrap { background: #fff; border-radius: 24rpx; padding: 28rpx; margin-bottom: 24rpx; }
+	.ske-bar { border-radius: 8rpx; background-color: #e8e8e8; animation: ske-pulse 1.4s ease-in-out infinite; }
+	.ske-icon-sq { width: 64rpx; height: 64rpx; border-radius: 16rpx; background-color: #e8e8e8; margin-bottom: 12rpx; animation: ske-pulse 1.4s ease-in-out infinite; }
+	.ske-grid-row { display: flex; flex-direction: row; flex-wrap: wrap; }
+	.ske-cell25 { width: 25%; display: flex; flex-direction: column; align-items: center; padding-top: 16rpx; padding-bottom: 16rpx; }
+	.ske-row { display: flex; flex-direction: row; }
+	.ske-order-row { display: flex; flex-direction: row; align-items: center; margin-bottom: 20rpx; }
+	.ske-order-img { width: 100rpx; height: 100rpx; border-radius: 12rpx; background-color: #e8e8e8; margin-right: 16rpx; flex-shrink: 0; animation: ske-pulse 1.4s ease-in-out infinite; }
+	.ske-order-info { flex: 1; }
+	.ske-w30 { width: 30%; } .ske-w40 { width: 40%; } .ske-w60 { width: 60%; } .ske-w70 { width: 70%; }
+	.ske-h20 { height: 20rpx; } .ske-h22 { height: 22rpx; } .ske-h26 { height: 26rpx; } .ske-h28 { height: 28rpx; } .ske-h32 { height: 32rpx; }
+	.ske-mt6 { margin-top: 6rpx; } .ske-mt8 { margin-top: 8rpx; } .ske-mb8 { margin-bottom: 8rpx; } .ske-mb16 { margin-bottom: 16rpx; }
 </style>