feat:新增用户悬浮卡片
This commit is contained in:
Xwen
BIN
Yi.Bbs.Vue3/src/assets/box/gitee-icon.png
Normal file
BIN
Yi.Bbs.Vue3/src/assets/box/gitee-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
Yi.Bbs.Vue3/src/assets/box/github-icon.png
Normal file
BIN
Yi.Bbs.Vue3/src/assets/box/github-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
Yi.Bbs.Vue3/src/assets/box/website-icon.png
Normal file
BIN
Yi.Bbs.Vue3/src/assets/box/website-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@@ -1,30 +1,32 @@
|
||||
<template>
|
||||
<div class="avatar">
|
||||
<div class="avatar-left">
|
||||
<el-avatar :size="props.size" :src="iconUrl" />
|
||||
|
||||
<div v-if="props.isSelf" class="avatar-center">
|
||||
<el-avatar :size="props.size" :src="iconUrl" />
|
||||
<div class="nick">{{ userInfo.nick }}</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!props.isSelf">
|
||||
<div class="nick" :class="{ mt_1: props.time != 'undefined' }">
|
||||
<div class="text">{{ userInfo.nick }}</div>
|
||||
<div class="level">
|
||||
<el-tag round effect="light" type="success" v-if="userInfo.level">{{
|
||||
userInfo.level
|
||||
}}</el-tag>
|
||||
<div v-if="!props.isSelf" class="avatar-card">
|
||||
<!-- 悬浮卡片 -->
|
||||
<userInfo-card :userInfo="userInfo" :iconUrl="iconUrl" />
|
||||
<div class="content">
|
||||
<div class="nick" :class="{ mt_1: props.time != 'undefined' }">
|
||||
<div class="text">{{ userInfo.nick }}</div>
|
||||
<div class="level">
|
||||
<el-tag round effect="light" type="success" v-if="userInfo.level"
|
||||
>等级{{ userInfo.level }}</el-tag
|
||||
>
|
||||
</div>
|
||||
<div class="status" v-if="userInfo.userLimit">
|
||||
<el-tag round effect="light" :type="userInfo.userLimit.type">
|
||||
{{ userInfo.userLimit.label }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status" v-if="userInfo.userLimit">
|
||||
<el-tag round effect="light" :type="userInfo.userLimit.type">
|
||||
{{ userInfo.userLimit.label }}
|
||||
</el-tag>
|
||||
<div class="remarks" v-if="props.time">{{ props.time }}</div>
|
||||
<div class="remarks">
|
||||
<slot name="bottom" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="remarks" v-if="props.time">{{ props.time }}</div>
|
||||
<div class="remarks">
|
||||
<slot name="bottom" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="info" v-if="!props.isSelf">
|
||||
<el-tag class="ml-2" type="warning">V8</el-tag>
|
||||
@@ -44,6 +46,11 @@
|
||||
import useUserStore from "@/stores/user";
|
||||
import { reactive, watch, onMounted, computed, ref } from "vue";
|
||||
import { upload } from "@/apis/fileApi";
|
||||
import useAuths from "@/hooks/useAuths";
|
||||
import UserInfoCard from "./UserInfoCard/index.vue";
|
||||
|
||||
const { getToken } = useAuths();
|
||||
const isHasToken = getToken();
|
||||
|
||||
//userInfo
|
||||
//{icon,name,role,id},根据判断userInfo是否等于未定义，来觉得是当前登录用户信息，还是其他人信息
|
||||
@@ -99,7 +106,7 @@ const Init = () => {
|
||||
userInfo.nick = props.userInfo.nick;
|
||||
userInfo.role = props.userInfo.role;
|
||||
userInfo.id = props.userInfo.id;
|
||||
userInfo.level = "等级" + props.userInfo.level;
|
||||
userInfo.level = props.userInfo.level;
|
||||
userInfo.userLimit = getStatusInfo(props.userInfo.userLimit);
|
||||
iconUrl.value = iconUrlHandler(userInfo.icon);
|
||||
}
|
||||
@@ -136,21 +143,12 @@ const getStatusInfo = (type) => {
|
||||
return statusTypeList.filter((item) => item.value === type)[0];
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mt_1 {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.nick {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
> div {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
margin-top: 0.6rem;
|
||||
@@ -171,12 +169,27 @@ const getStatusInfo = (type) => {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.avatar-left {
|
||||
.avatar-left,
|
||||
.avatar-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.content {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.nick {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
> div {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-center {
|
||||
display: flex;
|
||||
flex: 2;
|
||||
}
|
||||
.el-avatar {
|
||||
|
||||
@@ -1,52 +1,178 @@
|
||||
<template>
|
||||
<div v-if="modelValue" class="userInfo-card" ref="cardRef">
|
||||
<!-- 个人信息内容 -->
|
||||
<div class="info">
|
||||
<h2>温海靖</h2>
|
||||
<p>XXX</p>
|
||||
<!-- 其他个人信息... -->
|
||||
<!-- 悬浮卡片 -->
|
||||
<el-popover
|
||||
placement="right"
|
||||
:width="300"
|
||||
:show-arrow="false"
|
||||
trigger="hover"
|
||||
popper-class="userCard"
|
||||
v-if="!props.isSelf"
|
||||
>
|
||||
<template #reference>
|
||||
<el-avatar :size="props.size" :src="iconUrl" />
|
||||
</template>
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<div class="image">
|
||||
<img :src="iconUrl" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="userInfo">
|
||||
<div class="name">{{ userInfo.nick }}</div>
|
||||
<div class="level">
|
||||
<el-tag effect="light" type="success" v-if="userInfo.level"
|
||||
>等级{{ userInfo.level }}</el-tag
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="website">
|
||||
<div class="icon">
|
||||
<img src="@/assets/box/github-icon.png" alt="" />
|
||||
</div>
|
||||
<div class="icon">
|
||||
<img src="@/assets/box/website-icon.png" alt="" />
|
||||
</div>
|
||||
<div class="icon">
|
||||
<img src="@/assets/box/gitee-icon.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<el-button type="primary" icon="Plus">关注</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="bottom">
|
||||
<div class="header">
|
||||
<div class="score">积分：3005</div>
|
||||
<div class="status">
|
||||
<span>状态：</span>
|
||||
<span> {{ getStatusInfo(userInfo.userLimit.label) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hobby">
|
||||
<span>关注：</span>
|
||||
<el-tag type="info">C#</el-tag>
|
||||
<el-tag type="info">前端</el-tag>
|
||||
<el-tag type="info">Python</el-tag>
|
||||
<el-tag type="info">算法</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, nextTick, defineProps, defineEmits } from "vue";
|
||||
<script setup name="UserInfoCard">
|
||||
import { computed, defineProps } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
// 用户信息
|
||||
userInfo: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
// icon地址
|
||||
iconUrl: {
|
||||
type: String,
|
||||
default: () => "",
|
||||
},
|
||||
actOnRef: {},
|
||||
});
|
||||
const emit = defineEmits("update:modelValue");
|
||||
const cardRef = ref(null);
|
||||
const avatarRef = computed(() => props.actOnRef);
|
||||
|
||||
nextTick(() => {
|
||||
document.addEventListener("mouseup", (e) => {
|
||||
// 如果点击的是按钮 则不执行下面的操作
|
||||
if (avatarRef.value && cardRef.value) {
|
||||
if (cardRef.value.contains(e.target)) {
|
||||
return;
|
||||
}
|
||||
if (!cardRef.value.contains(e.target)) {
|
||||
// 点击的区域不包含在弹窗区域之内就关闭弹窗
|
||||
emit("update:modelValue", false);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
const userInfo = computed(() => props.userInfo);
|
||||
|
||||
const statusTypeList = [
|
||||
{
|
||||
label: "正常",
|
||||
value: "Normal",
|
||||
type: "success",
|
||||
},
|
||||
{
|
||||
label: "危险",
|
||||
value: "Dangerous",
|
||||
type: "warning",
|
||||
},
|
||||
{
|
||||
label: "已禁止",
|
||||
value: "Ban",
|
||||
type: "danger",
|
||||
},
|
||||
];
|
||||
const getStatusInfo = (type) => {
|
||||
return statusTypeList.filter((item) => item.value === type)[0];
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.userInfo-card {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
/* 卡片样式... */
|
||||
<style scoped lang="scss">
|
||||
.userCard {
|
||||
.top {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
.left {
|
||||
width: 80px;
|
||||
.image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
margin-left: 20px;
|
||||
.userInfo {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.level {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
.website {
|
||||
display: flex;
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.line {
|
||||
margin: 20px 0;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
.bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.status {
|
||||
margin-left: 50px;
|
||||
}
|
||||
}
|
||||
.hobby {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .el-tag {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="point-box">
|
||||
<div class="left">
|
||||
<div class="icon"><img :src="userImageSrc" alt="" /></div>
|
||||
<UserInfoCard :userInfo="pointsData" :iconUrl="userImageSrc" />
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="top">
|
||||
@@ -36,6 +36,7 @@
|
||||
|
||||
<script setup name="PointsRanking">
|
||||
import { defineProps, computed } from "vue";
|
||||
import UserInfoCard from "@/components/UserInfoCard/index.vue";
|
||||
|
||||
const props = defineProps({
|
||||
pointsData: {
|
||||
@@ -44,6 +45,8 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const pointsData = computed(() => props.pointsData);
|
||||
|
||||
const statusTypeList = [
|
||||
{
|
||||
label: "正常",
|
||||
@@ -66,10 +69,10 @@ const getStatusInfo = (type) => {
|
||||
return statusTypeList.filter((item) => item.value === type)[0];
|
||||
};
|
||||
|
||||
const userLimit = computed(() => getStatusInfo(props.pointsData.userLimit));
|
||||
const userLimit = computed(() => getStatusInfo(pointsData.value.userLimit));
|
||||
const userImageSrc = computed(() => {
|
||||
if (props.pointsData.icon) {
|
||||
return import.meta.env.VITE_APP_BASEAPI + "/file/" + props.pointsData.icon;
|
||||
if (pointsData.value.icon) {
|
||||
return import.meta.env.VITE_APP_BASEAPI + "/file/" + pointsData.value.icon;
|
||||
} else {
|
||||
return "acquiesce.png";
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user