parent
ddc810f5ed
commit
44c71c9562
@ -1,122 +0,0 @@
|
||||
<template>
|
||||
<div class="profile-container">
|
||||
<el-card class="profile-card">
|
||||
<div class="profile-header">
|
||||
<el-avatar :src="user.pic" :size="100" class="avatar" />
|
||||
<div class="user-info">
|
||||
<h2>{{ user.username }}</h2>
|
||||
<div class="vip-level">
|
||||
<el-tag type="warning" size="large">VIP{{ vip }}级</el-tag>
|
||||
</div>
|
||||
<div class="balance">
|
||||
<el-text type="primary" size="large">
|
||||
<el-icon><Wallet /></el-icon>
|
||||
余额: ￥{{ balance }}
|
||||
</el-text>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<div class="profile-details">
|
||||
<el-descriptions title="个人信息" :column="2" border>
|
||||
<el-descriptions-item label="用户名">{{ user.username }}</el-descriptions-item>
|
||||
<el-descriptions-item label="账户类型">
|
||||
<el-tag :type="isAdmin ? 'danger' : 'success'">
|
||||
{{ isAdmin ? '管理员' : '普通用户' }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="注册时间">{{ formatDate(user.create_time) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="最后登录时间">{{ formatDate(user.update_time) }}</el-descriptions-item>
|
||||
|
||||
</el-descriptions>
|
||||
</div>
|
||||
|
||||
<div class="profile-actions">
|
||||
<el-button type="primary" @click="goToRecharge">账户充值</el-button>
|
||||
<el-button @click="goToRecords">查看借阅记录</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useStore } from 'vuex'
|
||||
import { Wallet } from '@element-plus/icons-vue'
|
||||
import { formatDate } from '@/utils/date'
|
||||
|
||||
const store = useStore()
|
||||
const router = useRouter()
|
||||
|
||||
const user = computed(() => store.state.user || {})
|
||||
const balance = computed(() => store.state.balance)
|
||||
const vip = computed(() => store.state.vip)
|
||||
const isAdmin = computed(() => store.getters.isAdmin)
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
store.dispatch('fetchUser')
|
||||
}catch (error) {
|
||||
console.error('获取用户信息失败:', error)
|
||||
ElMessage.error('获取用户信息失败，展示示例数据')
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
const goToRecharge = () => {
|
||||
router.push('/recharge')
|
||||
}
|
||||
|
||||
const goToRecords = () => {
|
||||
router.push('/borrow-records')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.user-info h2 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.vip-level {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.balance {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.profile-details {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.profile-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue