Hooke / xysBooking

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
fe30d0fc 1 parent fecddcc7

新增我的页面

Inline Side-by-side
Showing 3 changed files with 118 additions and 1 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 13:19:53 4 + * @LastEditTime: 2024-01-16 13:34:08
5 * @FilePath: /xysBooking/src/route.js 5 * @FilePath: /xysBooking/src/route.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -70,6 +70,13 @@ export default [ ...@@ -70,6 +70,13 @@ export default [
70 }, 70 },
71 }, 71 },
72 { 72 {
73 + path: '/me',
74 + component: () => import('@/views/me.vue'),
75 + meta: {
76 + title: '我的',
77 + },
78 + },
79 + {
73 path: '/auth', 80 path: '/auth',
74 component: () => import('@/views/auth.vue'), 81 component: () => import('@/views/auth.vue'),
75 meta: { 82 meta: {
......
1 +<!--
2 + * @Date: 2024-01-16 13:33:36
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-01-16 13:47:01
5 + * @FilePath: /xysBooking/src/views/me.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="me-page">
10 + <div class="title">
11 + <div class="text">参观者信息</div>
12 + </div>
13 + <div class="add-visitors">
14 + <div><van-icon name="plus" /> 添加参观者</div>
15 + </div>
16 + <div class="visitors-list">
17 + <div v-for="(item, index) in visitorList" :key="index" class="visitor-item">
18 + <div>
19 + <p style="color: #A67939;">张雨燕</p>
20 + <p>证件号：3101******234</p>
21 + </div>
22 + <div @click="removeItem(item)" style="margin-left: 1rem;">
23 + <van-icon name="https://cdn.ipadbiz.cn/xys/booking/%E5%88%A0%E9%99%A4@2x.png" />
24 + </div>
25 + </div>
26 + </div>
27 + </div>
28 +</template>
29 +
30 +<script setup>
31 +import { ref } from 'vue'
32 +import { useRoute, useRouter } from 'vue-router'
33 +
34 +import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
35 +//import { } from '@/utils/generateModules.js'
36 +//import { } from '@/utils/generateIcons.js'
37 +//import { } from '@/composables'
38 +import { showConfirmDialog } from 'vant';
39 +import { showSuccessToast, showFailToast } from 'vant';
40 +
41 +const $route = useRoute();
42 +const $router = useRouter();
43 +useTitle($route.meta.title);
44 +
45 +const visitorList = ref([{ id: '1', name: '张雨燕1', idCard: '3101******234' }, { id: '2', name: '张雨燕2', idCard: '3101******234' }, { id: '3',name: '张雨燕3', idCard: '3101******234' }, { id: '4',name: '张雨燕4', idCard: '3101******234' }]);
46 +
47 +const removeItem = (item) => {
48 + showConfirmDialog({
49 + title: '温馨提示',
50 + message: '是否确认删除参观者信息？',
51 + confirmButtonColor: '#A67939',
52 + })
53 + .then(() => {
54 + // on confirm
55 + showSuccessToast('删除成功');
56 + visitorList.value = visitorList.value.filter((v) => v.id !== item.id);
57 + })
58 + .catch(() => {
59 + // on cancel
60 + });
61 +}
62 +</script>
63 +
64 +<style lang="less" scoped>
65 +.me-page {
66 + margin: 1rem;
67 + position: relative;
68 + .title {
69 + padding: 0.5rem 0.75rem;
70 + padding-left: 0;
71 + display: flex;
72 + justify-content: space-between;
73 + align-items: center;
74 + .text {
75 + &::before {
76 + content: '';
77 + border: 2px solid #A67939;
78 + margin-right: 0.5rem;
79 + }
80 + }
81 + .day {
82 + background-color: #FFFBF3;
83 + border-radius: 7px;
84 + border: 1px solid #A67939;
85 + padding: 0.2rem 0.5rem;
86 + color: #A67939;
87 + }
88 + }
89 + .add-visitors {
90 + border: 1px dashed #A67939;
91 + color: #A67939;
92 + border-radius: 5px;
93 + text-align: center;
94 + padding: .65rem 0;
95 + margin: 1rem 0;
96 + font-size: 1.15rem;
97 + }
98 + .visitors-list {
99 + .visitor-item {
100 + background-color: #FFF;
101 + border-radius: 8px;
102 + padding: 1rem;
103 + margin-bottom: 1rem;
104 + display: flex;
105 + align-items: center;
106 + justify-content: space-between;
107 + }
108 + }
109 +}
110 +</style>