<!--
 * @Date: 2024-01-16 10:06:47
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-01-30 15:20:02
 * @FilePath: /xysBooking/src/views/bookingCode.vue
 * @Description: 文件描述
-->
<template>
  <div class="booking-code-page">
    <div style="padding: 1rem;">
      <qrCode></qrCode>
      <div class="warning">
        <p><van-icon name="warning-o" />&nbsp;温馨提示</p>
        <p>一人一码，扫码或识别身份证成功后进入</p>
        <div style="height: 8rem;"></div>
      </div>
    </div>
    <div class="index-nav">
      <div class="nav-logo" @click="toHome">
        <van-icon size="1.5rem" :name="icon_3" color="#A67939" />
        首页
      </div>
      <div class="nav-logo">
        <!-- <van-icon size="5rem" :name="icon_4" color="#A67939" style="position: absolute; top: -4rem;" /> -->
        <van-icon size="1.5rem" :name="icon_4" color="#A67939" style="margin-bottom: 0.1rem;" />
        预约码
      </div>
      <div class="nav-logo" @click="toMy">
        <van-icon size="1.5rem" :name="icon_5" color="#A67939" />
        我的
      </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';
import icon_1 from '@/assets/images/立即预约@2x.png'
import icon_2 from '@/assets/images/预约记录@2x.png'
import icon_3 from '@/assets/images/首页01@2x.png'
import icon_4 from '@/assets/images/二维码icon.png'
import icon_5 from '@/assets/images/我的01@2x.png'
import { useGo } from '@/hooks/useGo'
const go = useGo();
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const toMy = () => { // 跳转到我的
  // go('/me');
  window.location.replace(location.origin + location.pathname + '#/my');
}
const toHome = () => { // 跳转到首页
  // go('/');
  window.location.replace(location.origin + location.pathname + '#/');
}

onMounted(() => {
})
</script>

<style lang="less" scoped>
.booking-code-page {
  position: relative;
  height: 100vh;

  .warning {
    text-align: center;
    color: #A67939;
  }

  .index-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 10vh;
    background: #FFFFFF;
    box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #A67939;
    .nav-logo {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>