af-mobile-client-vue3 1.3.5 → 1.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/views/user/my/index.vue +291 -185
package/package.json
CHANGED
|
@@ -1,230 +1,336 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
+
import useSettingStore from '@af-mobile-client-vue3/stores/modules/setting'
|
|
2
3
|
import useUserStore from '@af-mobile-client-vue3/stores/modules/user'
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
List as VanList,
|
|
7
|
-
Row as VanRow,
|
|
8
|
-
} from 'vant/es'
|
|
4
|
+
import { ref } from 'vue'
|
|
5
|
+
import { useRouter } from 'vue-router'
|
|
6
|
+
import ModifyPassword from './comm/ModifyPassword.vue'
|
|
9
7
|
|
|
8
|
+
const router = useRouter()
|
|
10
9
|
const username = useUserStore().getUserInfo().name
|
|
11
|
-
const fullnames = useUserStore().getLogin().f.resources.
|
|
10
|
+
const fullnames = useUserStore().getLogin().f.resources.fullnames
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
// 修改密码弹窗显示状态
|
|
13
|
+
const showModifyPassword = ref(false)
|
|
14
|
+
// 退出登录确认弹窗显示状态
|
|
15
|
+
const showLogoutConfirm = ref(false)
|
|
16
|
+
|
|
17
|
+
function exit_login() {
|
|
18
|
+
showLogoutConfirm.value = true
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
function confirmLogout() {
|
|
22
|
+
useUserStore().logout()
|
|
23
|
+
showLogoutConfirm.value = false
|
|
15
24
|
}
|
|
25
|
+
|
|
26
|
+
function cancelLogout() {
|
|
27
|
+
showLogoutConfirm.value = false
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function goToAttendance() {
|
|
31
|
+
router.push('/user/attendance')
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function openModifyPassword() {
|
|
35
|
+
showModifyPassword.value = true
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
const webMobileConfig = useSettingStore().getSetting()
|
|
16
39
|
</script>
|
|
17
40
|
|
|
18
41
|
<template>
|
|
19
|
-
<main class="my_main
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<
|
|
42
|
+
<main class="my_main">
|
|
43
|
+
<!-- 顶部导航栏 -->
|
|
44
|
+
<nav class="header_nav">
|
|
45
|
+
<div class="header_content">
|
|
46
|
+
<h1 class="main_title">
|
|
47
|
+
我的
|
|
48
|
+
</h1>
|
|
49
|
+
<!-- <div class="setting_section"> -->
|
|
50
|
+
<!-- <van-icon name="setting-o" class="setting-icon" /> -->
|
|
51
|
+
<!-- </div> -->
|
|
24
52
|
</div>
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
</div>
|
|
29
|
-
<div class="user_content">
|
|
30
|
-
<VanRow :gutter="18">
|
|
31
|
-
<VanCol>
|
|
32
|
-
<img alt="default-user-profile" class="default_user_profile" src="../../../assets/common/default-user-profile.png">
|
|
33
|
-
</VanCol>
|
|
34
|
-
<VanCol class="user_info_col">
|
|
35
|
-
<p class="user_nickname">
|
|
36
|
-
{{ username }}
|
|
37
|
-
</p>
|
|
38
|
-
<p class="user_remark">
|
|
39
|
-
{{ fullnames }}
|
|
40
|
-
</p>
|
|
41
|
-
</VanCol>
|
|
42
|
-
</VanRow>
|
|
43
|
-
</div>
|
|
44
|
-
</div>
|
|
45
|
-
</div>
|
|
53
|
+
</nav>
|
|
54
|
+
|
|
55
|
+
<!-- 主要内容区域 -->
|
|
46
56
|
<div class="content">
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
57
|
+
<!-- 用户信息卡片 -->
|
|
58
|
+
<div class="user-card">
|
|
59
|
+
<div class="user-info">
|
|
60
|
+
<div class="avatar-wrap">
|
|
61
|
+
<img alt="default-user-profile" class="avatar" src="../../../assets/common/default-user-profile.png">
|
|
62
|
+
<div class="status-dot" />
|
|
63
|
+
</div>
|
|
64
|
+
<div class="user-detail">
|
|
65
|
+
<h2 class="username">
|
|
66
|
+
{{ username }}
|
|
67
|
+
</h2>
|
|
68
|
+
<p class="user-role">
|
|
69
|
+
{{ fullnames }}
|
|
52
70
|
</p>
|
|
53
|
-
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
|
|
75
|
+
<!-- 工作统计 -->
|
|
76
|
+
<div class="stats-card">
|
|
77
|
+
<div class="stats-grid">
|
|
78
|
+
<div class="stat-item">
|
|
79
|
+
<div class="stat-value">
|
|
80
|
+
0
|
|
81
|
+
</div>
|
|
82
|
+
<div class="stat-label">
|
|
54
83
|
待办任务
|
|
55
|
-
</
|
|
56
|
-
</
|
|
57
|
-
<
|
|
58
|
-
<
|
|
59
|
-
|
|
60
|
-
</
|
|
61
|
-
<
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
<div class="stat-item">
|
|
87
|
+
<div class="stat-value">
|
|
88
|
+
0
|
|
89
|
+
</div>
|
|
90
|
+
<div class="stat-label">
|
|
62
91
|
待办流程
|
|
63
|
-
</
|
|
64
|
-
</
|
|
65
|
-
<
|
|
66
|
-
<
|
|
67
|
-
|
|
68
|
-
</
|
|
69
|
-
<
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
<div class="stat-item">
|
|
95
|
+
<div class="stat-value">
|
|
96
|
+
0
|
|
97
|
+
</div>
|
|
98
|
+
<div class="stat-label">
|
|
70
99
|
新消息
|
|
71
|
-
</
|
|
72
|
-
</
|
|
73
|
-
</
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
74
103
|
</div>
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
104
|
+
|
|
105
|
+
<!-- 功能列表 -->
|
|
106
|
+
<div class="menu-card">
|
|
107
|
+
<div class="menu-section">
|
|
108
|
+
<h3 class="menu-title">
|
|
109
|
+
系统功能
|
|
110
|
+
</h3>
|
|
111
|
+
<div class="menu-list">
|
|
112
|
+
<div v-if="webMobileConfig?.isAttendance" class="menu-item" @click="goToAttendance">
|
|
113
|
+
<div class="menu-item-content">
|
|
114
|
+
<van-icon name="user-o" class="menu-icon" />
|
|
115
|
+
<span class="menu-text">考勤管理</span>
|
|
116
|
+
</div>
|
|
117
|
+
<van-icon name="arrow" class="menu-arrow" />
|
|
118
|
+
</div>
|
|
119
|
+
<div class="menu-item" @click="openModifyPassword">
|
|
120
|
+
<div class="menu-item-content">
|
|
121
|
+
<van-icon name="lock" class="menu-icon" />
|
|
122
|
+
<span class="menu-text">修改密码</span>
|
|
123
|
+
</div>
|
|
124
|
+
<van-icon name="arrow" class="menu-arrow" />
|
|
125
|
+
</div>
|
|
126
|
+
<div class="menu-item" @click="exit_login">
|
|
127
|
+
<div class="menu-item-content">
|
|
128
|
+
<van-icon name="sign" class="menu-icon logout-icon" />
|
|
129
|
+
<span class="menu-text">退出登录</span>
|
|
130
|
+
</div>
|
|
131
|
+
<van-icon name="arrow" class="menu-arrow" />
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
93
135
|
</div>
|
|
94
136
|
</div>
|
|
137
|
+
|
|
138
|
+
<!-- 修改密码弹窗 -->
|
|
139
|
+
<ModifyPassword
|
|
140
|
+
v-model:visible="showModifyPassword"
|
|
141
|
+
/>
|
|
142
|
+
|
|
143
|
+
<!-- 退出登录确认弹窗 -->
|
|
144
|
+
<van-dialog
|
|
145
|
+
v-model:show="showLogoutConfirm"
|
|
146
|
+
title="确认退出"
|
|
147
|
+
message="确定要退出登录吗？"
|
|
148
|
+
show-cancel-button
|
|
149
|
+
confirm-button-text="确认退出"
|
|
150
|
+
cancel-button-text="取消"
|
|
151
|
+
@confirm="confirmLogout"
|
|
152
|
+
@cancel="cancelLogout"
|
|
153
|
+
/>
|
|
95
154
|
</main>
|
|
96
155
|
</template>
|
|
97
156
|
|
|
98
157
|
<style scoped lang="less">
|
|
99
158
|
.my_main {
|
|
100
|
-
|
|
159
|
+
min-height: 100vh;
|
|
160
|
+
background-color: #f7f8fa;
|
|
161
|
+
|
|
162
|
+
// 顶部导航栏
|
|
163
|
+
.header_nav {
|
|
164
|
+
background-color: #fff;
|
|
165
|
+
padding: 0 16px;
|
|
166
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
101
167
|
position: relative;
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
.
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
left: -50px;
|
|
116
|
-
z-index: 3;
|
|
117
|
-
}
|
|
118
|
-
.circle2 {
|
|
119
|
-
background-color: #3c75f9;
|
|
120
|
-
width: 300px;
|
|
121
|
-
height: 300px;
|
|
122
|
-
top: -80px;
|
|
123
|
-
left: 10px;
|
|
124
|
-
z-index: 2;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
.header_main {
|
|
128
|
-
padding: var(--base-interval-1);
|
|
129
|
-
.user_nav {
|
|
130
|
-
padding: 0 var(--base-interval-0);
|
|
131
|
-
color: #fff;
|
|
132
|
-
position: relative;
|
|
133
|
-
z-index: 4;
|
|
134
|
-
font-size: 26px;
|
|
135
|
-
text-align: right;
|
|
136
|
-
.user_setting_icon {
|
|
137
|
-
width: 26px;
|
|
138
|
-
height: 26px;
|
|
139
|
-
}
|
|
168
|
+
z-index: 50;
|
|
169
|
+
|
|
170
|
+
.header_content {
|
|
171
|
+
display: flex;
|
|
172
|
+
justify-content: space-between;
|
|
173
|
+
align-items: center;
|
|
174
|
+
height: 56px;
|
|
175
|
+
|
|
176
|
+
.main_title {
|
|
177
|
+
font-size: 1.25rem;
|
|
178
|
+
font-weight: 600;
|
|
179
|
+
color: #333;
|
|
180
|
+
margin: 0;
|
|
140
181
|
}
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
.
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
height: 76px;
|
|
150
|
-
box-shadow:
|
|
151
|
-
0 10px 20px rgba(0, 0, 0, 0.05),
|
|
152
|
-
0 6px 6px rgba(0, 0, 0, 0.05);
|
|
153
|
-
}
|
|
154
|
-
.van-row {
|
|
155
|
-
flex-wrap: nowrap;
|
|
156
|
-
align-items: center;
|
|
157
|
-
.user_info_col {
|
|
158
|
-
flex-grow: 1;
|
|
159
|
-
p {
|
|
160
|
-
margin: 0;
|
|
161
|
-
}
|
|
162
|
-
.user_nickname {
|
|
163
|
-
font-size: 20px;
|
|
164
|
-
font-weight: bold;
|
|
165
|
-
margin-bottom: 4px;
|
|
166
|
-
}
|
|
167
|
-
.user_remark {
|
|
168
|
-
font-size: 14px;
|
|
169
|
-
}
|
|
170
|
-
}
|
|
182
|
+
|
|
183
|
+
.setting_section {
|
|
184
|
+
padding: 8px;
|
|
185
|
+
cursor: pointer;
|
|
186
|
+
|
|
187
|
+
.setting-icon {
|
|
188
|
+
font-size: 20px;
|
|
189
|
+
color: #666;
|
|
171
190
|
}
|
|
172
191
|
}
|
|
173
192
|
}
|
|
174
193
|
}
|
|
194
|
+
|
|
175
195
|
.content {
|
|
176
|
-
padding:
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
padding: 16px 0;
|
|
196
|
+
padding: 16px;
|
|
197
|
+
|
|
198
|
+
// 用户信息卡片
|
|
199
|
+
.user-card {
|
|
181
200
|
background-color: #fff;
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
.
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
201
|
+
border-radius: 8px;
|
|
202
|
+
padding: 16px;
|
|
203
|
+
margin-bottom: 16px;
|
|
204
|
+
|
|
205
|
+
.user-info {
|
|
206
|
+
display: flex;
|
|
207
|
+
align-items: center;
|
|
208
|
+
|
|
209
|
+
.avatar-wrap {
|
|
210
|
+
position: relative;
|
|
211
|
+
margin-right: 16px;
|
|
212
|
+
|
|
213
|
+
.avatar {
|
|
214
|
+
width: 80px;
|
|
215
|
+
height: 80px;
|
|
216
|
+
border-radius: 50%;
|
|
217
|
+
object-fit: cover;
|
|
194
218
|
}
|
|
195
|
-
|
|
219
|
+
|
|
220
|
+
.status-dot {
|
|
221
|
+
position: absolute;
|
|
222
|
+
bottom: 2px;
|
|
223
|
+
right: 2px;
|
|
224
|
+
width: 16px;
|
|
225
|
+
height: 16px;
|
|
226
|
+
border-radius: 50%;
|
|
227
|
+
background-color: #10b981;
|
|
228
|
+
border: 2px solid #fff;
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.user-detail {
|
|
233
|
+
.username {
|
|
196
234
|
font-size: 20px;
|
|
197
|
-
font-weight:
|
|
235
|
+
font-weight: 600;
|
|
236
|
+
color: #333;
|
|
237
|
+
margin: 0 0 4px 0;
|
|
198
238
|
}
|
|
199
|
-
|
|
239
|
+
|
|
240
|
+
.user-role {
|
|
200
241
|
font-size: 14px;
|
|
201
|
-
color: #
|
|
242
|
+
color: #666;
|
|
243
|
+
margin: 0;
|
|
202
244
|
}
|
|
203
245
|
}
|
|
204
246
|
}
|
|
205
247
|
}
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
248
|
+
|
|
249
|
+
// 工作统计卡片
|
|
250
|
+
.stats-card {
|
|
251
|
+
background-color: #fff;
|
|
252
|
+
border-radius: 8px;
|
|
253
|
+
padding: 16px;
|
|
254
|
+
margin-bottom: 16px;
|
|
255
|
+
|
|
256
|
+
.stats-grid {
|
|
257
|
+
display: grid;
|
|
258
|
+
grid-template-columns: repeat(3, 1fr);
|
|
259
|
+
gap: 16px;
|
|
260
|
+
text-align: center;
|
|
261
|
+
|
|
262
|
+
.stat-item {
|
|
263
|
+
.stat-value {
|
|
264
|
+
font-size: 24px;
|
|
265
|
+
font-weight: 600;
|
|
266
|
+
color: #3b82f6;
|
|
267
|
+
margin-bottom: 4px;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.stat-label {
|
|
271
|
+
font-size: 14px;
|
|
272
|
+
color: #666;
|
|
219
273
|
}
|
|
220
274
|
}
|
|
221
275
|
}
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
// 功能列表卡片
|
|
279
|
+
.menu-card {
|
|
280
|
+
background-color: #fff;
|
|
281
|
+
border-radius: 8px;
|
|
282
|
+
overflow: hidden;
|
|
283
|
+
|
|
284
|
+
.menu-section {
|
|
285
|
+
padding: 16px;
|
|
286
|
+
|
|
287
|
+
.menu-title {
|
|
288
|
+
font-size: 14px;
|
|
289
|
+
font-weight: 500;
|
|
290
|
+
color: #666;
|
|
291
|
+
margin-bottom: 12px;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.menu-list {
|
|
295
|
+
.menu-item {
|
|
296
|
+
display: flex;
|
|
297
|
+
align-items: center;
|
|
298
|
+
justify-content: space-between;
|
|
299
|
+
padding: 12px;
|
|
300
|
+
background-color: #f7f8fa;
|
|
301
|
+
border-radius: 8px;
|
|
302
|
+
margin-bottom: 8px;
|
|
303
|
+
cursor: pointer;
|
|
304
|
+
|
|
305
|
+
&:last-child {
|
|
306
|
+
margin-bottom: 0;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.menu-item-content {
|
|
310
|
+
display: flex;
|
|
311
|
+
align-items: center;
|
|
312
|
+
gap: 12px;
|
|
313
|
+
|
|
314
|
+
.menu-icon {
|
|
315
|
+
font-size: 24px;
|
|
316
|
+
color: #3b82f6;
|
|
317
|
+
|
|
318
|
+
&.logout-icon {
|
|
319
|
+
color: #ef4444;
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.menu-text {
|
|
324
|
+
font-size: 16px;
|
|
325
|
+
color: #333;
|
|
326
|
+
}
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
.menu-arrow {
|
|
330
|
+
color: #999;
|
|
331
|
+
font-size: 16px;
|
|
332
|
+
}
|
|
333
|
+
}
|
|
228
334
|
}
|
|
229
335
|
}
|
|
230
336
|
}
|