From d32f592e54678ed8f06c1c26d6a8b5193d862ebb Mon Sep 17 00:00:00 2001
From: richarjiang <richarjiang@tencent.com>
Date: Thu, 10 Sep 2026 15:33:37 +0800
Subject: [PATCH] =?UTF-8?q?fix(app):=20=E4=BF=AE=E5=A4=8D=E9=A2=84?=
 =?UTF-8?q?=E7=BA=A6=E9=A1=B5=E9=A6=96=E6=AC=A1=E8=BF=9B=E5=85=A5=E5=AE=9A?=
 =?UTF-8?q?=E4=BD=8D=E5=BD=93=E5=89=8D=E6=97=B6=E6=AE=B5=E4=B8=8D=E7=94=9F?=
 =?UTF-8?q?=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/app/src/pages/booking/index.vue | 103 +++++++++++++++++++----
 1 file changed, 85 insertions(+), 18 deletions(-)

diff --git a/packages/app/src/pages/booking/index.vue b/packages/app/src/pages/booking/index.vue
index 83ee40c..ec3c7f9 100644
--- a/packages/app/src/pages/booking/index.vue
+++ b/packages/app/src/pages/booking/index.vue
@@ -85,8 +85,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, nextTick } from 'vue'
-import { onResize, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
+import { ref, computed, onMounted, nextTick, getCurrentInstance } from 'vue'
+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))
-  if (!upcoming) {
+  const upcomingIndex = slots.findIndex((slot) => !isSlotPast(slot.date, slot.startTime))
+  if (upcomingIndex === -1) {
+    // 当天所有课程均已结束，标记已滚动过，留在当前位置
     hasAutoScrolled.value = true
     return
   }
 
-  const dateWhenStarted = selectedDate.value
-  const targetId = `slot-${upcoming.id}`
-  await nextTick()
-  if (hasAutoScrolled.value || selectedDate.value !== dateWhenStarted) return
+  if (upcomingIndex === 0) {
+    // 本时段及以后的第一个课程正好是列表第 1 项，页面已经在顶部，无需额外滚动
+    hasAutoScrolled.value = true
+    return
+  }
 
-  hasAutoScrolled.value = true
-  targetSlotId.value = ''
-  await nextTick()
-  if (selectedDate.value !== dateWhenStarted) return
-  targetSlotId.value = targetId
+  isAutoScrolling = true
+  const dateWhenStarted = selectedDate.value
+  const upcoming = slots[upcomingIndex]
+  const targetId = `slot-${upcoming.id}`
+
+  try {
+    // 等待 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 loadSlots(selectedDate.value)
+  await Promise.all(tasks)
   // 首次进入：自动定位到当天本时段及以后的第一个课程
   await scrollToUpcoming()
 })
+
+onShow(async () => {
+  // 如果首次进入时页面在后台预加载完成，或从其他 Tab 切入时定位未生效，在页面可见时触发定位
+  if (!hasAutoScrolled.value && filteredSlots.value.length > 0 && !bookingStore.loadingSlots) {
+    await scrollToUpcoming()
+  }
+})
 </script>
 
 <style lang="scss" scoped>