新增预约记录详情页面

 /*
  * @Date: 2023-06-13 13:26:46
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-01-16 11:41:28
+ * @LastEditTime: 2024-01-16 13:19:53
  * @FilePath: /xysBooking/src/route.js
  * @Description: 文件描述
  */
@@ -63,6 +63,13 @@ export default [
     },
   },
   {
+    path: '/bookingDetail',
+    component: () => import('@/views/bookingDetail.vue'),
+    meta: {
+      title: '预约记录详情',
+    },
+  },
+  {
     path: '/auth',
     component: () => import('@/views/auth.vue'),
     meta: {

@@ -23,7 +23,7 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
 //import { } from '@/utils/generateModules.js'
 //import { } from '@/utils/generateIcons.js'
 //import { } from '@/composables'
-import qrCode from '@/components/qrCode'
+import qrCode from '@/components/qrCode';
 const $route = useRoute();
 const $router = useRouter();
 useTitle($route.meta.title);

+<!--
+ * @Date: 2024-01-16 13:19:23
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-01-16 13:32:10
+ * @FilePath: /xysBooking/src/views/bookingDetail.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="booking-detail-page">
+    <qrCode></qrCode>
+    <div class="detail-wrapper">
+      <div class="detail-item">
+        <div>参访时间：</div>
+        <div>2024-01-10 05:00-08:00</div>
+      </div>
+      <div class="detail-item">
+        <div>参访人数：</div>
+        <div>2 人</div>
+      </div>
+      <div class="detail-item">
+        <div>支付金额：</div>
+        <div>¥ 50</div>
+      </div>
+      <div class="detail-item">
+        <div>下单时间：</div>
+        <div>2024-01-09 13:09</div>
+      </div>
+      <div class="detail-item">
+        <div>订单编号：</div>
+        <div>2024011012345</div>
+      </div>
+    </div>
+    <div style="height: 5rem;"></div>
+    <div class="cancel-wrapper">
+      <div class="cancel-btn ">取消预约</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
+//import { } from '@/utils/generateModules.js'
+//import { } from '@/utils/generateIcons.js'
+//import { } from '@/composables'
+import qrCode from '@/components/qrCode';
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
+
+</script>
+
+<style lang="less" scoped>
+.booking-detail-page {
+  padding: 1rem;
+  position: relative;
+  .detail-wrapper {
+    line-height: 1.7;
+    font-size: 1rem;
+    .detail-item {
+      display: flex;
+      justify-content: space-between;
+      div:first-child {
+        color: #959595;
+      }
+    }
+  }
+  .cancel-wrapper {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 5rem;
+    background: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.2rem;
+    color: #000;
+    .cancel-btn {
+      background-color: #A67939;
+      color: #FFF;
+      font-size: 1rem;
+      padding: 0.8rem 8rem;
+      border-radius: 5px;
+    }
+  }
+}
+</style>