hookehuyr

feat(profile): 重构个人中心页面布局和功能

- 简化用户信息展示,移除冗余字段
- 重新设计统计数据和快捷操作区域
- 优化菜单项结构和导航功能
- 更新页面样式和交互体验
1 +/*
2 + * @Date: 2025-07-01 17:55:08
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2025-07-02 14:44:50
5 + * @FilePath: /jgdl/src/pages/profile/index.config.js
6 + * @Description: 文件描述
7 + */
1 export default { 8 export default {
2 - navigationBarTitleText: '首页' 9 + navigationBarTitleText: '我的'
3 } 10 }
......
1 <template> 1 <template>
2 <view class="profile-page"> 2 <view class="profile-page">
3 - <!-- 用户信息卡片 --> 3 + <!-- User Profile Section -->
4 - <view class="user-card"> 4 + <view class="user-profile-section">
5 - <view class="user-info"> 5 + <image :src="userInfo.avatar" class="user-avatar" mode="aspectFill" />
6 - <image :src="userInfo.avatar" class="user-avatar" mode="aspectFill" /> 6 + <text class="user-name">{{ userInfo.name }}</text>
7 - <view class="user-details"> 7 + <text class="user-phone">{{ userInfo.phone }}</text>
8 - <text class="user-name">{{ userInfo.name }}</text> 8 + <nut-button class="edit-profile-btn" @click="onEditProfile">
9 - <text class="user-school">{{ userInfo.school }}</text> 9 + 编辑资料
10 - <view class="user-stats"> 10 + </nut-button>
11 - <text class="stat-item">信用分: {{ userInfo.creditScore }}</text> 11 +
12 - <text class="stat-item">成交: {{ userInfo.dealCount }}笔</text> 12 + <!-- Stats Row -->
13 - </view> 13 + <view class="stats-row">
14 + <view class="stat-item">
15 + <text class="stat-number">{{ userStats.following }}</text>
16 + <text class="stat-label">关注</text>
14 </view> 17 </view>
15 - </view> 18 + <view class="stat-item" @click="onOrderManagement">
16 - <view class="edit-btn" @click="onEditProfile"> 19 + <text class="stat-number">{{ userStats.orders }}</text>
17 - <Edit size="20" color="#f97316" /> 20 + <text class="stat-label">订单</text>
18 - </view>
19 - </view>
20 -
21 - <!-- 我的车辆 -->
22 - <view class="section">
23 - <view class="section-header">
24 - <text class="section-title">我的车辆</text>
25 - </view>
26 - <view class="vehicle-stats">
27 - <view class="stat-card" @click="onMyVehicles('selling')">
28 - <text class="stat-number">{{ vehicleStats.selling }}</text>
29 - <text class="stat-label">在售</text>
30 - </view>
31 - <view class="stat-card" @click="onMyVehicles('sold')">
32 - <text class="stat-number">{{ vehicleStats.sold }}</text>
33 - <text class="stat-label">已售</text>
34 </view> 21 </view>
35 - <view class="stat-card" @click="onMyFavorites"> 22 + <view class="stat-item">
36 - <text class="stat-number">{{ vehicleStats.favorites }}</text> 23 + <text class="stat-number">{{ userStats.followers }}</text>
37 - <text class="stat-label">收藏</text> 24 + <text class="stat-label">被关注</text>
38 </view> 25 </view>
39 </view> 26 </view>
40 </view> 27 </view>
41 28
42 - <!-- 功能菜单 --> 29 + <!-- Quick Actions -->
43 - <view class="menu-section"> 30 + <view class="quick-actions">
44 - <view class="menu-item" @click="onOrderManagement"> 31 + <view class="action-item" @click="onMyFavorites">
45 - <view class="menu-icon"> 32 + <Heart size="22" color="#6b7280" />
46 - <Cart size="20" color="#f97316" /> 33 + <text class="action-text">我的关注</text>
47 - </view>
48 - <text class="menu-text">订单管理</text>
49 - <Right size="16" color="#9ca3af" />
50 </view> 34 </view>
51 - 35 + <view class="action-item" @click="onOrderManagement">
52 - <view class="menu-item" @click="onCertification"> 36 + <Clock size="22" color="#6b7280" />
53 - <view class="menu-icon"> 37 + <text class="action-text">我的订单</text>
54 - <Service size="20" color="#f97316" />
55 - </view>
56 - <text class="menu-text">车辆认证</text>
57 - <view class="certification-badge">
58 - <text class="badge-text">{{ userInfo.isCertified ? '已认证' : '未认证' }}</text>
59 - </view>
60 - <Right size="16" color="#9ca3af" />
61 - </view>
62 -
63 - <view class="menu-item" @click="onWallet">
64 - <view class="menu-icon">
65 - <Shop size="20" color="#f97316" />
66 - </view>
67 - <text class="menu-text">我的钱包</text>
68 - <text class="wallet-balance">¥{{ userInfo.balance }}</text>
69 - <Right size="16" color="#9ca3af" />
70 - </view>
71 -
72 - <view class="menu-item" @click="onAddress">
73 - <view class="menu-icon">
74 - <Location size="20" color="#f97316" />
75 - </view>
76 - <text class="menu-text">收货地址</text>
77 - <Right size="16" color="#9ca3af" />
78 </view> 38 </view>
79 </view> 39 </view>
80 40
81 - <!-- 服务菜单 --> 41 + <!-- Menu Items -->
82 <view class="menu-section"> 42 <view class="menu-section">
83 - <view class="menu-item" @click="onCustomerService"> 43 + <view class="menu-item" @click="onMessages">
84 - <view class="menu-icon"> 44 + <Notice size="20" color="#6b7280" />
85 - <Voice size="20" color="#f97316" /> 45 + <text class="menu-text">我的消息</text>
86 - </view> 46 + <Right size="18" color="#9ca3af" />
87 - <text class="menu-text">客服中心</text>
88 - <Right size="16" color="#9ca3af" />
89 </view> 47 </view>
90 - 48 +
49 + <view class="menu-item" @click="onMySoldVehicles">
50 + <Cart size="20" color="#6b7280" />
51 + <text class="menu-text">我卖的车</text>
52 + <Right size="18" color="#9ca3af" />
53 + </view>
54 +
91 <view class="menu-item" @click="onFeedback"> 55 <view class="menu-item" @click="onFeedback">
92 - <view class="menu-icon"> 56 + <Message size="20" color="#6b7280" />
93 - <Message size="20" color="#f97316" />
94 - </view>
95 <text class="menu-text">意见反馈</text> 57 <text class="menu-text">意见反馈</text>
96 - <Right size="16" color="#9ca3af" /> 58 + <Right size="18" color="#9ca3af" />
97 </view> 59 </view>
98 - 60 +
99 - <view class="menu-item" @click="onAbout"> 61 + <view class="menu-item" @click="onHelpCenter">
100 - <view class="menu-icon"> 62 + <Tips size="20" color="#6b7280" />
101 - <Tips size="20" color="#f97316" /> 63 + <text class="menu-text">帮助中心</text>
102 - </view> 64 + <Right size="18" color="#9ca3af" />
103 - <text class="menu-text">关于我们</text>
104 - <Right size="16" color="#9ca3af" />
105 </view> 65 </view>
106 - </view>
107 66
108 - <!-- 设置菜单 -->
109 - <view class="menu-section">
110 <view class="menu-item" @click="onSettings"> 67 <view class="menu-item" @click="onSettings">
111 - <view class="menu-icon"> 68 + <Setting size="20" color="#6b7280" />
112 - <Setting size="20" color="#f97316" />
113 - </view>
114 <text class="menu-text">设置</text> 69 <text class="menu-text">设置</text>
115 - <Right size="16" color="#9ca3af" /> 70 + <Right size="18" color="#9ca3af" />
116 </view> 71 </view>
117 </view> 72 </view>
118 73
119 - <!-- 退出登录 -->
120 - <view class="logout-section">
121 - <button class="logout-btn" @click="onLogout">退出登录</button>
122 - </view>
123 -
124 <!-- 自定义TabBar --> 74 <!-- 自定义TabBar -->
125 <TabBar /> 75 <TabBar />
126 </view> 76 </view>
...@@ -128,9 +78,8 @@ ...@@ -128,9 +78,8 @@
128 78
129 <script setup> 79 <script setup>
130 import { ref } from 'vue' 80 import { ref } from 'vue'
131 -import { 81 +import {
132 - Edit, Right, Cart, Service, Shop, Location, 82 + Heart, Clock, Notice, Cart, Message, Tips, Setting, Right
133 - Voice, Message, Tips, Setting
134 } from '@nutui/icons-vue-taro' 83 } from '@nutui/icons-vue-taro'
135 import Taro from '@tarojs/taro' 84 import Taro from '@tarojs/taro'
136 import TabBar from '@/components/TabBar.vue' 85 import TabBar from '@/components/TabBar.vue'
...@@ -138,19 +87,15 @@ import TabBar from '@/components/TabBar.vue' ...@@ -138,19 +87,15 @@ import TabBar from '@/components/TabBar.vue'
138 // 用户信息 87 // 用户信息
139 const userInfo = ref({ 88 const userInfo = ref({
140 name: '张同学', 89 name: '张同学',
141 - school: '清华大学', 90 + phone: '138****8888',
142 - avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop&crop=face', 91 + avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop&crop=face'
143 - creditScore: 95,
144 - dealCount: 12,
145 - isCertified: true,
146 - balance: 1580.50
147 }) 92 })
148 93
149 -// 车辆统计 94 +// 用户统计
150 -const vehicleStats = ref({ 95 +const userStats = ref({
151 - selling: 3, 96 + following: 12,
152 - sold: 8, 97 + orders: 8,
153 - favorites: 15 98 + followers: 24
154 }) 99 })
155 100
156 /** 101 /**
...@@ -163,17 +108,7 @@ const onEditProfile = () => { ...@@ -163,17 +108,7 @@ const onEditProfile = () => {
163 } 108 }
164 109
165 /** 110 /**
166 - * 我的车辆 111 + * 我的关注
167 - * @param {string} type - 车辆类型
168 - */
169 -const onMyVehicles = (type) => {
170 - Taro.navigateTo({
171 - url: `/pages/my-vehicles/index?type=${type}`
172 - })
173 -}
174 -
175 -/**
176 - * 我的收藏
177 */ 112 */
178 const onMyFavorites = () => { 113 const onMyFavorites = () => {
179 Taro.navigateTo({ 114 Taro.navigateTo({
...@@ -191,62 +126,29 @@ const onOrderManagement = () => { ...@@ -191,62 +126,29 @@ const onOrderManagement = () => {
191 } 126 }
192 127
193 /** 128 /**
194 - * 车辆认证 129 + * 我的消息
195 - */
196 -const onCertification = () => {
197 - if (userInfo.value.isCertified) {
198 - Taro.navigateTo({
199 - url: '/pages/certification-status/index'
200 - })
201 - } else {
202 - Taro.navigateTo({
203 - url: '/pages/certification-apply/index'
204 - })
205 - }
206 -}
207 -
208 -/**
209 - * 我的钱包
210 */ 130 */
211 -const onWallet = () => { 131 +const onMessages = () => {
212 Taro.navigateTo({ 132 Taro.navigateTo({
213 - url: '/pages/wallet/index' 133 + url: '/pages/messages/index'
214 }) 134 })
215 } 135 }
216 136
217 /** 137 /**
218 - * 收货地址 138 + * 我卖的车
219 */ 139 */
220 -const onAddress = () => { 140 +const onMySoldVehicles = () => {
221 Taro.navigateTo({ 141 Taro.navigateTo({
222 - url: '/pages/address/index' 142 + url: '/pages/my-sold-vehicles/index'
223 }) 143 })
224 } 144 }
225 145
226 /** 146 /**
227 - * 客服中心 147 + * 帮助中心
228 */ 148 */
229 -const onCustomerService = () => { 149 +const onHelpCenter = () => {
230 - Taro.showActionSheet({ 150 + Taro.navigateTo({
231 - itemList: ['在线客服', '电话客服', '常见问题'], 151 + url: '/pages/help-center/index'
232 - success: (res) => {
233 - if (res.tapIndex === 0) {
234 - // 在线客服
235 - Taro.navigateTo({
236 - url: '/pages/online-service/index'
237 - })
238 - } else if (res.tapIndex === 1) {
239 - // 电话客服
240 - Taro.makePhoneCall({
241 - phoneNumber: '400-123-4567'
242 - })
243 - } else if (res.tapIndex === 2) {
244 - // 常见问题
245 - Taro.navigateTo({
246 - url: '/pages/faq/index'
247 - })
248 - }
249 - }
250 }) 152 })
251 } 153 }
252 154
...@@ -260,15 +162,6 @@ const onFeedback = () => { ...@@ -260,15 +162,6 @@ const onFeedback = () => {
260 } 162 }
261 163
262 /** 164 /**
263 - * 关于我们
264 - */
265 -const onAbout = () => {
266 - Taro.navigateTo({
267 - url: '/pages/about/index'
268 - })
269 -}
270 -
271 -/**
272 * 设置 165 * 设置
273 */ 166 */
274 const onSettings = () => { 167 const onSettings = () => {
...@@ -276,241 +169,134 @@ const onSettings = () => { ...@@ -276,241 +169,134 @@ const onSettings = () => {
276 url: '/pages/settings/index' 169 url: '/pages/settings/index'
277 }) 170 })
278 } 171 }
279 -
280 -/**
281 - * 退出登录
282 - */
283 -const onLogout = () => {
284 - Taro.showModal({
285 - title: '确认退出',
286 - content: '确定要退出登录吗?',
287 - success: (res) => {
288 - if (res.confirm) {
289 - // 清除用户数据
290 - Taro.clearStorageSync()
291 -
292 - // 跳转到登录页
293 - Taro.redirectTo({
294 - url: '/pages/auth/index'
295 - })
296 -
297 - Taro.showToast({
298 - title: '已退出登录',
299 - icon: 'success'
300 - })
301 - }
302 - }
303 - })
304 -}
305 </script> 172 </script>
306 173
307 <style lang="less"> 174 <style lang="less">
308 .profile-page { 175 .profile-page {
309 min-height: 100vh; 176 min-height: 100vh;
310 - background-color: #f9fafb; 177 + background-color: #f8fafc;
311 - padding-bottom: 100px; 178 + padding-bottom: 240rpx;
312 } 179 }
313 180
314 -.user-card { 181 +.header {
315 - background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); 182 + background: #fb923c;
316 - padding: 24px 16px; 183 + padding: 64rpx 0 32rpx;
317 - display: flex; 184 + position: relative;
318 - justify-content: space-between;
319 - align-items: center;
320 -}
321 185
322 -.user-info { 186 + .header-content {
323 - display: flex; 187 + padding: 0 48rpx;
324 - align-items: center; 188 + display: flex;
325 - flex: 1; 189 + justify-content: space-between;
326 -} 190 + align-items: center;
327 191
328 -.user-avatar { 192 + .header-title {
329 - width: 64px; 193 + font-size: 40rpx;
330 - height: 64px; 194 + font-weight: 700;
331 - border-radius: 50%; 195 + color: white;
332 - object-fit: cover; 196 + }
333 - border: 3px solid rgba(255, 255, 255, 0.3); 197 + }
334 - margin-right: 16px;
335 -}
336 -
337 -.user-details {
338 - flex: 1;
339 -}
340 -
341 -.user-name {
342 - font-size: 20px;
343 - font-weight: 600;
344 - color: #ffffff;
345 - display: block;
346 - margin-bottom: 4px;
347 -}
348 -
349 -.user-school {
350 - font-size: 14px;
351 - color: rgba(255, 255, 255, 0.8);
352 - display: block;
353 - margin-bottom: 8px;
354 -}
355 -
356 -.user-stats {
357 - display: flex;
358 - gap: 16px;
359 -}
360 -
361 -.stat-item {
362 - font-size: 12px;
363 - color: rgba(255, 255, 255, 0.9);
364 - background-color: rgba(255, 255, 255, 0.2);
365 - padding: 4px 8px;
366 - border-radius: 12px;
367 -}
368 -
369 -.edit-btn {
370 - width: 40px;
371 - height: 40px;
372 - background-color: rgba(255, 255, 255, 0.2);
373 - border-radius: 50%;
374 - display: flex;
375 - align-items: center;
376 - justify-content: center;
377 - transition: all 0.2s;
378 -}
379 -
380 -.edit-btn:active {
381 - transform: scale(0.95);
382 - background-color: rgba(255, 255, 255, 0.3);
383 -}
384 -
385 -.section {
386 - background-color: #ffffff;
387 - margin: 12px 16px;
388 - border-radius: 12px;
389 - padding: 20px;
390 -}
391 -
392 -.section-header {
393 - margin-bottom: 16px;
394 -}
395 -
396 -.section-title {
397 - font-size: 18px;
398 - font-weight: 600;
399 - color: #111827;
400 - display: block;
401 -}
402 -
403 -.vehicle-stats {
404 - display: grid;
405 - grid-template-columns: repeat(3, 1fr);
406 - gap: 16px;
407 } 198 }
408 199
409 -.stat-card { 200 +.user-profile-section {
201 + background: white;
202 + padding: 64rpx 48rpx;
203 + margin-bottom: 32rpx;
410 text-align: center; 204 text-align: center;
411 - padding: 16px 8px;
412 - background-color: #fef7ed;
413 - border-radius: 8px;
414 - border: 1px solid #fed7aa;
415 - transition: all 0.2s;
416 -}
417 205
418 -.stat-card:active { 206 + .user-avatar {
419 - transform: scale(0.95); 207 + width: 160rpx;
420 - background-color: #fef3e2; 208 + height: 160rpx;
421 -} 209 + border-radius: 80rpx;
210 + margin-bottom: 32rpx;
211 + }
422 212
423 -.stat-number { 213 + .user-name {
424 - font-size: 24px; 214 + font-size: 40rpx;
425 - font-weight: 700; 215 + font-weight: 600;
426 - color: #f97316; 216 + color: #1e293b;
427 - display: block; 217 + margin-bottom: 8rpx;
428 - margin-bottom: 4px; 218 + display: block;
429 -} 219 + }
430 220
431 -.stat-label { 221 + .user-phone {
432 - font-size: 14px; 222 + font-size: 28rpx;
433 - color: #6b7280; 223 + color: #64748b;
434 - display: block; 224 + margin-bottom: 40rpx;
435 -} 225 + display: block;
226 + }
436 227
437 -.menu-section { 228 + .edit-profile-btn {
438 - background-color: #ffffff; 229 + background-color: #f1f5f9;
439 - margin: 12px 16px; 230 + color: #475569;
440 - border-radius: 12px; 231 + border: none;
441 - overflow: hidden; 232 + border-radius: 40rpx;
442 -} 233 + padding: 16rpx 48rpx;
234 + font-size: 28rpx;
235 + margin-bottom: 48rpx;
236 + }
443 237
444 -.menu-item { 238 + .stats-row {
445 - display: flex; 239 + display: flex;
446 - align-items: center; 240 + justify-content: space-around;
447 - padding: 16px 20px;
448 - border-bottom: 1px solid #f3f4f6;
449 - transition: background-color 0.2s;
450 -}
451 241
452 -.menu-item:last-child { 242 + .stat-item {
453 - border-bottom: none; 243 + text-align: center;
454 -}
455 244
456 -.menu-item:active { 245 + .stat-number {
457 - background-color: #f9fafb; 246 + font-size: 36rpx;
458 -} 247 + font-weight: 600;
248 + color: #1e293b;
249 + display: block;
250 + margin-bottom: 8rpx;
251 + }
459 252
460 -.menu-icon { 253 + .stat-label {
461 - width: 40px; 254 + font-size: 24rpx;
462 - height: 40px; 255 + color: #64748b;
463 - background-color: #fef7ed; 256 + }
464 - border-radius: 8px; 257 + }
465 - display: flex; 258 + }
466 - align-items: center;
467 - justify-content: center;
468 - margin-right: 12px;
469 } 259 }
470 260
471 -.menu-text { 261 +.quick-actions {
472 - flex: 1; 262 + background: white;
473 - font-size: 16px; 263 + padding: 40rpx 48rpx;
474 - color: #374151; 264 + margin-bottom: 32rpx;
475 -} 265 + display: flex;
266 + justify-content: space-around;
476 267
477 -.certification-badge { 268 + .action-item {
478 - margin-right: 8px; 269 + display: flex;
479 -} 270 + flex-direction: column;
271 + align-items: center;
272 + gap: 16rpx;
480 273
481 -.badge-text { 274 + .action-text {
482 - font-size: 12px; 275 + font-size: 24rpx;
483 - color: #059669; 276 + color: #64748b;
484 - background-color: #d1fae5; 277 + }
485 - padding: 4px 8px; 278 + }
486 - border-radius: 12px;
487 } 279 }
488 280
489 -.wallet-balance { 281 +.menu-section {
490 - font-size: 16px; 282 + background: white;
491 - font-weight: 600;
492 - color: #f97316;
493 - margin-right: 8px;
494 -}
495 283
496 -.logout-section { 284 + .menu-item {
497 - margin: 24px 16px; 285 + display: flex;
498 -} 286 + align-items: center;
287 + padding: 32rpx 48rpx;
288 + border-bottom: 1px solid #f1f5f9;
289 + gap: 32rpx;
499 290
500 -.logout-btn { 291 + &:last-child {
501 - width: 100%; 292 + border-bottom: none;
502 - padding: 16px; 293 + }
503 - background-color: #ffffff;
504 - border: 1px solid #f87171;
505 - border-radius: 12px;
506 - color: #ef4444;
507 - font-size: 16px;
508 - font-weight: 500;
509 - transition: all 0.2s;
510 -}
511 294
512 -.logout-btn:active { 295 + .menu-text {
513 - background-color: #fef2f2; 296 + flex: 1;
514 - transform: scale(0.98); 297 + font-size: 32rpx;
298 + color: #1e293b;
299 + }
300 + }
515 } 301 }
516 -</style>
...\ No newline at end of file ...\ No newline at end of file
302 +</style>
......