chat-app/src/pages/chatSettings/components/select-member-item.vue

<template>
  <div
    class="select-member-item"
    @click="clickItem(props?.memberItem)"
    :class="
      props.itemStyle === 'card'
        ? 'select-member-item-card'
        : 'select-member-item-list'
    "
    :style="{
      padding:
        props?.manageType === 'removeMembers' ? '18rpx 62rpx 18rpx 34rpx' : '',
    }"
  >
    <div class="member-info">
      <slot name="left"></slot>
      <div
        class="select-member-item-avatar"
        v-if="
          !(
            (props?.groupType == 2 || props?.groupType == 4) &&
            props?.manageType === 'admin'
          )
        "
      >
        <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">
        <span class="text-[28rpx] font-medium">{{ nameText }}</span>
      </div>
    </div>
    <div class="select-member-tags">
      <div
        class="done-silence-tag"
        v-if="
          props?.memberItem?.is_mute === 1 && props?.manageType === 'silence'
        "
      >
        <span class="text-[28rpx] font-regular">
          {{ $t('silence.tag.hasDone') }}
        </span>
      </div>
      <div
        class="is-mine-tag"
        v-if="
          props?.memberItem?.is_mine && props?.manageType === 'removeMembers'
        "
      >
        <img src="@/static/image/chatSettings/is-mine.png" />
      </div>
      <div
        class="is-admin-tag"
        v-if="
          (props?.memberItem?.leader === 1 ||
            props?.memberItem?.leader === 2) &&
          (props?.manageType === 'admin' ||
            props?.manageType === 'removeMembers')
        "
      >
        <span class="text-[28rpx] font-regular">
          {{ $t('group.identify.admin') }}
        </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, //管理类型
  itemStyle: String,
  groupType: Number, //群类型
})
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;
  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;
      }
    }
  }
  .select-member-tags {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    .done-silence-tag {
      span {
        color: #b4b4b4;
        line-height: 40rpx;
      }
    }
    .is-mine-tag {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      img {
        width: 52rpx;
        height: 52rpx;
      }
    }
    .is-admin-tag {
      padding: 6rpx 12rpx;
      border: 2rpx solid #b4b4b4;
      border-radius: 8rpx;
      margin: 0 0 0 20rpx;
      span {
        color: #b4b4b4;
        line-height: 40rpx;
      }
    }
  }
}

.select-member-item-card {
  margin: 20rpx 0 0;
  box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
  border-radius: 8rpx;
}
.select-member-item-list {
  border-bottom: 1px solid $theme-border-color;
}
</style>