fix(app): 在确认手势内同步调起订阅，预约页首次进入定位到当前时段

微信要求授权框落在 tap 同步栈，先 await 会丢失弹层；订阅失败不再打断预约或支付。

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

packages/app/src/components/BookingConfirmPopup.vue

@@ -159,9 +159,7 @@ async function handleConfirm() {
   try {
     await requestBookingCreatedSubscriptionMessage()
   } catch (err: unknown) {
-    const message = err instanceof Error ? err.message : '订阅消息授权失败'
+    console.warn('[subscribe] booking confirm failed', err)
-    uni.showToast({ title: message, icon: 'none' })
-    return
   } finally {
     requestingSubscribe.value = false
   }

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

@@ -22,6 +22,8 @@
     <scroll-view
       class="slot-scroll"
       scroll-y
+      :scroll-into-view="targetSlotId"
+      scroll-with-animation
       refresher-enabled
       :refresher-triggered="refreshing"
       @refresherrefresh="onRefresh"
@@ -52,14 +54,18 @@
           <text class="date-summary-text">{{ filteredSlots.length }} 个时段</text>
         </view>
 
-        <SlotCard
+        <view
           v-for="item in filteredSlots"
+          :id="`slot-${item.id}`"
           :key="item.id"
-          :time-slot="item"
+        >
-          @book="onBookTap"
+          <SlotCard
-          @cancel="onCancelTap"
+            :time-slot="item"
-          @card-tap="onSlotCardTap"
+            @book="onBookTap"
-        />
+            @cancel="onCancelTap"
+            @card-tap="onSlotCardTap"
+          />
+        </view>
       </view>
 
       <!-- Bottom padding spacer -->
@@ -79,14 +85,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, nextTick } from 'vue'
 import { onResize, onShareAppMessage, onShareTimeline } 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'
 import { useUserStore } from '../../stores/user'
 import { getErrorMessage } from '../../utils/auth'
-import { formatDate } from '../../utils/format'
+import { formatDate, isSlotPast } from '../../utils/format'
 import { getSystemLayout } from '../../utils/system'
 import DateSelector from '../../components/DateSelector.vue'
 import TimePeriodFilter from '../../components/TimePeriodFilter.vue'
@@ -105,6 +111,10 @@ const selectedPeriod = ref<PeriodKey>(null)
 const showConfirmPopup = ref(false)
 const pendingSlot = ref<TimeSlotWithBookingStatus | null>(null)
 const refreshing = ref(false)
