index.vue
3.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<template>
<view class="min-h-screen bg-[#F9FAFB] pb-[200rpx] flex flex-col items-center">
<!-- Header -->
<NavHeader title="我的" />
<!-- User Info Card -->
<!-- Width: 353px -> 706rpx, Height: 124px -> 248rpx -->
<!-- Background image from design -->
<view
class="w-[706rpx] h-[248rpx] mt-[40rpx] bg-[url('https://lanhu-oss-2537-2.lanhuapp.com/SketchPng19a28c052635ccb70614c5be60713a4731e85f98029d396460b46bb31e6a529f')] bg-[length:100%_100%] bg-no-repeat flex items-center px-[40rpx]"
@tap="go('/pages/avatar/index')"
>
<!-- Avatar -->
<view class="w-[160rpx] h-[160rpx] rounded-full overflow-hidden border-2 border-white shadow-sm shrink-0">
<img class="w-full h-full object-cover" src="https://picsum.photos/seed/user/200/200" />
</view>
<!-- Info -->
<view class="ml-[32rpx] flex-1 flex flex-col justify-center">
<text class="text-[36rpx] font-bold text-gray-800 mb-[8rpx]">张三</text>
<text class="text-[28rpx] text-gray-500 mb-[4rpx]">工号: EMP2026001</text>
<text class="text-[24rpx] text-gray-400">点击修改头像</text>
</view>
<!-- Arrow -->
<IconFont name="RectRight" size="20" color="#9CA3AF" />
</view>
<!-- Menu List -->
<!-- Width: 353px -> 706rpx, Radius: 12px -> 24rpx, Padding: 16px -> 32rpx -->
<view class="w-[706rpx] bg-white rounded-[24rpx] p-[32rpx] mt-[32rpx]">
<view
v-for="(item, index) in menuItems"
:key="index"
class="flex flex-col"
@tap="handleMenuClick(item)"
>
<view class="flex items-center justify-between py-[24rpx]">
<view class="flex items-center">
<!-- Icon Size: 40px -> 80rpx. Using IconFont to match request, centered in a box if needed, or just large icon -->
<!-- Design had 40px images. I'll use 32px (64rpx) IconFont for balance or 40px if needed. -->
<view class="w-[80rpx] h-[80rpx] bg-blue-50 rounded-[16rpx] flex items-center justify-center mr-[24rpx]">
<IconFont :name="item.icon" size="24" color="#2563EB" />
</view>
<text class="text-[32rpx] text-gray-800">{{ item.title }}</text>
</view>
<IconFont name="RectRight" size="16" color="#9CA3AF" />
</view>
<!-- Separator -->
<view v-if="index < menuItems.length - 1" class="h-[2rpx] bg-gray-100 w-full"></view>
</view>
</view>
<!-- TabBar -->
<TabBar current="me" />
</view>
</template>
<script setup>
import { useGo } from '@/hooks/useGo'
import IconFont from '@/components/IconFont.vue'
import TabBar from '@/components/TabBar.vue'
import NavHeader from '@/components/NavHeader.vue'
import Taro from '@tarojs/taro'
const go = useGo()
const menuItems = [
{ title: '我的计划书', icon: 'Order', path: '/pages/plan/index' },
{ title: '我的收藏', icon: 'Star', path: '/pages/favorites/index' },
{ title: '帮助中心', icon: 'Service', action: 'toast' },
{ title: '意见反馈', icon: 'Edit', path: '/pages/feedback/index' }
]
const handleMenuClick = (item) => {
if (item.path) {
go(item.path)
} else if (item.action === 'toast') {
Taro.showToast({
title: '功能开发中',
icon: 'none'
})
}
}
</script>
<style lang="less">
/* No custom CSS needed, all Tailwind */
</style>