92 lines
3.2 KiB
Vue
92 lines
3.2 KiB
Vue
<script setup>
|
|
import { userService } from '@/api/userService';
|
|
import { formatDate } from '@/utils/date';
|
|
import Badge from 'primevue/badge';
|
|
import Button from 'primevue/button';
|
|
import ProgressSpinner from 'primevue/progressspinner';
|
|
import { onMounted, ref } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const loading = ref(false);
|
|
const user = ref(null);
|
|
|
|
const fetchUserDetail = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const response = await userService.getUserById(route.params.id);
|
|
user.value = response.data;
|
|
} catch (error) {
|
|
console.error('Failed to fetch user details:', error);
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const handleBack = () => {
|
|
router.push('/users');
|
|
};
|
|
|
|
onMounted(() => {
|
|
fetchUserDetail();
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<div class="flex items-center gap-4">
|
|
<Button icon="pi pi-arrow-left" text @click="handleBack" />
|
|
<h1 class="text-2xl font-semibold text-gray-800">用户详情</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="loading" class="flex justify-center items-center p-8">
|
|
<ProgressSpinner />
|
|
</div>
|
|
|
|
<div v-else-if="user" class="grid grid-cols-1 gap-6">
|
|
<!-- 用户基本信息卡片 -->
|
|
<div class="card p-6">
|
|
<div class="flex items-start space-x-6">
|
|
<img :src="user.avatar" :alt="user.username" class="w-24 h-24 rounded-lg">
|
|
<div class="flex-1">
|
|
<h2 class="text-xl font-bold mb-2">{{ user.username }}</h2>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<p class="text-gray-500">ID</p>
|
|
<p>{{ user.id }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500">余额</p>
|
|
<p>{{ (user.balance / 100).toFixed(2) }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500">OpenID</p>
|
|
<p>{{ user.open_id }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500">状态</p>
|
|
<Badge :value="user.status === 0 ? '活跃' : '禁用'"
|
|
:severity="user.status === 0 ? 'success' : 'danger'" />
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500">创建时间</p>
|
|
<p>{{ formatDate(user.created_at) }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-500">更新时间</p>
|
|
<p>{{ formatDate(user.updated_at) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|