86 lines
3.4 KiB
Vue
86 lines
3.4 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="min-h-screen bg-gray-50">
|
|
<!-- 用户信息卡片 -->
|
|
<div class="bg-white shadow-sm">
|
|
<div class="max-w-2xl mx-auto">
|
|
<div class="flex items-center gap-4 p-6">
|
|
<div class="w-20 h-20 rounded-full border-2 border-white shadow-lg overflow-hidden bg-gray-100">
|
|
<img :src="userInfo.avatar" :alt="userInfo.username" class="w-full h-full object-cover" />
|
|
</div>
|
|
|
|
<div class="space-y-1">
|
|
<h3 class="text-xl font-semibold text-gray-800">
|
|
{{ userInfo.username }}
|
|
</h3>
|
|
<div class="text-gray-500 text-sm">
|
|
用户编号: {{ userInfo.id }}
|
|
</div>
|
|
<div class="text-primary-600 font-medium">
|
|
账户余额: ¥{{ (userInfo.balance / 100).toFixed(2) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 菜单列表 -->
|
|
<div class="max-w-2xl mx-auto px-4 py-6 space-y-4 hidden">
|
|
<div v-for="(group, groupIndex) in menuGroups" :key="groupIndex"
|
|
class="bg-white rounded-xl overflow-hidden shadow-sm">
|
|
<div class="px-4 py-2 text-sm font-medium text-gray-500 bg-gray-50">
|
|
{{ 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.5 hover:bg-gray-50 active:bg-gray-100
|
|
cursor-pointer transition-colors duration-150">
|
|
<component :is="item.icon" class="mr-3 text-xl text-gray-500" />
|
|
<span class="flex-1 text-gray-700">{{ item.label }}</span>
|
|
<span class="text-gray-400">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|