处理冲突

黄何裕

2024-07-12 ca9a92cfc2f2bd8c724020ee5e46094633eb80a5

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

@@ -1,73 +1,62 @@
<template>
    <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">
                <!-- 学生信息 -->
                <el-dropdown>
                    <div
                        class="avatar-container w-40 h-40 rounded-full overflow-hidden el-dropdown-link"
                        @click="stateClick()"
                    >
                        <div
                            class="avatar-content"
                            v-if="userInfo.imagePath"
                        >
                            <img
                                :src="userInfo.imagePath"
                                class="avatar-img"
                                alt=""
                            />
                        </div>
                        <div
                            class="avatar-content"
                            :style="{ backgroundColor: getColor }"
                            v-else
                        >
                            <div class="name text-5xl font-bold text-white">
                                {{ getFirstName }}
                            </div>
                        </div>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>修改密码</el-dropdown-item>
                            <el-dropdown-item>个人中心</el-dropdown-item>
                            <el-dropdown-item @click="quit()"
                                >退出登录</el-dropdown-item
                            >
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>

                <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"
                        @click="toolClick(item)"
                    >
                        <div class="tool-icon mb-1">
                            <img
                                :src="item.iconPath"
                                class="width-img"
                                alt=""
                            />
                        </div>
                        <div class="tool-title">
                            {{ item.title }}
                        </div>
                    </div>
                </div>
  <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">
        <!-- 学生信息 -->
        <el-dropdown>
          <div
            class="avatar-container w-40 h-40 rounded-full overflow-hidden el-dropdown-link"
            @click="stateClick()"
          >
            <div class="avatar-content" v-if="userInfo.imagePath">
              <img :src="'/api/files/'+userInfo.imagePath" class="avatar-img" alt="" />
            </div>
        </el-card>
    </div>
            <div
              class="avatar-content"
              :style="{ backgroundColor: getColor }"
              v-else
            >
              <div class="name text-5xl font-bold text-white">
                {{ getFirstName }}
              </div>
            </div>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item @click="goPersonalCenter()"
                >个人中心</el-dropdown-item
              >
              <el-dropdown-item @click="quit()">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <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"
            @click="toolClick(item)"
          >
            <div class="tool-icon mb-1">
              <img :src="item.iconPath" class="width-img" alt="" />
            </div>
            <div class="tool-title">
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
@@ -84,86 +73,89 @@
const router = useRouter();
// 获取列表
const toolList = ref([
    {
        id: 1,
        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,
        path: "/exam-list",
    },
    {
        id: 3,
        title: "我的成绩",
        iconPath: new URL("@/assets/icons/icon2.png", import.meta.url).href,
        path: "/grade-list",
    },
  {
    id: 1,
    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,
    path: "/exam-list",
  },
  {
    id: 3,
    title: "我的成绩",
    iconPath: new URL("@/assets/icons/icon2.png", import.meta.url).href,
    path: "/grade-list",
  },
]);

// 获取颜色
const getColor = computed(() => {
    return randomColor();
  return randomColor();
});
// 获取用户信息
const getFirstName = computed(() => {
    return userInfo.value.realName && userInfo.value.realName[0];
  return userInfo.value.realName && userInfo.value.realName[0];
});
// 点击事件
const toolClick = (item) => {
    if (item.path) {
        router.push(item.path);
    }
  if (item.path) {
    router.push(item.path);
  }
};

// 用户选项
const dropdownRef = ref();
// 退出登录
const quit = () => {
    logout()
        .then(() => {
            router.push("/login").then(() => {
                userStore.setUserInfo(null);
                localStorage.clear("user");
            });
        })
        .catch((err) => {
            console.log("退出登录失败,失败原因;", err);
        });
  logout()
    .then(() => {
      router.push("/login").then(() => {
        userStore.setUserInfo(null);
        localStorage.clear("user");
      });
    })
    .catch((err) => {
      console.log("退出登录失败,失败原因;", err);
    });
};
const goPersonalCenter = () => {
  router.push("/personal-center");
};
</script>

<style lang="scss" scoped>
.card {
    border-radius: 30px;
  border-radius: 30px;
}

.avatar-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-container {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>