新增提交预约页面

 /*
 /*
  * @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-15 13:36:19
+ * @LastEditTime: 2024-01-15 16:26:34
  * @FilePath: /xysBooking/src/route.js
  * @FilePath: /xysBooking/src/route.js
  * @Description: 文件描述
  * @Description: 文件描述
  */
  */
@@ -28,6 +28,13 @@ export default [
     },
     },
   },
   },
   {
   {
+    path: '/submit',
+    component: () => import('@/views/submit.vue'),
+    meta: {
+      title: '预约人员信息',
+    },
+  },
+  {
     path: '/auth',
     path: '/auth',
     component: () => import('@/views/auth.vue'),
     component: () => import('@/views/auth.vue'),
     meta: {
     meta: {

+<!--
+ * @Date: 2024-01-15 16:25:51
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-01-15 17:30:46
+ * @FilePath: /xysBooking/src/views/submit.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="submit-page">
+    <div class="visit-time">
+      <div>参访时间</div>
+      <div>2024-01-10 05:00-08:00&nbsp;<van-icon name="arrow" /></div>
+    </div>
+    <div class="add-visitors">
+      <div><van-icon name="plus" /> 添加参观者</div>
+    </div>
+    <div class="visitors-list">
+      <div v-for="(item, index) in visitorList" :key="index" @click="addVisitor(item)" class="visitor-item">
+        <div style="margin-right: 1rem;">
+          <van-icon v-if="!checked_visitors.includes(item.id)" name="https://cdn.ipadbiz.cn/xys/booking/%E5%A4%9A%E9%80%8901@2x.png" />&nbsp;
+          <van-icon v-else name="https://cdn.ipadbiz.cn/xys/booking/%E5%A4%9A%E9%80%8902@2x.png" />&nbsp;
+        </div>
+        <div>
+          <p style="color: #A67939;">张雨燕</p>
+          <p>证件号：3101******234</p>
+          <p style="color: #9C9A9A; font-size: 0.8rem;">*已预约过2024-01-10参观，请不要重复预约</p>
+        </div>
+      </div>
+    </div>
+    <div style="height: 5rem;"></div>
+    <div class="submit-wrapper">
+      <div class="left">
+        <div style="margin-left: 1rem; display: flex;align-items: center;">
+          订单金额&nbsp;&nbsp;<div style="color: #FF1919;display: inline-block;">¥<div style="font-size: 1.5rem;display: inline-block;">50</div></div>
+        </div>
+      </div>
+      <div class="right">提交订单</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 visitorList = ref([{ id: '1', name: '张雨燕1', idCard: '3101******234' }, {  id: '2', name: '张雨燕2', idCard: '3101******234' }, {  id: '3',name: '张雨燕3', idCard: '3101******234' }, {  id: '4',name: '张雨燕4', idCard: '3101******234' }]);
+
+const checked_visitors = ref([]);
+const addVisitor = (item) => {
+  if (checked_visitors.value.includes(item.id)) {
+    checked_visitors.value = checked_visitors.value.filter((v) => v !== item.id);
+  } else {
+    checked_visitors.value.push(item.id);
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.submit-page {
+  margin: 1rem;
+  position: relative;
+  .visit-time {
+    background-color: #FFF;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem;
+    border-radius: 8px;
+  }
+  .add-visitors {
+    border: 1px dashed #A67939;
+    color: #A67939;
+    border-radius: 5px;
+    text-align: center;
+    padding: .65rem 0;
+    margin: 1rem 0;
+    font-size: 1.15rem;
+  }
+  .visitors-list {
+    .visitor-item {
+      background-color: #FFF;
+      border-radius: 8px;
+      padding: 1rem;
+      margin-bottom: 1rem;
+      display: flex;
+      align-items: center;
+    }
+  }
+  .submit-wrapper {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100vw;
+    display: flex;
+    background-color: #FFF;
+    // padding: 1rem;
+    justify-content: space-between;
+    .left {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .right {
+      background-color: #A67939;
+      color: #FFF;
+      margin: 1rem;
+      padding: 0.8rem 3rem;
+      border-radius: 5px;
+    }
+  }
+}
+</style>