feat: 新的预约列表样式

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

@@ -48,8 +48,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
+import { ref, nextTick } from 'vue'
+import { onShow, onUnmount, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
 
 import BrandBanner from '../../components/BrandBanner.vue'
 import StudioInfo from '../../components/StudioInfo.vue'
@@ -86,10 +86,27 @@ const refreshing = ref(false)
 const cardShopRef = ref<InstanceType<typeof CardShop> | null>(null)
 const cardShopAnchorId = 'card-shop-anchor'
 const scrollTop = ref(0)
+const pendingScrollToCardShop = ref(false)
+
+// Listen for cross-page scroll request (e.g. from booking page "去购买")
+uni.$on('scrollToCardShop', () => {
+  pendingScrollToCardShop.value = true
+})
+
+onUnmount(() => {
+  uni.$off('scrollToCardShop')
+})
 
 // Refresh all data on every show
 onShow(async () => {
   await refreshData()
+
+  // If another page requested scroll to card shop, execute after data is ready
+  if (pendingScrollToCardShop.value) {
+    pendingScrollToCardShop.value = false
+    await nextTick()
+    scrollToCardShop()
+  }
 })
 
 async function refreshData() {
@@ -118,14 +135,22 @@ async function handleRefresh() {
 }
 
 function scrollToCardShop() {
-  uni.createSelectorQuery()
-    .select(`#${cardShopAnchorId}`)
-    .boundingClientRect((rect) => {
-      if (rect) {
-        scrollTop.value = rect.top
-      }
-    })
-    .exec()
+  // Reset first so setting the same value still triggers scroll
+  scrollTop.value = 0
+  nextTick(() => {
+    uni.createSelectorQuery()
+      .select(`#${cardShopAnchorId}`)
+      .boundingClientRect()
+      .selectViewport()
+      .scrollOffset()
+      .exec((res) => {
+        if (res && res[0] && res[1]) {
+          const rectTop = (res[0] as UniApp.NodeInfo).top ?? 0
+          const viewportScroll = (res[1] as UniApp.NodeInfo).scrollTop ?? 0
+          scrollTop.value = viewportScroll + rectTop
+        }
+      })
+  })
 }
 </script>