index.vue
3.62 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!--
* @Date: 2025-08-27 17:47:46
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-09-02 20:41:29
* @FilePath: /lls_program/src/pages/Profile/index.vue
* @Description: 文件描述
-->
<template>
<view class="min-h-screen flex flex-col bg-white">
<!-- Blue header background -->
<view class="bg-blue-500 h-40 absolute w-full top-0 left-0 z-0"></view>
<!-- Content -->
<view class="relative z-10 flex-1 pb-20">
<!-- User profile section -->
<view class="px-4 pt-8 pb-6 flex items-center justify-between">
<view class="flex items-center">
<image :src="userInfo.avatarUrl || defaultAvatar" alt="User avatar" class="w-16 h-16 rounded-full border-2 border-white" />
<view class="ml-4">
<h1 class="text-xl font-bold text-white">{{ userInfo.nickName }}</h1>
</view>
</view>
<view @tap="goToEditProfile" class="text-white">
<span>编辑</span>
</view>
</view>
<!-- Menu items -->
<view class="bg-white rounded-t-3xl px-4 py-5">
<view class="space-y-px">
<template v-for="(item, index) in menuItems" :key="item.id">
<view class="flex items-center py-4 cursor-pointer" @click="item.onClick">
<view :class="['w-10 h-10', item.color, 'rounded-full flex items-center justify-center mr-4']">
<component :is="item.icon" size="20" class="text-white" />
</view>
<span class="flex-1 text-lg">{{ item.label }}</span>
<Right size="20" class="text-gray-400" />
</view>
<view v-if="index < menuItems.length - 1" class="h-px bg-gray-100" />
</template>
</view>
</view>
</view>
<BottomNav />
</view>
</template>
<script setup>
import { ref, shallowRef } from 'vue';
import Taro, { useDidShow } from '@tarojs/taro';
import BottomNav from '../../components/BottomNav.vue';
import { My, Shop3, Cart, Message, Tips, Right } from '@nutui/icons-vue-taro';
// 默认头像
const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
// 获取接口信息
import { getUserProfileAPI } from '@/api/user'
const menuItems = shallowRef([
{
id: 'family',
icon: My,
label: '我的家庭',
color: 'bg-blue-500',
onClick: () => Taro.navigateTo({ url: '/pages/MyFamily/index' })
},
{
id: 'points',
icon: Shop3,
label: '积分明细',
color: 'bg-blue-500',
onClick: () => Taro.navigateTo({ url: '/pages/PointsDetail/index' })
},
{
id: 'rewards',
icon: Cart,
label: '我的兑换',
color: 'bg-blue-500',
onClick: () => Taro.navigateTo({ url: '/pages/MyRewards/index' })
},
{
id: 'feedback',
icon: Message,
label: '意见反馈',
color: 'bg-blue-500',
onClick: () => Taro.navigateTo({ url: '/pages/Feedback/index' })
},
{
id: 'agreement',
icon: Tips,
label: '用户协议',
color: 'bg-blue-500',
onClick: () => Taro.navigateTo({ url: '/pages/UserAgreement/index' })
},
{
id: 'privacy',
icon: Tips,
label: '隐私政策',
color: 'bg-blue-500',
onClick: () => Taro.navigateTo({ url: '/pages/PrivacyPolicy/index' })
}
]);
const userInfo = ref({
nickName: '',
avatarUrl: '',
});
const goToEditProfile = () => {
Taro.navigateTo({ url: '/pages/EditProfile/index' });
};
const initPageData = async () => {
// 获取用户信息
const { code, data } = await getUserProfileAPI()
if (code) {
userInfo.value = {
nickName: data?.user?.nickname || '',
avatarUrl: data?.user?.avatar_url || '',
}
}
}
useDidShow(() => {
initPageData();
});
</script>