Hooke / xysBooking

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
fecddcc7 1 parent 7e75cdf1

新增预约记录详情页面

Inline Side-by-side
Showing 3 changed files with 100 additions and 2 deletions
1 /* 1 /*
2 * @Date: 2023-06-13 13:26:46 2 * @Date: 2023-06-13 13:26:46
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-01-16 11:41:28 4 + * @LastEditTime: 2024-01-16 13:19:53
5 * @FilePath: /xysBooking/src/route.js 5 * @FilePath: /xysBooking/src/route.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -63,6 +63,13 @@ export default [ ...@@ -63,6 +63,13 @@ export default [
63 }, 63 },
64 }, 64 },
65 { 65 {
66 + path: '/bookingDetail',
67 + component: () => import('@/views/bookingDetail.vue'),
68 + meta: {
69 + title: '预约记录详情',
70 + },
71 + },
72 + {
66 path: '/auth', 73 path: '/auth',
67 component: () => import('@/views/auth.vue'), 74 component: () => import('@/views/auth.vue'),
68 meta: { 75 meta: {
......
...@@ -23,7 +23,7 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@ ...@@ -23,7 +23,7 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
23 //import { } from '@/utils/generateModules.js' 23 //import { } from '@/utils/generateModules.js'
24 //import { } from '@/utils/generateIcons.js' 24 //import { } from '@/utils/generateIcons.js'
25 //import { } from '@/composables' 25 //import { } from '@/composables'
26 -import qrCode from '@/components/qrCode' 26 +import qrCode from '@/components/qrCode';
27 const $route = useRoute(); 27 const $route = useRoute();
28 const $router = useRouter(); 28 const $router = useRouter();
29 useTitle($route.meta.title); 29 useTitle($route.meta.title);
......
1 +<!--
2 + * @Date: 2024-01-16 13:19:23
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-01-16 13:32:10
5 + * @FilePath: /xysBooking/src/views/bookingDetail.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="booking-detail-page">
10 + <qrCode></qrCode>
11 + <div class="detail-wrapper">
12 + <div class="detail-item">
13 + <div>参访时间：</div>
14 + <div>2024-01-10 05:00-08:00</div>
15 + </div>
16 + <div class="detail-item">
17 + <div>参访人数：</div>
18 + <div>2 人</div>
19 + </div>
20 + <div class="detail-item">
21 + <div>支付金额：</div>
22 + <div>¥ 50</div>
23 + </div>
24 + <div class="detail-item">
25 + <div>下单时间：</div>
26 + <div>2024-01-09 13:09</div>
27 + </div>
28 + <div class="detail-item">
29 + <div>订单编号：</div>
30 + <div>2024011012345</div>
31 + </div>
32 + </div>
33 + <div style="height: 5rem;"></div>
34 + <div class="cancel-wrapper">
35 + <div class="cancel-btn ">取消预约</div>
36 + </div>
37 + </div>
38 +</template>
39 +
40 +<script setup>
41 +import { ref } from 'vue'
42 +import { useRoute, useRouter } from 'vue-router'
43 +
44 +import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
45 +//import { } from '@/utils/generateModules.js'
46 +//import { } from '@/utils/generateIcons.js'
47 +//import { } from '@/composables'
48 +import qrCode from '@/components/qrCode';
49 +const $route = useRoute();
50 +const $router = useRouter();
51 +useTitle($route.meta.title);
52 +
53 +</script>
54 +
55 +<style lang="less" scoped>
56 +.booking-detail-page {
57 + padding: 1rem;
58 + position: relative;
59 + .detail-wrapper {
60 + line-height: 1.7;
61 + font-size: 1rem;
62 + .detail-item {
63 + display: flex;
64 + justify-content: space-between;
65 + div:first-child {
66 + color: #959595;
67 + }
68 + }
69 + }
70 + .cancel-wrapper {
71 + position: fixed;
72 + bottom: 0;
73 + right: 0;
74 + width: 100%;
75 + height: 5rem;
76 + background: #fff;
77 + display: flex;
78 + justify-content: center;
79 + align-items: center;
80 + font-size: 1.2rem;
81 + color: #000;
82 + .cancel-btn {
83 + background-color: #A67939;
84 + color: #FFF;
85 + font-size: 1rem;
86 + padding: 0.8rem 8rem;
87 + border-radius: 5px;
88 + }
89 + }
90 +}
91 +</style>