76 lines
2.3 KiB
Vue
76 lines
2.3 KiB
Vue
<script setup>
|
||
import { userApi } from '@/api/userApi';
|
||
import { onMounted, ref } from 'vue';
|
||
import {
|
||
BsBox2Fill,
|
||
BsGearFill,
|
||
BsPersonFill,
|
||
BsPinMapFill
|
||
} from 'vue-icons-plus/bs';
|
||
|
||
const userInfo = ref({});
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
const { data } = await userApi.profile();
|
||
userInfo.value = data;
|
||
console.log('User profile:', userInfo.value);
|
||
} catch (error) {
|
||
console.error('Failed to fetch user profile:', error);
|
||
}
|
||
});
|
||
|
||
const menuGroups = [
|
||
{
|
||
title: '账号与信息',
|
||
items: [
|
||
{ label: '个人资料', icon: BsPersonFill, link: '/profile/edit' },
|
||
]
|
||
},
|
||
{
|
||
title: '订单与服务',
|
||
items: [
|
||
{ label: '我的订单', icon: BsBox2Fill, link: '/orders' },
|
||
{ label: '我的地址', icon: BsPinMapFill, link: '/address' },
|
||
]
|
||
},
|
||
{
|
||
title: '设置',
|
||
items: [
|
||
{ label: '系统设置', icon: BsGearFill, link: '/settings' },
|
||
]
|
||
}
|
||
];
|
||
</script>
|
||
|
||
<template>
|
||
|
||
<div class="bg-white p-4 shadow-lg border-b border-gray-300">
|
||
<div class="flex items-center gap-4 p-4 border-gray-100">
|
||
<div class="w-16 h-16 border rounded-full border-gray-200 bg-gray-200 overflow-hidden">
|
||
<img :src="userInfo.avatar" :alt="userInfo.username" class="w-full h-full object-cover" />
|
||
</div>
|
||
|
||
<div>
|
||
<h3 class="text-xl font-medium">{{ userInfo.username }}</h3>
|
||
<span class="text-gray-500">ID: {{ userInfo.id }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="menus space-y-4 mt-4 px-4">
|
||
<div v-for="(group, groupIndex) in menuGroups" :key="groupIndex" class="bg-white rounded-lg overflow-hidden">
|
||
<div class="px-4 py-2 text-sm text-gray-500">{{ group.title }}</div>
|
||
<div class="divide-y divide-gray-100">
|
||
<div v-for="(item, itemIndex) in group.items" :key="itemIndex"
|
||
class="flex items-center px-4 py-3 hover:bg-gray-50 active:bg-gray-100 cursor-pointer">
|
||
<component :is="item.icon" class="mr-3 text-xl text-gray-600" />
|
||
<span class="flex-1">{{ item.label }}</span>
|
||
<span class="text-gray-400">›</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|