95 lines
2.1 KiB
Vue
95 lines
2.1 KiB
Vue
<template>
|
||
<div class="avatar-module" :style="customStyle">
|
||
<img :src="avatar" v-if="avatar" />
|
||
<span v-else :style="customTextStyle">{{ text_avatar }}</span>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
//群聊默认头像
|
||
import groupNormal from '@/static/image/chatList/groupNormal.png'
|
||
import groupDepartment from '@/static/image/chatList/groupDepartment.png'
|
||
import groupProject from '@/static/image/chatList/groupProject.png'
|
||
import groupCompany from '@/static/image/chatList/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="scss" 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%;
|
||
}
|
||
}
|
||
</style>
|