feat:用户头像名称

ZhangXianQiang

2024-07-04 2663f19b620d057633c66ca8442b04a234072414

 src/views/home/components/user-panel/index.vue

@@ -1,26 +1,26 @@
<template>
  <div class="user-panel sticky left-10 top-5 max-w-sm">
  <div class="user-panel max-w-sm min-w-96 h-fit">
    <el-card class="card">
      <div class="panel-content flex flex-col items-center">
        <div class="avatar-container w-40 h-40 rounded-full overflow-hidden">
          <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-5xl font-bold text-white">张</div>
          </div> -->
          <div class="avatar-content" :style="{backgroundColor: getColor}" v-else>
            <div class="name text-5xl font-bold text-white">{{ getFirstName }}</div>
          </div>
        </div>

        <div class="name-container text-lg font-bold mt-5 mb-2">
          测试测试
          {{ userInfo.realName }}
        </div>

        <div class="department-container text-base mb-10">
          测试测试
          {{ userInfo.userName }}
        </div>

        <div class="tool-container grid grid-cols-3 gap-10">
          <div class="tool-item text-center cursor-pointer" v-for="item in toolList">
          <div class="tool-item text-center cursor-pointer" v-for="item in toolList" @click="toolClick(item)">
            <div class="tool-icon mb-1">
              <img :src="item.iconPath" class="width-img" alt="">
            </div>
@@ -38,34 +38,52 @@
<script setup>
import { ref, computed } from 'vue';
import randomColor from '@/utils/randomColor.js';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store/index.js';

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);



const router = useRouter();

const toolList = ref([
  {
    id: 1,
    title: '资源共享',
    iconPath: new URL('@/assets/icons/icon1.png', import.meta.url).href
    title: '在线培训',
    iconPath: new URL('@/assets/icons/icon1.png', import.meta.url).href,
    path: '/train'
  },
  {
    id: 2,
    title: '我的课程',
    iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href
    title: '我的考试',
    iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href,
    path: '/exam-list'
  },
  {
    id: 3,
    title: '我的课程',
    iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href
  },
  {
    id: 4,
    title: '我的课程',
    iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href
    title: '我的成绩',
    iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href,
    path: '/grade-list'
  },
]);


const getColor = computed(() => {
  return randomColor();
})
});

const getFirstName = computed(() => {
  return userInfo.value.realName && userInfo.value.realName[0];
});

const toolClick = (item) => {
  if (item.path) {
    router.push(item.path);
  }
}

</script>