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'
    "
  >
    <div class="member-info">
      <slot name="left"></slot>
      <div
        class="select-member-item-avatar"
        v-if="
          props?.manageType === 'silence' ||
          props?.manageType === 'searchRecord'
        "
      >
        <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' ||
          props?.manageType === 'searchRecord'
        "
      >
        <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"
          class="text-[28rpx] font-regular"
        >
          {{ $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, //管理类型
  itemStyle: 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;
  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 {
        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>