feat: 添加预约引导弹窗组件

- 新增 BookingGuideDialog 组件，提示用户前往小程序预约
- 首页点击"开始预约"按钮时弹出引导框
- 弹窗包含"关闭"和"预约记录"两个按钮
- 点击"预约记录"跳转到预约记录页面

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

+{
+  "permissions": {
+    "allow": [
+      "Bash(git add:*)",
+      "Bash(git commit:*)"
+    ]
+  }
+}

@@ -7,6 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    BookingGuideDialog: typeof import('./src/components/BookingGuideDialog.vue')['default']
     QrCode: typeof import('./src/components/qrCode.vue')['default']
     QrCodeSearch: typeof import('./src/components/qrCodeSearch.vue')['default']
     ReserveCard: typeof import('./src/components/reserveCard.vue')['default']
@@ -18,6 +19,7 @@ declare module '@vue/runtime-core' {
     VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
     VanCol: typeof import('vant/es')['Col']
     VanDatePicker: typeof import('vant/es')['DatePicker']
+    VanDialog: typeof import('vant/es')['Dialog']
     VanField: typeof import('vant/es')['Field']
     VanForm: typeof import('vant/es')['Form']
     VanIcon: typeof import('vant/es')['Icon']

+<!--
+ * @Date: 2026-02-13
+ * @Description: 预约引导弹窗组件
+ * @component BookingGuideDialog
+ * @example
+ * <BookingGuideDialog v-model:show="showDialog" />
+-->
+<template>
+  <van-popup
+    v-model:show="visible"
+    round
+    position="center"
+    :style="{ width: '80vw', 'max-width': '320px' }"
+    closeable
+    @click-close-icon="handleClose"
+  >
+    <div class="booking-guide-popup">
+      <!-- 标题 -->
+      <div class="popup-title">预约提示</div>
+
+      <!-- 内容 -->
+      <div class="popup-content">
+        <p>请前往小程序进行预约</p>
+        <p class="highlight">如已在 H5 端完成预约，可在预约记录中查看，并进行核销</p>
+      </div>
+
+      <!-- 按钮组 -->
+      <div class="popup-footer">
+        <van-button
+          class="footer-btn cancel-btn"
+          @click="handleClose"
+        >
+          关闭
+        </van-button>
+        <van-button
+          class="footer-btn confirm-btn"
+          type="primary"
+          color="#A67939"
+          @click="goToBookingList"
+        >
+          预约记录
+        </van-button>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<script setup>
+/**
+ * 预约引导弹窗组件
+ *
+ * @description 提示用户前往小程序预约，H5 预约可在预约记录中查看
+ * @component BookingGuideDialog
+ * @example
+ * <BookingGuideDialog v-model:visible="showDialog" />
+ */
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+const props = defineProps({
+  /** 是否显示弹窗 */
+  modelValue: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits({
+  /** 更新显示状态 */
+  'update:modelValue': (value) => typeof value === 'boolean'
+})
+
+const router = useRouter()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+/**
+ * 关闭弹窗
+ */
+const handleClose = () => {
+  visible.value = false
+}
+
+/**
+ * 跳转到预约记录页面
+ */
+const goToBookingList = () => {
+  visible.value = false
+  router.push('/bookingList')
+}
+</script>
+
+<style lang="less" scoped>
+.booking-guide-popup {
+  padding: 24px 20px 20px;
+  text-align: center;
+
+  .popup-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #1E1E1E;
+    margin-bottom: 16px;
+  }
+
+  .popup-content {
+    line-height: 1.8;
+    font-size: 15px;
+    color: #595959;
+    margin-bottom: 24px;
+
+    p {
+      margin: 0 0 12px 0;
+    }
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+
+    .highlight {
+      color: #A67939;
+      font-weight: 500;
+    }
+  }
+
+  .popup-footer {
+    display: flex;
+    gap: 12px;
+
+    .footer-btn {
+      flex: 1;
+      height: 44px;
+      border-radius: 8px;
+      font-size: 15px;
+      border: none;
+    }
+
+    .cancel-btn {
+      background-color: #F5F5F5;
+      color: #595959;
+
+      &:active {
+        background-color: #E6E6E6;
+      }
+    }
+
+    .confirm-btn {
+      background-color: #A67939;
+      color: #FFFFFF;
+
+      &:active {
+        background-color: #8A6B30;
+      }
+    }
+  }
+}
+</style>

 <!--
  * @Date: 2023-06-21 10:23:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-02-05 18:36:21
+ * @LastEditTime: 2026-02-13 09:26:05
  * @FilePath: /xysBooking/src/views/index.vue
  * @Description: 预约页首页
 -->
@@ -31,7 +31,7 @@
       </div> -->
       <div ref="root" class="index-circular">
         <div class="booking-wrapper">
-          <div class="booking" @click="toBooking">
+          <div class="booking" @click="handleBookingClick">
             <div><van-icon size="3rem" color="#FFFFFF" :name="icon_1" /></div>
             <div style="color: #FFF;">开始预约</div>
           </div>
@@ -39,6 +39,9 @@
       </div>
       <div class="logo"></div>
     </div>
+
+    <!-- 预约引导弹窗 -->
+    <BookingGuideDialog v-model:show="showGuideDialog" />
     <div class="index-nav">
       <div class="nav-logo">
         <van-icon size="1.5rem" :name="icon_3" color="#A67939" />
@@ -68,6 +71,7 @@ import { Cookies, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils
 import { showSuccessToast, showFailToast } from 'vant';
 import { billListAPI } from '@/api/index';
 import { useGo } from '@/hooks/useGo'
+import BookingGuideDialog from '@/components/BookingGuideDialog.vue'
 import icon_1 from '@/assets/images/立即预约@2x.png'
 import icon_2 from '@/assets/images/预约记录@2x.png'
 import icon_3 from '@/assets/images/首页02@2x.png'
@@ -82,6 +86,17 @@ useTitle($route.meta.title);
 
 const go = useGo();
 
+// 预约引导弹窗显示状态
+const showGuideDialog = ref(false);
+
+/**
+ * 处理开始预约点击
+ * @description 显示预约引导弹窗
+ */
+const handleBookingClick = () => {
+  showGuideDialog.value = true;
+}
+
 const toBooking = () => { // 跳转到预约须知
   go('/notice');
 }