需求
一个人显示头像,
两个人显示对方头像
更多人见下图:
参考了链接
组件代码
<template>
<div class="group-avatar" v-if="groupMembers.length">
<tm-avatar v-if="groupMembers.length==1 || groupMembers.length==2" :src="avatar" shape="square" :size="size" class="user-avatar"></tm-avatar>
<div v-else class="avatar">
<tm-avatar shape="square" v-for="(item,index) in groupAvatarUrls" :key="'avatar_'+index" :src="item" :size="size" v-if="index < 9">
</tm-avatar>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import Avatar from '@/renderer/components/Avatar.vue';
import { Member } from "@/main/xim/models";
@Component({ components: { Avatar } })
export default class TmGroupAvatar extends Vue {
@Prop({ type: String, required: true, validator: value => ["user", "users", "self"].includes(value)})
private readonly chatType!: "user" | "users" | "self";
@Prop({ type: Number, required: true })
private readonly chatId!: number;
size:number = 0;
groupMembers:string[] = [];
groupAvatarUrls:string[] = [];
/**
* 成员信息
*/
get membersMap() {
return this.$store.state.contactsCache.membersMap;
}
async created(){
let chatA = await app.xchat.fetchChat([this.chatType, this.chatId]);
this.groupMembers = (<Member[]>chatA.members).map(item => item.eid);
this.groupAvatarUrls = this.groupMembers.map(eid => this.membersMap[eid] ? this.membersMap[eid].avatar_url : "" );
this.computedAvatar();
}
//计算头像布局
computedAvatar() {
if(this.groupAvatarUrls.length > 4) {
this.size = 12;
}else if(this.groupAvatarUrls.length > 2) {
this.size = 18;
}else {
this.size = 40;
}
}
get avatar(){
if (this.groupMembers.length == 1){
return this.membersMap[app.member!.empid].avatar_url;
}else if (this.groupMembers.length == 2){
let otherPerson = this.groupMembers.filter(eid => eid != app.member!.empid);
if (otherPerson.length){
return this.membersMap[otherPerson[0]] && this.membersMap[otherPerson[0]].avatar_url;
}
}
}
}
</script>
<style lang="scss" scoped>
.avatar {
width: 40px;
height: 40px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: wrap-reverse;
border: #000 1px solid;
/*margin: 30px;*/
}
.avatarImg {
width: 40px;
height: 40px;
}
.avatarItem--1 {
width: 98%;
height: 98%;
}
.avatarItem--2 {
width: 47%;
height: 47%;
margin: 1%;
}
.avatarItem--3 {
width: 32%;
height: 30%;
margin: 1%;
}
</style>
···