103 lines
3.5 KiB
Vue
103 lines
3.5 KiB
Vue
<template>
|
|
<div class="user-detail-page">
|
|
<el-card shadow="never">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<el-page-header @back="goBack">
|
|
<template #content>
|
|
<span class="page-title">用户详情</span>
|
|
</template>
|
|
</el-page-header>
|
|
</div>
|
|
</template>
|
|
|
|
<el-skeleton :loading="loading" animated>
|
|
<template #default>
|
|
<el-descriptions :column="3" border>
|
|
<el-descriptions-item label="用户ID">{{ user?.id }}</el-descriptions-item>
|
|
<el-descriptions-item label="用户名">{{ user?.username }}</el-descriptions-item>
|
|
<el-descriptions-item label="昵称">{{ user?.nickname }}</el-descriptions-item>
|
|
<el-descriptions-item label="邮箱">{{ user?.email }}</el-descriptions-item>
|
|
<el-descriptions-item label="手机号">{{ user?.phone }}</el-descriptions-item>
|
|
<el-descriptions-item label="性别">
|
|
{{ user?.gender === 1 ? '男' : user?.gender === 2 ? '女' : '未知' }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="等级">Lv.{{ user?.level }}</el-descriptions-item>
|
|
<el-descriptions-item label="VIP等级">
|
|
{{ (user?.vipLevel ?? 0) > 0 ? `VIP${user?.vipLevel}` : '普通用户' }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="状态">
|
|
<el-tag :type="user?.status === 1 ? 'success' : 'danger'">
|
|
{{ user?.status === 1 ? '正常' : '禁用' }}
|
|
</el-tag>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="粉丝数">{{ user?.followerCount }}</el-descriptions-item>
|
|
<el-descriptions-item label="关注数">{{ user?.followingCount }}</el-descriptions-item>
|
|
<el-descriptions-item label="视频数">{{ user?.videoCount }}</el-descriptions-item>
|
|
<el-descriptions-item label="获赞数">{{ user?.likeCount }}</el-descriptions-item>
|
|
<el-descriptions-item label="注册时间">{{ formatDateTime(user?.createTime) }}</el-descriptions-item>
|
|
<el-descriptions-item label="更新时间">{{ formatDateTime(user?.updateTime) }}</el-descriptions-item>
|
|
<el-descriptions-item label="个人签名" :span="3">
|
|
{{ user?.signature || '暂无' }}
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</template>
|
|
</el-skeleton>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { ElMessage } from 'element-plus'
|
|
import { userApi } from '@/api/user.ts'
|
|
import { formatDateTime } from '@/utils/format.ts'
|
|
import type { PlatformUser } from '@/types'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const loading = ref(false)
|
|
const user = ref<PlatformUser | null>(null)
|
|
|
|
const loadUser = async () => {
|
|
const userId = route.params.id
|
|
if (!userId) {
|
|
ElMessage.error('用户ID不存在')
|
|
return
|
|
}
|
|
|
|
loading.value = true
|
|
try {
|
|
user.value = await userApi.getDetail(Number(userId))
|
|
} catch (error) {
|
|
ElMessage.error('获取用户信息失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const goBack = () => {
|
|
router.back()
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadUser()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.user-detail-page {
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.page-title {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
</style>
|