145 lines
3.7 KiB
Vue
145 lines
3.7 KiB
Vue
<template>
|
||
<div class="relative">
|
||
<div class="avatar-module" :style="[customStyle, { background: avatar ? '#fff' : '' }]">
|
||
<img :src="avatar" v-if="avatar" />
|
||
<span v-else :style="customTextStyle">{{ text_avatar }}</span>
|
||
</div>
|
||
<div
|
||
v-if="[2,3,4].includes(groupType)&&showGroupType"
|
||
class="absolute border-2px border-solid rounded-3px bg-#fff flex justify-center items-center leading-none"
|
||
:style="[
|
||
groupLabelStyle,
|
||
`color:${labelColor.find(x=>x.group_type===groupType)?.color};border-color:${labelColor.find(x=>x.group_type===groupType)?.color}`
|
||
]"
|
||
>
|
||
{{ labelColor.find(x=>x.group_type===groupType)?.label }}
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
//群聊默认头像
|
||
import groupNormal from '@/assets/image/groupNormal.png'
|
||
import groupDepartment from '@/assets/image/groupDepartment.png'
|
||
import groupProject from '@/assets/image/groupProject.png'
|
||
import groupCompany from '@/assets/image/groupCompany.png'
|
||
import { computed, defineProps } from 'vue'
|
||
//群类型：1=普通群；2=部门群；3=项目群；4=总群/公司群
|
||
const labelColor=[
|
||
{group_type:2,color:'#377EC6',label:'部门'},
|
||
{group_type:3,color:'#C1691C',label:'项目'},
|
||
{group_type:4,color:'#7A58DE',label:'公司'},
|
||
]
|
||
const props = defineProps({
|
||
mode: {
|
||
//模式：1=人；2=群
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
showGroupType:{
|
||
type:Boolean,
|
||
default:false
|
||
},
|
||
avatar: {
|
||
//头像
|
||
type: String,
|
||
default: '',
|
||
},
|
||
userName: {
|
||
//用户名称
|
||
type: String,
|
||
default: '',
|
||
},
|
||
groupType: {
|
||
//群类型：1=普通群；2=部门群；3=项目群；4=总群/公司群
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
customStyle: {
|
||
//自定义样式
|
||
type: Object,
|
||
default() {
|
||
return {}
|
||
},
|
||
},
|
||
customTextStyle: {
|
||
//自定义文字样式
|
||
type: Object,
|
||
default() {
|
||
return {}
|
||
},
|
||
},
|
||
})
|
||
|
||
//头像
|
||
const avatar = computed(() => {
|
||
let avatar_img = props?.avatar
|
||
if (!avatar_img) {
|
||
if (props?.mode === 1) {
|
||
} else if (props?.mode === 2) {
|
||
if (props?.groupType === 1) {
|
||
avatar_img = groupNormal
|
||
} else if (props?.groupType === 2) {
|
||
avatar_img = groupDepartment
|
||
} else if (props?.groupType === 3) {
|
||
avatar_img = groupProject
|
||
} else if (props?.groupType === 4) {
|
||
avatar_img = groupCompany
|
||
}
|
||
}
|
||
}
|
||
return avatar_img
|
||
})
|
||
|
||
//文字头像
|
||
const text_avatar = computed(() => {
|
||
return props?.userName.length >= 2
|
||
? props?.userName.slice(-2)
|
||
: props?.userName
|
||
})
|
||
|
||
// 计算群标签的动态样式
|
||
const groupLabelStyle = computed(() => {
|
||
// 获取头像的宽高
|
||
const avatarWidth = parseInt(props.customStyle.width) || 42
|
||
const avatarHeight = parseInt(props.customStyle.height) || 42
|
||
|
||
// 计算标签的尺寸比例（基于原始尺寸：头像42px，标签宽32px高18px，文字10px）
|
||
const widthRatio = avatarWidth / 42
|
||
const heightRatio = avatarHeight / 42
|
||
|
||
// 计算标签的尺寸
|
||
const labelWidth = Math.round(32 * widthRatio)
|
||
const labelHeight = Math.round(18 * heightRatio)
|
||
const fontSize = Math.round(10 * widthRatio)
|
||
|
||
// 计算标签的位置（基于原始位置：top-28px）
|
||
const topPosition = Math.round(28 * heightRatio)
|
||
|
||
return {
|
||
width: `${labelWidth}px`,
|
||
height: `${labelHeight}px`,
|
||
fontSize: `${fontSize}px`,
|
||
top: `${topPosition}px`,
|
||
left: '50%',
|
||
transform: 'translateX(-50%)'
|
||
}
|
||
})
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.avatar-module {
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(to right, #674bbc, #46299d);
|
||
flex-shrink: 0;
|
||
img {
|
||
width: 42px;
|
||
height: 42px;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
</style>
|