新增预约记录页面

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

+<!--
+ * @Date: 2024-01-16 11:37:10
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-01-16 13:17:42
+ * @FilePath: /xysBooking/src/views/bookingList.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="booking-list-page">
+    <div v-for="(item, index) in bookingList" :key="index" class="booking-list-item">
+      <div class="booking-list-item-header">
+        <div>{{ item.booking_time }}</div>
+        <div :class="[formatStatus(item.status).key, 'status']">{{ formatStatus(item.status).value }}</div>
+      </div>
+      <div class="booking-list-item-body">
+        <div class="booking-num">
+          <div class="num-body">预约人数：<span>{{ item.num }} 人</span></div>
+          <div><van-icon name="arrow" /></div>
+        </div>
+        <div class="booking-price">支付金额：<span>¥ {{ item.price }}</span></div>
+        <div class="booking-time">下单时间：<span>{{ item.order_time }}</span></div>
+      </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'
+const $route = useRoute();
+const $router = useRouter();
+useTitle($route.meta.title);
+
+const bookingList = ref([{
+  id: '1',
+  booking_time: '2024-01-10 05:00-08:00',
+  status: 'success',
+  num: '2',
+  price: '50',
+  order_time: '2024-01-09 13:09',
+}, {
+  id: '2',
+  booking_time: '2024-01-11 05:00-08:00',
+  status: 'cancel',
+  num: '2',
+  price: '350',
+  order_time: '2024-01-09 13:09',
+}, {
+  id: '3',
+  booking_time: '2024-01-12 05:00-08:00',
+  status: 'used',
+  num: '2',
+  price: '150',
+  order_time: '2024-01-09 13:09',
+}]);
+
+const formatStatus = (status) => {
+  switch (status) {
+    case 'success':
+      return {
+        key: 'success',
+        value: '预约成功'
+      }
+    case 'cancel':
+      return {
+        key: 'cancel',
+        value: '已取消'
+      }
+    case 'used':
+      return {
+        key: 'used',
+        value: '已使用'
+      }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.booking-list-page {
+  padding: 1rem;
+  .booking-list-item {
+    background-color: #FFF;
+    border-radius: 8px;
+    margin-bottom: 1rem;
+    .booking-list-item-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1rem;
+      border-bottom: 1px dashed #f0f0f0;
+      .status {
+        font-size: 0.75rem;
+        padding: 5px 8px;
+        border-radius: 5px;
+      }
+      .success {
+        color: #A67939;
+        background-color: #FBEEDC;
+      }
+      .cancel {
+        color: #929292;
+        background-color: #E6E6E6;
+      }
+      .used {
+        color: #477F3D;
+        background-color: #E5EFE3;
+      }
+    }
+    .booking-list-item-body {
+      padding: 1rem;
+      line-height: 1.7;
+      .booking-num {
+        display: flex;
+        justify-content: space-between;
+        .num-body {
+          color: #959595;
+          span {
+            color: #1E1E1E;
+          }
+        }
+      }
+      .booking-price {
+        color: #959595;
+        span {
+          color: #1E1E1E;
+        }
+      }
+      .booking-time {
+        color: #959595;
+        span {
+          color: #1E1E1E;
+        }
+      }
+    }
+  }
+}
+</style>