116 lines
2.7 KiB
Vue
116 lines
2.7 KiB
Vue
<template>
|
|
<div class="select-member-item" @click="clickItem(props?.memberItem)">
|
|
<div class="member-info">
|
|
<slot name="left"></slot>
|
|
<div class="select-member-item-avatar" v-if="props?.manageType === 'silence'">
|
|
<img v-if="avatarImg !== 'textImg'" :src="avatarImg" />
|
|
<span v-if="avatarImg === 'textImg'" class="text-[24rpx] font-bold">
|
|
{{ imgText }}
|
|
</span>
|
|
</div>
|
|
<div class="select-member-item-name" v-if="props?.manageType === 'silence'">
|
|
<span class="text-[28rpx] font-medium">{{ nameText }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="operate-btns">
|
|
<div class="btn-undo-silence">
|
|
<span v-if="props?.memberItem?.is_mute === 1">
|
|
{{ $t('chatSettings.btn.undoSilence') }}
|
|
</span>
|
|
<span v-if="props?.memberItem?.is_mute === 1">
|
|
{{ $t('silence.tag.hasDone') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { computed, defineProps, defineEmits } from 'vue'
|
|
import { onMounted, reactive } from 'vue'
|
|
|
|
const emits = defineEmits(['clickItem'])
|
|
|
|
const props = defineProps({
|
|
memberItem: Object, //人员
|
|
manageType: String, //管理类型
|
|
})
|
|
onMounted(() => {})
|
|
|
|
//头像
|
|
const avatarImg = computed(() => {
|
|
let avatar_img = props?.memberItem?.avatar
|
|
if (!avatar_img) {
|
|
avatar_img = 'textImg'
|
|
}
|
|
return avatar_img
|
|
})
|
|
|
|
//名字
|
|
const nameText = computed(() => {
|
|
let name = props?.memberItem?.nickname
|
|
return name
|
|
})
|
|
|
|
//文字头像
|
|
const imgText = computed(() => {
|
|
return nameText.value.length >= 2 ? nameText.value.slice(-2) : nameText.value
|
|
})
|
|
|
|
//点击item
|
|
const clickItem = () => {
|
|
emits('clickItem')
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.select-member-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 18rpx 34rpx;
|
|
background-color: #fff;
|
|
margin: 20rpx 0 0;
|
|
box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
|
|
border-radius: 8rpx;
|
|
width: 100%;
|
|
.member-info {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
.select-member-item-avatar {
|
|
background: linear-gradient(to right, #674bbc, #46299d);
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 20rpx 0 0;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
span {
|
|
color: #fff;
|
|
line-height: 34rpx;
|
|
}
|
|
}
|
|
.select-member-item-name {
|
|
span {
|
|
color: $theme-text;
|
|
line-height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
.operate-btns {
|
|
.btn-undo-silence {
|
|
span {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|