feat: 添加最新预约加载骨架屏状态

pages/index/index.js

@@ -6,7 +6,8 @@ Page({
   data: {
     isLoggedIn: false,
     loginFailed: false,
-    latestRecord: null
+    latestRecord: null,
+    recordLoading: false
   },
 
   onLoad() {
@@ -53,6 +54,7 @@ Page({
   },
 
   async loadLatestRecord() {
+    this.setData({ recordLoading: true })
     try {
       const openid = app.globalData.userInfo.openid
       const record = await appointmentDB.getLatest(openid)
@@ -64,6 +66,8 @@ Page({
     } catch (err) {
       console.error('加载最新预约失败', err)
       this.setData({ latestRecord: null })
+    } finally {
+      this.setData({ recordLoading: false })
     }
   },
 

pages/index/index.wxml

@@ -43,7 +43,19 @@
     </view>
 
     <!-- 最新预约摘要 -->
-    <view class="latest-card" wx:if="{{latestRecord}}">
+    <view class="latest-card" wx:if="{{recordLoading}}">
+      <view class="latest-header">
+        <text class="latest-title">最新预约</text>
+      </view>
+      <view class="latest-body">
+        <view class="skeleton-row"><view class="skeleton-bar" style="width:60%"></view></view>
+        <view class="skeleton-row"><view class="skeleton-bar" style="width:80%"></view></view>
+        <view class="skeleton-row"><view class="skeleton-bar" style="width:50%"></view></view>
+        <view class="skeleton-row"><view class="skeleton-bar" style="width:40%"></view></view>
+      </view>
+    </view>
+
+    <view class="latest-card" wx:elif="{{latestRecord}}">
       <view class="latest-header">
         <view class="latest-header-left">
           <text class="latest-title">最新预约</text>

pages/index/index.wxss

@@ -285,3 +285,24 @@ page {
   color: #b8c9db;
   letter-spacing: 4rpx;
 }
+
+/* 骨架屏 */
+.skeleton-row {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 8rpx 0;
+}
+
+.skeleton-bar {
+  height: 24rpx;
+  border-radius: 8rpx;
+  background: linear-gradient(90deg, #e8eef5 25%, #dbeafe 50%, #e8eef5 75%);
+  background-size: 200% 100%;
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes skeleton-pulse {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}