chat-app/src/pages/chatSettings/components/groupMembersList.vue

224 lines
6.2 KiB
Vue
Raw Normal View History

<template>
<div class="group-member-list">
<div
class="group-member-list-each"
:style="{
width: (
props.memberListsLimit ? memberIndex < props.memberListsLimit : true
)
? ''
: '0',
}"
v-for="(memberItem, memberIndex) in sortedMemberList"
@click="toUserDetailPage(memberItem)"
>
<div
class="group-member-each"
v-if="
props.memberListsLimit ? memberIndex < props.memberListsLimit : true
"
>
<div class="group-member-avatar">
<img v-if="memberItem?.avatar" :src="memberItem?.avatar" />
<span v-if="!memberItem?.avatar" class="text-[24rpx] font-bold">
{{
(memberItem?.nickname || memberItem?.nickName)?.length >= 2
? (memberItem?.nickname || memberItem?.nickName).slice(-2)
: memberItem?.nickname || memberItem?.nickName
}}
</span>
</div>
<div
class="group-member-tag"
v-if="memberItem?.leader === 1 || memberItem?.leader === 2"
>
<span class="text-[16rpx] font-regular">
{{ $t('group.identify.admin') }}
</span>
</div>
<div class="group-member-name">
<span class="text-[24rpx] font-regular">
{{ memberItem.nickname || memberItem.nickName }}
</span>
</div>
</div>
</div>
<div
class="group-member-list-each"
@click="groupAddMembers"
v-if="
(props?.groupType == 1 || props?.groupType == 3) &&
!props?.hideAddRemoveBtns
"
>
<div class="group-member-each">
<div class="group-member-avatar" :style="{ background: 'unset' }">
<img src="/src/static/image/chatSettings/add-member.png" />
</div>
<div class="group-member-name">
<span class="text-[24rpx] font-regular">添加</span>
</div>
</div>
</div>
<div
class="group-member-list-each"
@click="groupRemoveMembers"
v-if="
props?.is_manager &&
(props?.groupType == 1 || props?.groupType == 3) &&
!props?.hideAddRemoveBtns
"
>
<div class="group-member-each">
<div class="group-member-avatar" :style="{ background: 'unset' }">
<img src="/src/static/image/chatSettings/remove-member.png" />
</div>
<div class="group-member-name">
<span class="text-[24rpx] font-regular">移除</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { defineProps, computed } from 'vue'
const props = defineProps({
memberList: Array, //人员列表
memberListsLimit: Number, //人员列表数量限制
is_manager: Boolean, //是否管理员
groupType: Number, //群类型
hideAddRemoveBtns: Boolean, //是否隐藏添加移除按钮
})
// 对成员列表进行排序
const sortedMemberList = computed(() => {
if (!props.memberList || props.memberList.length === 0) return [];
// 创建一个新数组,保留原始索引
const indexedList = props.memberList.map((item, index) => ({ item, index }));
// 按照leader属性和原始顺序排序
return indexedList.sort((a, b) => {
const leaderA = a.item.leader || 0;
const leaderB = b.item.leader || 0;
// 如果leader状态不同优先按leader排序
if ((leaderA === 1 || leaderA === 2) && (leaderB !== 1 && leaderB !== 2)) {
return -1; // a排在前面
}
if ((leaderB === 1 || leaderB === 2) && (leaderA !== 1 && leaderA !== 2)) {
return 1; // b排在前面
}
// 如果都是管理员按照leader值大小排序
if ((leaderA === 1 || leaderA === 2) && (leaderB === 1 || leaderB === 2)) {
return leaderB - leaderA; // leader值大的排前面
}
// 其他情况保持原始顺序
return a.index - b.index;
}).map(item => item.item); // 返回排序后的原始对象
})
//点击跳转到用户详情页面
const toUserDetailPage = (userItem) => {
console.log(userItem)
uni.navigateTo({
url:
'/pages/dialog/dialogDetail/userDetail?erpUserId=' +
(userItem.erp_user_id || userItem.ID),
})
}
//点击群聊拉人
const groupAddMembers = () => {
uni.navigateTo({
url:
'/pages/chooseByDeps/index?chooseMode=2&preSelectedMembers=' +
encodeURIComponent(JSON.stringify(props?.memberList)),
})
}
//点击群聊移除人
const groupRemoveMembers = () => {
uni.navigateTo({
url:
'/pages/chatSettings/groupManage/selectMembers?manageType=removeMembers',
})
}
</script>
<style scoped lang="scss">
.group-member-list {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
.group-member-list-each {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: calc(100% / 5);
.group-member-each {
padding: 32rpx 0 0;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
.group-member-avatar {
width: 72rpx;
height: 72rpx;
border-radius: 50%;
overflow: hidden;
background: linear-gradient(to right, #674bbc, #46299d);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
}
span {
line-height: 34rpx;
color: #fff;
}
}
.group-member-tag {
position: absolute;
bottom: 34rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: #cf3050;
border-radius: 16rpx;
padding: 0 12rpx;
span {
line-height: 22rpx;
color: #fff;
}
}
.group-member-name {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 8rpx 0 0;
width: 100%;
span {
overflow: hidden;
text-overflow: ellipsis;
line-height: 34rpx;
color: #919191;
white-space: nowrap;
}
}
}
}
}
</style>