+const targetSlotId = ref('')
+// 仅在「每次启动首次进入预约 TAB」时自动定位到当前时段及以后，
+// 切换日期/时段或下拉刷新后不再重置位置，避免打断用户的浏览位置。
+const hasAutoScrolled = ref(false)
 
 // ─── 微信分享 ───────────────────────────────────────────────
 onShareAppMessage(() => {
@@ -168,6 +178,34 @@ async function onRefresh() {
   refreshing.value = false
 }
 
+// 首次进入时滚动到当天第一个未开始的课程（"本时段及以后"）
+async function scrollToUpcoming() {
+  if (hasAutoScrolled.value) return
+
+  const slots = filteredSlots.value
+  if (slots.length === 0) {
+    // 列表还没出来（加载失败或当天无课），不要把「仅一次」用掉。
+    return
+  }
+
+  const upcoming = slots.find((slot) => !isSlotPast(slot.date, slot.startTime))
+  if (!upcoming) {
+    hasAutoScrolled.value = true
+    return
+  }
+
+  const dateWhenStarted = selectedDate.value
+  const targetId = `slot-${upcoming.id}`
+  await nextTick()
+  if (hasAutoScrolled.value || selectedDate.value !== dateWhenStarted) return
+
+  hasAutoScrolled.value = true
+  targetSlotId.value = ''
+  await nextTick()
+  if (selectedDate.value !== dateWhenStarted) return
+  targetSlotId.value = targetId
+}
+
 // ─── Event handlers ───────────────────────────────────────
 function onDateSelect(date: string) {
   selectedDate.value = date
@@ -302,6 +340,8 @@ onMounted(async () => {
   }
   // Load today's slots
   await loadSlots(selectedDate.value)
+  // 首次进入：自动定位到当天本时段及以后的第一个课程
+  await scrollToUpcoming()
 })
 </script>
 

packages/app/src/pages/card/detail.vue

@@ -357,7 +357,7 @@ import { get, post } from '../../utils/request'
 import { formatPrice, getCardCoverClass } from '../../utils/format'
 import { getSystemLayout } from '../../utils/system'
 import { useUserStore } from '../../stores/user'
-import { requestOrderPaidSubscriptionMessage } from '../../utils/wechat-subscription'
+import { requestBookingCreatedSubscriptionMessage } from '../../utils/wechat-subscription'
 import CustomNavBar from '../../components/CustomNavBar.vue'
 
 interface MyOrderStatusResponse {
@@ -888,9 +888,14 @@ async function doPurchase() {
   paymentRedirecting.value = false
   paymentConfirmationSession.value++
   pendingOrderId.value = ''
-  uni.showLoading({ title: '创建订单...' })
 
   try {
+    // 必须在 tap 同步栈里调起订阅框；失败不打断支付。
+    await requestBookingCreatedSubscriptionMessage().catch((error) => {
+      console.warn('[subscribe] purchase pre-subscribe failed', error)
+    })
+
+    uni.showLoading({ title: '创建订单...' })
     const result = await post<CreateOrderResponse>('/payment/create-order', {
       cardTypeId: card.value.id,
     })
@@ -910,7 +915,6 @@ async function doPurchase() {
     })
 
     pendingOrderId.value = result.order.id
-    await requestOrderPaidSubscriptionMessage().catch(() => undefined)
     await settlePaidOrder(result.order.id)
   } catch (err: unknown) {
     uni.hideLoading()

packages/app/src/utils/wechat-subscription.ts

@@ -86,20 +86,27 @@ function normalizeResult(result?: TemplateResult): SubscriptionMessageRequestIte
   return null
 }
 
-async function fetchTemplateConfig(): Promise<SubscriptionMessageTemplateConfig> {
+function getTemplateConfigSync(): SubscriptionMessageTemplateConfig | null {
   if (cachedConfig) {
     return cachedConfig
   }
 
   const stored = uni.getStorageSync(TEMPLATE_CONFIG_STORAGE_KEY) as SubscriptionMessageTemplateConfig | ''
   if (!stored || !Array.isArray(stored.templates)) {
-    throw new Error('订阅消息模板尚未初始化，请重新进入页面后重试')
+    return null
   }
 
-  const config: SubscriptionMessageTemplateConfig = {
+  cachedConfig = {
     templates: stored.templates.filter((item) => item.templateId),
   }
-  cachedConfig = config
+  return cachedConfig
+}
+
+async function fetchTemplateConfig(): Promise<SubscriptionMessageTemplateConfig> {
+  const config = getTemplateConfigSync()
+  if (!config) {
+    throw new Error('订阅消息模板尚未初始化，请重新进入页面后重试')
+  }
   return config
 }
 
@@ -136,37 +143,11 @@ async function reportResults(requests: SubscriptionMessageRequestItem[]): Promis
   await post('/user/subscription-messages/report', payload as unknown as Record<string, unknown>)
 }
 
-export async function requestSubscriptionMessage(scene: SubscriptionMessageScene): Promise<SubscriptionMessageRequestItem[]> {
+function normalizeSubscribeResults(
-  if (!isMpWeixin()) {
+  templates: SubscriptionMessageTemplate[],
-    return []
+  result: RequestSubscribeMessageSuccess,
-  }
+): SubscriptionMessageRequestItem[] {
-
+  return templates
-  const config = await fetchTemplateConfig()
-  const templates = getTemplatesByScene(config, scene)
-  if (templates.length === 0) {
-    console.error('[subscribe] no templates matched scene', stringifyDebugPayload({ scene, config, debugContext: getSubscribeDebugContext() }))
-    return []
-  }
-
-  const templateIds = templates.map((item) => item.templateId)
-  const debugContext = getSubscribeDebugContext()
-  console.log('[subscribe] requestSubscribeMessage:start', stringifyDebugPayload({ scene, templateIds, templates, debugContext }))
-
-  const result = await new Promise<RequestSubscribeMessageSuccess>((resolve, reject) => {
-    uni.requestSubscribeMessage({
-      tmplIds: templateIds,
-      success: (res) => {
-        console.log('[subscribe] requestSubscribeMessage:success', stringifyDebugPayload({ scene, response: res, templateIds, debugContext }))
-        resolve(res as RequestSubscribeMessageSuccess)
-      },
-      fail: (err) => {
-        console.error('[subscribe] requestSubscribeMessage:fail', stringifyDebugPayload({ scene, error: err, templateIds, debugContext }))
-        reject(buildSubscribeError(err as RequestSubscribeMessageFail, scene, templateIds))
-      },
-    })
-  })
-
-  const requests = templates
     .map<SubscriptionMessageRequestItem | null>((item) => {
       const normalized = normalizeResult(result[item.templateId])
       if (!normalized) {
@@ -180,18 +161,53 @@ export async function requestSubscriptionMessage(scene: SubscriptionMessageScene
       }
     })
     .filter((item): item is SubscriptionMessageRequestItem => item !== null)
-
-  console.log('[subscribe] requestSubscribeMessage:normalized', stringifyDebugPayload({ scene, result, requests, templateIds, debugContext }))
-
-  await reportResults(requests)
-  return requests
 }
 
-export async function requestOrderPaidSubscriptionMessage(): Promise<SubscriptionMessageRequestItem[]> {
+/**
-  return requestSubscriptionMessage(SubscriptionMessageScene.BOOKING_CREATED)
+ * 在当前调用栈同步调起 `uni.requestSubscribeMessage`。
+ * 微信要求授权框必须落在 tap / 支付 success 的同步栈里，因此这里不能先 `await`。
+ */
+export function requestSubscriptionMessage(scene: SubscriptionMessageScene): Promise<SubscriptionMessageRequestItem[]> {
+  if (!isMpWeixin()) {
+    return Promise.resolve([])
+  }
+
+  const config = getTemplateConfigSync()
+  if (!config) {
+    return Promise.reject(new Error('订阅消息模板尚未初始化，请重新进入页面后重试'))
+  }
+
+  const templates = getTemplatesByScene(config, scene)
+  if (templates.length === 0) {
+    console.error('[subscribe] no templates matched scene', stringifyDebugPayload({ scene, config, debugContext: getSubscribeDebugContext() }))
+    return Promise.resolve([])
+  }
+
+  const templateIds = templates.map((item) => item.templateId)
+  const debugContext = getSubscribeDebugContext()
+  console.log('[subscribe] requestSubscribeMessage:start', stringifyDebugPayload({ scene, templateIds, templates, debugContext }))
+
+  return new Promise<SubscriptionMessageRequestItem[]>((resolve, reject) => {
+    uni.requestSubscribeMessage({
+      tmplIds: templateIds,
+      success: (res) => {
+        const response = res as RequestSubscribeMessageSuccess
+        const requests = normalizeSubscribeResults(templates, response)
+        console.log('[subscribe] requestSubscribeMessage:success', stringifyDebugPayload({ scene, response, templateIds, debugContext }))
+        console.log('[subscribe] requestSubscribeMessage:normalized', stringifyDebugPayload({ scene, result: response, requests, templateIds, debugContext }))
+        void reportResults(requests)
+          .then(() => resolve(requests))
+          .catch(reject)
+      },
+      fail: (err) => {
+        console.error('[subscribe] requestSubscribeMessage:fail', stringifyDebugPayload({ scene, error: err, templateIds, debugContext }))
+        reject(buildSubscribeError(err as RequestSubscribeMessageFail, scene, templateIds))
+      },
+    })
+  })
 }
 
-export async function requestBookingCreatedSubscriptionMessage(): Promise<SubscriptionMessageRequestItem[]> {
+export function requestBookingCreatedSubscriptionMessage(): Promise<SubscriptionMessageRequestItem[]> {
   return requestSubscriptionMessage(SubscriptionMessageScene.BOOKING_CREATED)
 }