Hooke / xysBooking

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
37aeabc5 1 parent 778a0150

页面逻辑调整

Inline Side-by-side
Showing 5 changed files with 97 additions and 14 deletions
<!--
* @Date: 2024-01-16 10:06:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-16 11:28:46
* @LastEditTime: 2024-01-16 15:59:42
* @FilePath: /xysBooking/src/components/qrCode.vue
* @Description: 文件描述
-->
......@@ -9,6 +9,9 @@
<div class="qr-code-page">
<div v-if="has_qrcode" class="show-qrcode">
<div class="qrcode-content">
<div class="user-status">
<div :class="[formatStatus(props.status).key, 'status']">{{ formatStatus(props.status).value }}</div>
</div>
<div class="user-info">{{ userinfo.name }}&nbsp;{{ userinfo.id }}</div>
<div class="user-qrcode">
<div class="left" @click="prevCode">
......@@ -54,6 +57,13 @@ const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const props = defineProps({
status: {
type: String,
default: ''
}
});
const id_number = ref('511522190103214279');
const formatId = computed(() => {
......@@ -123,6 +133,26 @@ const refreshBtn = () => {
console.warn('refreshBtn');
}
const formatStatus = (status) => {
switch (status) {
case 'success':
return {
key: 'success',
value: '预约成功'
}
case 'cancel':
return {
key: 'cancel',
value: '已取消'
}
case 'used':
return {
key: 'used',
value: '已使用'
}
}
}
onMounted(() => {
})
......@@ -141,6 +171,25 @@ onMounted(() => {
background-color: #FFF;
border-radius: 5px;
box-shadow: 0rem 0rem 0.92rem 0rem rgba(106,106,106,0.27);
.user-status {
.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;
}
}
.user-info {
color: #A6A6A6;
font-size: 1.15rem;
......
<!--
* @Date: 2024-01-15 17:39:29
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-16 15:46:02
* @LastEditTime: 2024-01-16 15:48:05
* @FilePath: /xysBooking/src/views/addVisitor.vue
* @Description: 文件描述
-->
......@@ -39,6 +39,12 @@
@confirm="onConfirm"
/>
</van-popup>
<van-toast v-model:show="show_error" style="">
<template #message>
{{ error_message }}
</template>
</van-toast>
</div>
</template>
......@@ -60,12 +66,16 @@ const username = ref('');
const idCode = ref('');
const isError = ref(false);
const show_error = ref(false);
const error_message = ref('');
const checkUsername = () => {
let flag = true;
if (username.value) {
} else {
showFailToast('参观者名称不能为空');
show_error.value = true;
error_message.value = '参观者名称不能为空';
flag = false;
}
return flag;
......@@ -76,7 +86,8 @@ const checkIdCode = () => {
if (res.status) {
} else {
showFailToast(res.msg);
show_error.value = true;
error_message.value = res.msg;
flag = false;
}
return flag;
......
<!--
* @Date: 2024-01-16 13:19:23
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-16 13:32:10
* @LastEditTime: 2024-01-16 16:01:04
* @FilePath: /xysBooking/src/views/bookingDetail.vue
* @Description: 文件描述
-->
<template>
<div class="booking-detail-page">
<qrCode></qrCode>
<qrCode status="success"></qrCode>
<div class="detail-wrapper">
<div class="detail-item">
<div>参访时间：</div>
......@@ -31,8 +31,8 @@
</div>
</div>
<div style="height: 5rem;"></div>
<div class="cancel-wrapper">
<div class="cancel-btn ">取消预约</div>
<div v-if="status === '预约成功'" class="cancel-wrapper">
<div @click="cancelBooking" class="cancel-btn ">取消预约</div>
</div>
</div>
</template>
......@@ -40,16 +40,36 @@
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useGo } from '@/hooks/useGo'
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 { showConfirmDialog } from 'vant';
import { showSuccessToast, showFailToast } from 'vant';
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const go = useGo();
const status = ref('预约成功');
const cancelBooking = (item) => {
showConfirmDialog({
title: '温馨提示',
message: '是否取消预约？',
confirmButtonColor: '#A67939',
})
.then(() => {
// on confirm
showSuccessToast('取消成功');
})
.catch(() => {
// on cancel
});
}
</script>
<style lang="less" scoped>
......
<!--
* @Date: 2024-01-16 11:37:10
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-16 13:17:42
* @LastEditTime: 2024-01-16 16:02:56
* @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 @click="() => { go('/bookingDetail', { id: 'test' }) }" 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>
......@@ -27,7 +27,7 @@
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useGo } from '@/hooks/useGo'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
......@@ -36,6 +36,8 @@ const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const go = useGo();
const bookingList = ref([{
id: '1',
booking_time: '2024-01-10 05:00-08:00',
......
......@@ -10,7 +10,7 @@
<div class="title">
<div class="text">参观者信息</div>
</div>
<div class="add-visitors">
<div @click="() => { go('/addVisitor') }" class="add-visitors">
<div><van-icon name="plus" /> 添加参观者</div>
</div>
<div class="visitors-list">
......@@ -30,6 +30,7 @@
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useGo } from '@/hooks/useGo'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
......@@ -37,7 +38,7 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
//import { } from '@/composables'
import { showConfirmDialog } from 'vant';
import { showSuccessToast, showFailToast } from 'vant';
const go = useGo();
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
......