feat: 新的预约列表样式

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

@@ -61,6 +61,7 @@
           :time-slot="item"
           @book="onBookTap"
           @cancel="onCancelTap"
+          @card-tap="onSlotCardTap"
         />
       </view>
 
@@ -150,7 +151,7 @@ updateLayout()
 // ─── Filtered slots ───────────────────────────────────────
 const filteredSlots = computed<TimeSlotWithBookingStatus[]>(() => {
   const slots = bookingStore.slots as TimeSlotWithBookingStatus[]
-  if (!selectedPeriod.value) return [...slots]
+  if (!selectedPeriod.value) return slots
 
   const period = TIME_PERIODS[selectedPeriod.value]
   return slots.filter((slot) => {
@@ -177,7 +178,19 @@ function onDateSelect(date: string) {
 }
 
 function onPeriodChange(_period: PeriodKey) {
-  // Filtering is done client-side via computed property
+  // No-op: filtering is done client-side via computed property
+  void _period
+}
+
+// ─── Card tap → navigate to detail ───────────────────────
+function onSlotCardTap(slot: TimeSlotWithBookingStatus) {
+  if (slot.isBookedByMe && slot.myBookingId) {
+    // Already booked → show booking detail
+    uni.navigateTo({ url: `/pages/booking/detail?id=${slot.myBookingId}` })
+  } else {
+    // Not booked → show slot preview with booking action
+    uni.navigateTo({ url: `/pages/booking/detail?slotId=${slot.id}&date=${slot.date}` })
+  }
 }
 
 // ─── Book flow ────────────────────────────────────────────
@@ -213,7 +226,9 @@ async function onBookTap(slot: TimeSlotWithBookingStatus) {
       cancelText: '取消',
       success: (res) => {
         if (res.confirm) {
-          uni.navigateTo({ url: '/pages/store/index' })
+          // Switch to home tab and auto-scroll to card shop
+          uni.$emit('scrollToCardShop')
+          uni.switchTab({ url: '/pages/home/index' })
         }
       },
     })
@@ -352,7 +367,7 @@ onMounted(async () => {
 }
 
 .skeleton-card {
-  height: 140rpx;
+  height: 220rpx;
   border-radius: 20rpx;
   background: #fff;
   display: flex;
@@ -360,6 +375,7 @@ onMounted(async () => {
   align-items: center;
   padding: 28rpx 48rpx;
   gap: 20rpx;
+  margin: 0 24rpx;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
 }