fix(app): 修复预约页首次进入定位当前时段不生效

Co-authored-by: Cursor <cursoragent@cursor.com>

packages/app/src/pages/booking/index.vue

@@ -85,8 +85,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, nextTick } from 'vue'
+import { ref, computed, onMounted, nextTick, getCurrentInstance } from 'vue'
-import { onResize, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
+import { onResize, onShareAppMessage, onShareTimeline, onShow } from '@dcloudio/uni-app'
 import type { TimeSlotWithBookingStatus, MembershipWithCardType } from '@mp-pilates/shared'
 import { BookingStatus, TIME_PERIODS } from '@mp-pilates/shared'
 import { useBookingStore } from '../../stores/booking'
@@ -178,32 +178,92 @@ async function onRefresh() {
   refreshing.value = false
 }
 
+const instance = getCurrentInstance()
+let isAutoScrolling = false
+
+/**
+ * 轮询等待目标节点在视图层完成挂载与排版
+ */
+function waitForElement(selector: string, maxRetries = 10, interval = 50): Promise<boolean> {
+  return new Promise((resolve) => {
+    let retries = 0
+
+    function check() {
+      const query = instance?.proxy
+        ? uni.createSelectorQuery().in(instance.proxy)
+        : uni.createSelectorQuery()
+
+      const q = query
+        .select(selector)
+        .boundingClientRect((data) => {
+          const node = Array.isArray(data) ? data[0] : data
+          if (node && node.top !== undefined) {
+            resolve(true)
+          } else if (retries < maxRetries) {
+            retries++
+            setTimeout(check, interval)
+          } else {
+            resolve(false)
+          }
+        })
+      // 触发查询
+      q['exec']()
+    }
+
+    check()
+  })
+}
+
 // 首次进入时滚动到当天第一个未开始的课程（"本时段及以后"）
 async function scrollToUpcoming() {
-  if (hasAutoScrolled.value) return
+  if (hasAutoScrolled.value || isAutoScrolling) return
+  if (bookingStore.loadingSlots) return
 
   const slots = filteredSlots.value
   if (slots.length === 0) {
-    // 列表还没出来（加载失败或当天无课），不要把「仅一次」用掉。
+    // 列表还没加载出来（加载中或当天无课），不要把「仅一次」用掉。
     return
   }
 
-  const upcoming = slots.find((slot) => !isSlotPast(slot.date, slot.startTime))
+  const upcomingIndex = slots.findIndex((slot) => !isSlotPast(slot.date, slot.startTime))
-  if (!upcoming) {
+  if (upcomingIndex === -1) {
+    // 当天所有课程均已结束，标记已滚动过，留在当前位置
     hasAutoScrolled.value = true
     return
   }
 
+  if (upcomingIndex === 0) {
+    // 本时段及以后的第一个课程正好是列表第 1 项，页面已经在顶部，无需额外滚动
+    hasAutoScrolled.value = true
+    return
+  }
+
+  isAutoScrolling = true
   const dateWhenStarted = selectedDate.value
+  const upcoming = slots[upcomingIndex]
   const targetId = `slot-${upcoming.id}`
-  await nextTick()
-  if (hasAutoScrolled.value || selectedDate.value !== dateWhenStarted) return
 
-  hasAutoScrolled.value = true
+  try {
-  targetSlotId.value = ''
+    // 等待 Vue 虚拟 DOM 提交并分发 setData
     await nextTick()
+    // 确保原生视图层已完成该节点的挂载与布局排版
+    const isReady = await waitForElement(`#${targetId}`, 10, 50)
+    if (!isReady || selectedDate.value !== dateWhenStarted) {
+      // 节点尚未在视图层就绪（例如 Tab 处于后台未完成渲染）或用户已切换日期，不锁定 hasAutoScrolled，留待 onShow 或后续就绪时执行
+      return
+    }
+
+    if (targetSlotId.value === targetId) {
+      targetSlotId.value = ''
+      await new Promise((resolve) => setTimeout(resolve, 50))
       if (selectedDate.value !== dateWhenStarted) return
+    }
+
     targetSlotId.value = targetId
+    hasAutoScrolled.value = true
+  } finally {
+    isAutoScrolling = false
+  }
 }
 
 // ─── Event handlers ───────────────────────────────────────
@@ -334,15 +394,22 @@ async function onCancelTap(slot: TimeSlotWithBookingStatus) {
 
 // ─── Lifecycle ────────────────────────────────────────────
 onMounted(async () => {
+  const tasks: Promise<unknown>[] = [loadSlots(selectedDate.value)]
   // Load memberships if logged in but not yet fetched
   if (userStore.loggedIn && userStore.activeMemberships.length === 0) {
-    await userStore.fetchMemberships()
+    tasks.push(userStore.fetchMemberships())
   }
-  // Load today's slots
+  await Promise.all(tasks)
-  await loadSlots(selectedDate.value)
   // 首次进入：自动定位到当天本时段及以后的第一个课程
   await scrollToUpcoming()
 })
+
+onShow(async () => {
+  // 如果首次进入时页面在后台预加载完成，或从其他 Tab 切入时定位未生效，在页面可见时触发定位
+  if (!hasAutoScrolled.value && filteredSlots.value.length > 0 && !bookingStore.loadingSlots) {
+    await scrollToUpcoming()
+  }
+})
 </script>
 
 <style lang="scss" scoped>