From 54e30da0035aab13b0167ff3e8c5e10e726f86be Mon Sep 17 00:00:00 2001
From: richarjiang <richarjiang@tencent.com>
Date: Fri, 10 Apr 2026 11:29:09 +0800
Subject: [PATCH] =?UTF-8?q?fix(app):=20=E4=BC=98=E5=8C=96=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E4=BC=9A=E5=91=98=E5=8D=A1=E9=97=AA=E7=83=81=E5=92=8C?=
 =?UTF-8?q?=E5=8D=B3=E5=B0=86=E4=B8=8A=E8=AF=BE=E5=8D=A1=E7=89=87=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CardShop: 采用 stale-while-revalidate 模式，仅首次加载显示骨架屏，
  切换 tab 回来时保留旧数据静默刷新，消除列表闪烁
- UpcomingBooking: 补充 PENDING_CONFIRMATION 状态的中文映射和样式
- UpcomingBooking: 卡片点击跳转到预约详情页
---
 packages/app/src/components/CardShop.vue        | 13 +++++++++++--
 packages/app/src/components/UpcomingBooking.vue | 10 ++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/CardShop.vue b/packages/app/src/components/CardShop.vue
index 1ddb86e..6414a6a 100644
--- a/packages/app/src/components/CardShop.vue
+++ b/packages/app/src/components/CardShop.vue
@@ -79,16 +79,25 @@ import { formatPrice, getCardCoverClass } from '../utils/format'
 
 const cardTypes = ref<CardType[]>([])
 const loading = ref(false)
+const hasLoaded = ref(false)
 
 async function fetchCardTypes() {
-  loading.value = true
+  // Stale-While-Revalidate: only show skeleton on first load
+  // Subsequent refreshes silently update data in background
+  if (!hasLoaded.value) {
+    loading.value = true
+  }
   try {
     const result = await get<CardType[]>('/membership/card-types')
     cardTypes.value = result
       .filter((c) => c.isActive)
       .sort((a, b) => a.sortOrder - b.sortOrder)
+    hasLoaded.value = true
   } catch {
-    uni.showToast({ title: '加载会员卡失败', icon: 'none' })
+    // Only show error toast on first load; silent fail on background refresh
+    if (!hasLoaded.value) {
+      uni.showToast({ title: '加载会员卡失败', icon: 'none' })
+    }
   } finally {
     loading.value = false
   }
diff --git a/packages/app/src/components/UpcomingBooking.vue b/packages/app/src/components/UpcomingBooking.vue
index 87d947f..2224877 100644
--- a/packages/app/src/components/UpcomingBooking.vue
+++ b/packages/app/src/components/UpcomingBooking.vue
@@ -9,6 +9,7 @@
       v-for="booking in displayedBookings"
       :key="booking.id"
       class="booking-card"
+      @tap="goToBookingDetail(booking.id)"
     >
       <!-- Date column -->
       <view class="date-col">
@@ -72,6 +73,7 @@ function formatTime(timeStr: string): string {
 
 function statusLabel(status: BookingStatus): string {
   const map: Record<BookingStatus, string> = {
+    [BookingStatus.PENDING_CONFIRMATION]: '待确认',
     [BookingStatus.CONFIRMED]: '已确认',
     [BookingStatus.CANCELLED]: '已取消',
     [BookingStatus.COMPLETED]: '已完成',
@@ -81,6 +83,7 @@ function statusLabel(status: BookingStatus): string {
 }
 
 function statusDotClass(status: BookingStatus): string {
+  if (status === BookingStatus.PENDING_CONFIRMATION) return 'dot--pending'
   if (status === BookingStatus.CONFIRMED) return 'dot--confirmed'
   if (status === BookingStatus.COMPLETED) return 'dot--completed'
   if (status === BookingStatus.CANCELLED) return 'dot--cancelled'
@@ -88,6 +91,7 @@ function statusDotClass(status: BookingStatus): string {
 }
 
 function statusTextClass(status: BookingStatus): string {
+  if (status === BookingStatus.PENDING_CONFIRMATION) return 'text--pending'
   if (status === BookingStatus.CONFIRMED) return 'text--confirmed'
   if (status === BookingStatus.COMPLETED) return 'text--completed'
   if (status === BookingStatus.CANCELLED) return 'text--cancelled'
@@ -97,6 +101,10 @@ function statusTextClass(status: BookingStatus): string {
 function goToBookings() {
   uni.navigateTo({ url: '/pages/profile/bookings' })
 }
+
+function goToBookingDetail(id: string) {
+  uni.navigateTo({ url: `/pages/booking/detail?id=${id}` })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -207,6 +215,7 @@ function goToBookings() {
   border-radius: 50%;
 }
 
+.dot--pending   { background: #f39c12; }
 .dot--confirmed { background: #27ae60; }
 .dot--completed { background: #3498db; }
 .dot--cancelled { background: #e74c3c; }
@@ -217,6 +226,7 @@ function goToBookings() {
   color: #999;
 }
 
+.text--pending   { color: #f39c12; }
 .text--confirmed { color: #27ae60; }
 .text--completed { color: #3498db; }
 .text--cancelled { color: #e74c3c; }