From 2663f19b620d057633c66ca8442b04a234072414 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 04 七月 2024 15:53:36 +0800
Subject: [PATCH] feat:用户头像名称
---
src/components/NormalHeader/index.vue | 20 ++++++++++++++------
1 files changed, 14 insertions(+), 6 deletions(-)
diff --git a/src/components/NormalHeader/index.vue b/src/components/NormalHeader/index.vue
index fcf5395..c70f50e 100644
--- a/src/components/NormalHeader/index.vue
+++ b/src/components/NormalHeader/index.vue
@@ -9,14 +9,14 @@
<div class="user-container flex items-center">
<div class="avatar-container w-12 h-12 rounded-full overflow-hidden mr-3">
- <div class="avatar-content">
- <img src="@/assets/image/avatar/avatar.png" class="avatar-img" alt="">
+ <div class="avatar-content" v-if="userInfo.imagePath"">
+ <img :src="userInfo.imagePath" class="avatar-img" alt="">
</div>
- <!-- <div class="avatar-content" :style="{ backgroundColor: getColor }">
- <div class="name text-xl font-bold text-white">寮�</div>
- </div> -->
+ <div class="avatar-content" :style="{ backgroundColor: getColor }">
+ <div class="name text-xl font-bold text-white">{{ getFirstName }}</div>
+ </div>
</div>
- <div class="user-name text-white">娴嬭瘯娴嬭瘯娴嬭瘯</div>
+ <div class="user-name text-white">{{ userInfo.realName || '鐢ㄦ埛' }}</div>
</div>
</div>
</template>
@@ -25,13 +25,21 @@
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import randomColor from '@/utils/randomColor.js';
+import { storeToRefs } from 'pinia';
+import { useUserStore } from '@/store/index.js';
const router = useRouter();
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
const getColor = computed(() => {
return randomColor();
});
+const getFirstName = computed(() => {
+ return userInfo.value.realName && userInfo.value.realName[0];
+});
+
const returnBack = () => {
router.back();
}
--
Gitblit v1.8.0