新增预约码页面

@@ -7,6 +7,8 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    BookingCode: typeof import('./src/components/bookingCode.vue')['default']
+    QrCode: typeof import('./src/components/qrCode.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VanButton: typeof import('vant/es')['Button']

+<!--
+ * @Date: 2024-01-16 10:06:47
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-01-16 11:28:46
+ * @FilePath: /xysBooking/src/components/qrCode.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="qr-code-page">
+    <div v-if="has_qrcode" class="show-qrcode">
+      <div class="qrcode-content">
+        <div class="user-info">{{ userinfo.name }}&nbsp;{{ userinfo.id }}</div>
+        <div class="user-qrcode">
+          <div class="left" @click="prevCode">
+            <img src="https://cdn.ipadbiz.cn/xys/booking/%E5%B7%A6@2x.png">
+          </div>
+          <div class="center">
+            <img src="https://cdn.ipadbiz.cn/xys/booking/WechatIMG576.jpg">
+            <div v-if="useStatus === '1'" class="qrcode-used"><p>二维码已使用</p></div>
+          </div>
+          <div class="right" @click="nextCode">
+            <img src="https://cdn.ipadbiz.cn/xys/booking/%E5%8F%B3@2x.png">
+          </div>
+        </div>
+        <div class="refresh" @click="refreshBtn">
+          <img src="https://cdn.ipadbiz.cn/xys/booking/%E5%88%B7%E6%96%B0@2x.png">&nbsp;<div>刷新</div>
+        </div>
+      </div>
+      <div class="user-list">
+        <div
+          v-for="(item, index) in userList"
+          :key="index"
+          :class="['user-item', select_index === index ? 'checked' : '']">
+          {{ item.username }}
+        </div>
+      </div>
+    </div>
+    <div v-else class="no-qrcode">
+      <img src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 10rem;">
+      <div class="no-qrcode-title">您还没有预约过参观</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import xctcCheck from "xctc-check"
+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 id_number = ref('511522190103214279');
+
+const formatId = computed(() => {
+  return xctcCheck.formatInfoHide(id_number.value)
+});
+
+const has_qrcode = ref(true);
+
+const select_index = ref(0);
+const userList = ref([{
+  id: '1',
+  username: '张雨燕',
+  id_code: '511522190103214279',
+  qrcode: 'https://cdn.ipadbiz.cn/xys/booking/WechatIMG576.jpg',
+  status: '0'
+}, {
+  id: '2',
+  username: '李仁和',
+  id_code: '311522190103214279',
+  qrcode: 'https://cdn.ipadbiz.cn/xys/booking/WechatIMG576.jpg',
+  status: '1'
+}, {
+  id: '3',
+  username: '王二虎',
+  id_code: '411522190103214279',
+  qrcode: 'https://cdn.ipadbiz.cn/xys/booking/WechatIMG576.jpg',
+  status: '0'
+}, {
+  id: '4',
+  username: '张雨燕2',
+  id_code: '611522190103214279',
+  qrcode: 'https://cdn.ipadbiz.cn/xys/booking/WechatIMG576.jpg',
+  status: '1'
+}, {
+  id: '5',
+  username: '张雨燕3',
+  id_code: '211522190103214279',
+  qrcode: 'https://cdn.ipadbiz.cn/xys/booking/WechatIMG576.jpg',
+  status: '0'
+}]);
+
+const prevCode = () => {
+  select_index.value = select_index.value - 1;
+  if (select_index.value < 0) {
+    select_index.value = userList.value.length - 1;
+  }
+};
+const nextCode = () => {
+  select_index.value = select_index.value + 1;
+  if (select_index.value > userList.value.length - 1) {
+    select_index.value = 0;
+  }
+};
+
+const userinfo = computed(() => {
+  return {
+    name: userList.value[select_index.value]['username'],
+    id: xctcCheck.formatInfoHide(userList.value[select_index.value]['id_code'])
+  };
+});
+
+const useStatus = computed(() => {
+  return userList.value[select_index.value]['status'];
+});
+
+const refreshBtn = () => {
+  console.warn('refreshBtn');
+}
+
+onMounted(() => {
+
+})
+</script>
+
+<style lang="less" scoped>
+.qr-code-page {
+  .qrcode-content {
+    padding: 1rem 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    // width: 100%;
+    // height: 100%;
+    background-color: #FFF;
+    border-radius: 5px;
+    box-shadow: 0rem 0rem 0.92rem 0rem rgba(106,106,106,0.27);
+    .user-info {
+      color: #A6A6A6;
+      font-size: 1.15rem;
+      margin-top: 0.5rem;
+      margin-bottom: 1rem;
+    }
+    .user-qrcode {
+      display: flex;
+      align-items: center;
+      .left {
+        img {
+          width: 1.75rem; margin-right: 0.5rem;
+        }
+      }
+      .center {
+        border: 1px solid #D1D1D1;
+        border-radius: 20px;
+        padding: 0.25rem;
+        position: relative;
+        img {
+          width: 15rem;
+        }
+        div {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: rgba(106,106,106,0.6);
+          // opacity: 0.49;
+          border-radius: 20px;
+          color: #FFF;
+          text-align: center;
+          p {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 1.2rem;
+          }
+        }
+      }
+      .right {
+        img {
+          width: 1.75rem;
+          margin-left: 0.5rem;
+        }
+      }
+    }
+    .refresh {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 1rem;
+      img {
+        width: 3.5rem;
+      }
+      div {
+        color: #A67939; font-size: 1.1rem;
+      }
+    }
+  }
+  .user-list {
+    display: flex;
+    padding: 1rem;
+    align-items: center;
+    flex-wrap: wrap;
+    .user-item {
+      padding: 0.25rem 0.5rem;
+      border: 1px solid #A67939;
+      margin: 0.25rem;
+      border-radius: 5px;
+      color: #A67939;
+      &.checked {
+        color: #FFF;
+        background-color: #A67939;
+      }
+    }
+  }
+
+  .no-qrcode {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    img {
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+      width: 10rem;
+    }
+    .no-qrcode-title {
+      color: #A67939;
+      font-size: 1.05rem;
+    }
+  }
+}
+</style>

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

+<!--
+ * @Date: 2024-01-16 10:06:47
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2024-01-16 11:27:36
+ * @FilePath: /xysBooking/src/views/bookingCode.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="booking-code-page">
+    <qrCode></qrCode>
+    <div class="warning">
+      <p><van-icon name="warning-o" />&nbsp;温馨提示</p>
+      <p>一人一码，扫码或识别身份证成功后进入</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import xctcCheck from "xctc-check"
+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);
+
+
+onMounted(() => {
+
+})
+</script>
+
+<style lang="less" scoped>
+.booking-code-page {
+  padding: 1rem;
+
+  .warning {
+    text-align: center;
+    color: #A67939;
+  }
+}
+</style>