45 lines
2.2 KiB
Vue
45 lines
2.2 KiB
Vue
<template>
|
||
<div class="mine">
|
||
<div class="user-info">
|
||
<div class="avatar">{{ userInfo?.userName?.charAt(0) || '护' }}</div>
|
||
<div class="info"><div class="name">{{ userInfo?.userName || '护士' }}</div><div class="role">{{ userInfo?.deptName || '护理部' }} | v1.0</div></div>
|
||
</div>
|
||
<div class="menu-list">
|
||
<div class="menu-item"><span>今日工作量</span><span class="value">{{ taskCount }}</span></div>
|
||
<div class="menu-item"><span>待处理任务</span><span class="value">{{ pendingCount }}</span></div>
|
||
<div class="menu-item" @click="logout"><span>退出登录</span><span class="arrow">›</span></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import { ElMessageBox } from 'element-plus'
|
||
import { nursingApi } from '../api'
|
||
|
||
const userInfo = ref({})
|
||
const taskCount = ref(0)
|
||
const pendingCount = ref(0)
|
||
|
||
onMounted(async () => {
|
||
try { const info = localStorage.getItem('userInfo'); if (info) userInfo.value = JSON.parse(info) } catch {}
|
||
try { const res = await nursingApi.getTasks({}); if (res.code === 200) { taskCount.value = res.data?.summary?.total || 0; pendingCount.value = res.data?.summary?.pending || 0 } } catch {}
|
||
})
|
||
|
||
const logout = async () => {
|
||
try { await ElMessageBox.confirm('确认退出登录？', '提示'); localStorage.removeItem('Admin-Token'); localStorage.removeItem('userInfo'); window.location.href = '/login' } catch {}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.user-info { background: linear-gradient(135deg, #1890ff, #096dd9); color: #fff; padding: 24px 16px; display: flex; align-items: center; gap: 16px; }
|
||
.avatar { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 24px; }
|
||
.name { font-size: 18px; font-weight: 600; }
|
||
.role { font-size: 13px; opacity: 0.8; }
|
||
.menu-list { background: #fff; margin: 12px; border-radius: 8px; overflow: hidden; }
|
||
.menu-item { padding: 14px 16px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
|
||
.menu-item:last-child { border-bottom: none; }
|
||
.value { color: #1890ff; font-weight: 600; }
|
||
.arrow { color: #999; font-size: 18px; }
|
||
</style>
|