Hooke / xysBooking

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
977b784f 1 parent 9b06b75e

fix 我的页面底部新增nav，API请求错误提示修复

Inline Side-by-side
Showing 3 changed files with 130 additions and 70 deletions
1 /* 1 /*
2 * @Date: 2022-05-18 22:56:08 2 * @Date: 2022-05-18 22:56:08
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-08-24 10:56:44 4 + * @LastEditTime: 2024-01-25 10:03:20
5 - * @FilePath: /front/src/api/fn.js 5 + * @FilePath: /xysBooking/src/api/fn.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
8 import axios from '@/utils/axios'; 8 import axios from '@/utils/axios';
9 -import { showSuccessToast, showFailToast } from 'vant'; 9 +import { showSuccessToast, showFailToast, showToast } from 'vant';
10 import qs from 'Qs' 10 import qs from 'Qs'
11 11
12 /** 12 /**
...@@ -21,9 +21,9 @@ export const fn = (api) => { ...@@ -21,9 +21,9 @@ export const fn = (api) => {
21 return res.data || true; 21 return res.data || true;
22 } else { 22 } else {
23 // tslint:disable-next-line: no-console 23 // tslint:disable-next-line: no-console
24 - console.warn(res); 24 + console.warn(res.data.show);
25 - if (!res.data.show) return false; 25 + if (res.data.show === false) return false;
26 - showFailToast(res.data.msg); 26 + showToast(res.data.msg);
27 return false; 27 return false;
28 } 28 }
29 }) 29 })
......
1 /* 1 /*
2 * @Date: 2023-08-24 09:42:27 2 * @Date: 2023-08-24 09:42:27
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-01-24 14:13:35 4 + * @LastEditTime: 2024-01-25 08:36:47
5 * @FilePath: /xysBooking/src/api/index.js 5 * @FilePath: /xysBooking/src/api/index.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
......
1 <!-- 1 <!--
2 * @Date: 2024-01-16 13:33:36 2 * @Date: 2024-01-16 13:33:36
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-01-18 11:11:00 4 + * @LastEditTime: 2024-01-25 10:10:41
5 * @FilePath: /xysBooking/src/views/me.vue 5 * @FilePath: /xysBooking/src/views/me.vue
6 * @Description: 我的页面 6 * @Description: 我的页面
7 --> 7 -->
8 <template> 8 <template>
9 <div class="me-page"> 9 <div class="me-page">
10 - <div class="title"> 10 + <div class="me-content">
11 - <div class="text">参观者信息</div> 11 + <div class="title">
12 - </div> 12 + <div class="text">参观者信息</div>
13 - <div @click="() => { go('/addVisitor') }" class="add-visitors"> 13 + </div>
14 - <div><van-icon name="plus" /> 添加参观者</div> 14 + <div @click="() => { go('/addVisitor') }" class="add-visitors">
15 - </div> 15 + <div><van-icon name="plus" /> 添加参观者</div>
16 - <div v-if="visitorList.length" class="visitors-list"> 16 + </div>
17 - <div v-for="(item, index) in visitorList" :key="index" class="visitor-item"> 17 + <div v-if="visitorList.length" class="visitors-list">
18 - <div> 18 + <div v-for="(item, index) in visitorList" :key="index" class="visitor-item">
19 - <p style="color: #A67939;">{{ item.name }}</p> 19 + <div>
20 - <p>证件号：{{ formatId(item.id_number) }}</p> 20 + <p style="color: #A67939;">{{ item.name }}</p>
21 - </div> 21 + <p>证件号：{{ formatId(item.id_number) }}</p>
22 - <div @click="removeItem(item)" style="margin-left: 1rem;"> 22 + </div>
23 - <van-icon name="https://cdn.ipadbiz.cn/xys/booking/%E5%88%A0%E9%99%A4@2x.png" /> 23 + <div @click="removeItem(item)" style="margin-left: 1rem;">
24 + <van-icon name="https://cdn.ipadbiz.cn/xys/booking/%E5%88%A0%E9%99%A4@2x.png" />
25 + </div>
24 </div> 26 </div>
25 </div> 27 </div>
28 + <div v-else class="no-visitors-list">
29 + <img src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 10rem;">
30 + <div class="no-visitors-list-title">您还没有添加过参观者</div>
31 + </div>
26 </div> 32 </div>
27 - <div v-else class="no-visitors-list"> 33 + <div class="index-nav">
28 - <img src="https://cdn.ipadbiz.cn/xys/booking/%E6%9A%82%E6%97%A0@2x.png" style="width: 10rem;"> 34 + <div class="nav-logo" @click="toHome">
29 - <div class="no-visitors-list-title">您还没有添加过参观者</div> 35 + <van-icon size="1.5rem" :name="icon_3" color="#A67939" />
36 + 首页
37 + </div>
38 + <div class="nav-logo" @click="toCode">
39 + <van-icon size="5rem" :name="icon_4" color="#A67939" style="position: absolute; top: -4rem;" />
40 + <van-icon size="1.5rem" name="wap-home" color="#FFF" style="opacity: 0;" />
41 + 预约码
42 + </div>
43 + <div class="nav-logo">
44 + <van-icon size="1.5rem" :name="icon_5" color="#A67939" />
45 + 我的
46 + </div>
30 </div> 47 </div>
31 </div> 48 </div>
32 </template> 49 </template>
...@@ -42,11 +59,29 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@ ...@@ -42,11 +59,29 @@ import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@
42 import { showConfirmDialog } from 'vant'; 59 import { showConfirmDialog } from 'vant';
43 import { showSuccessToast, showFailToast } from 'vant'; 60 import { showSuccessToast, showFailToast } from 'vant';
44 import { personListAPI, delPersonAPI } from '@/api/index' 61 import { personListAPI, delPersonAPI } from '@/api/index'
62 +import icon_1 from '@/assets/images/立即预约@2x.png'
63 +import icon_2 from '@/assets/images/预约记录@2x.png'
64 +import icon_3 from '@/assets/images/首页01@2x.png'
65 +import icon_4 from '@/assets/images/二维码icon.png'
66 +import icon_5 from '@/assets/images/我的02@2x.png'
45 const go = useGo(); 67 const go = useGo();
46 const $route = useRoute(); 68 const $route = useRoute();
47 const $router = useRouter(); 69 const $router = useRouter();
48 useTitle($route.meta.title); 70 useTitle($route.meta.title);
49 71
72 +const toBooking = () => { // 跳转到预约须知
73 + go('/notice');
74 +}
75 +const toRecord = () => { // 跳转到预约记录
76 + go('/bookingList');
77 +}
78 +const toCode = () => { // 跳转到预约码
79 + go('/bookingCode');
80 +}
81 +const toHome = () => { // 跳转到我的
82 + go('/');
83 +}
84 +
50 const visitorList = ref([]); 85 const visitorList = ref([]);
51 86
52 /** 87 /**
...@@ -101,62 +136,87 @@ onMounted(async () => { ...@@ -101,62 +136,87 @@ onMounted(async () => {
101 136
102 <style lang="less" scoped> 137 <style lang="less" scoped>
103 .me-page { 138 .me-page {
104 - margin: 1rem;
105 position: relative; 139 position: relative;
106 - .title { 140 + height: 100vh;
107 - padding: 0.5rem 0.75rem; 141 + .me-content {
108 - padding-left: 0; 142 +
109 - display: flex; 143 + margin: 0 1rem;
110 - justify-content: space-between; 144 + .title {
111 - align-items: center; 145 + padding: 0.5rem 0.75rem;
112 - .text { 146 + padding-top: 1rem;
113 - &::before { 147 + padding-left: 0;
114 - content: ''; 148 + display: flex;
115 - border: 2px solid #A67939; 149 + justify-content: space-between;
116 - margin-right: 0.5rem; 150 + align-items: center;
151 + .text {
152 + &::before {
153 + content: '';
154 + border: 2px solid #A67939;
155 + margin-right: 0.5rem;
156 + }
157 + }
158 + .day {
159 + background-color: #FFFBF3;
160 + border-radius: 7px;
161 + border: 1px solid #A67939;
162 + padding: 0.2rem 0.5rem;
163 + color: #A67939;
117 } 164 }
118 } 165 }
119 - .day { 166 + .add-visitors {
120 - background-color: #FFFBF3; 167 + border: 1px dashed #A67939;
121 - border-radius: 7px;
122 - border: 1px solid #A67939;
123 - padding: 0.2rem 0.5rem;
124 color: #A67939; 168 color: #A67939;
169 + border-radius: 5px;
170 + text-align: center;
171 + padding: .65rem 0;
172 + margin: 1rem 0;
173 + font-size: 1.15rem;
125 } 174 }
126 - } 175 + .visitors-list {
127 - .add-visitors { 176 + .visitor-item {
128 - border: 1px dashed #A67939; 177 + background-color: #FFF;
129 - color: #A67939; 178 + border-radius: 8px;
130 - border-radius: 5px; 179 + padding: 1rem;
131 - text-align: center; 180 + margin-bottom: 1rem;
132 - padding: .65rem 0; 181 + display: flex;
133 - margin: 1rem 0; 182 + align-items: center;
134 - font-size: 1.15rem; 183 + justify-content: space-between;
135 - } 184 + }
136 - .visitors-list { 185 + }
137 - .visitor-item { 186 + .no-visitors-list {
138 - background-color: #FFF;
139 - border-radius: 8px;
140 - padding: 1rem;
141 - margin-bottom: 1rem;
142 display: flex; 187 display: flex;
188 + justify-content: center;
143 align-items: center; 189 align-items: center;
144 - justify-content: space-between; 190 + flex-direction: column;
191 + img {
192 + margin-top: 1rem;
193 + margin-bottom: 1rem;
194 + width: 10rem;
195 + }
196 + .no-visitors-list-title {
197 + color: #A67939;
198 + font-size: 1.05rem;
199 + }
145 } 200 }
146 } 201 }
147 - .no-visitors-list { 202 +
203 + .index-nav {
204 + position: fixed;
205 + bottom: 0;
206 + left: 0;
207 + width: 100vw;
208 + height: 10vh;
209 + background: #FFFFFF;
210 + box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
148 display: flex; 211 display: flex;
149 - justify-content: center;
150 align-items: center; 212 align-items: center;
151 - flex-direction: column; 213 + justify-content: space-around;
152 - img { 214 + color: #A67939;
153 - margin-top: 1rem; 215 + .nav-logo {
154 - margin-bottom: 1rem; 216 + position: relative;
155 - width: 10rem; 217 + display: flex;
156 - } 218 + flex-direction: column;
157 - .no-visitors-list-title { 219 + align-items: center;
158 - color: #A67939;
159 - font-size: 1.05rem;
160 } 220 }
161 } 221 }
162 } 222 }
......