96 lines
2.1 KiB
Vue
96 lines
2.1 KiB
Vue
|
<template>
|
|||
|
|
<div class="avatar-module" :style="[customStyle, { background: avatar ? '#fff' : '' }]">
|
|||
|
|
<img :src="avatar" v-if="avatar" />
|
|||
|
|
<span v-else :style="customTextStyle">{{ text_avatar }}</span>
|
|||
|
|
</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'
|
|||
|
|
|
|||
|
|
const props = defineProps({
|
|||
|
|
mode: {
|
|||
|
|
//模式：1=人；2=群
|
|||
|
|
type: Number,
|
|||
|
|
default: 0,
|
|||
|
|
},
|
|||
|
|
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
|
|||
|
|
})
|
|||
|
|
</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: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|