hookehuyr

新增预约码页面

......@@ -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>