yijianbao_user_uniapp/pages_im/components/UserItem/index.vue

<template>
  <view @click="clickItem" class="user_item">
    <view
      v-if="checkVisible"
      class="check_wrap"
      :class="{ check_wrap_active: checked, check_wrap_disabled: disabled }">
      <u-icon v-show="checked" name="checkbox-mark" size="12" color="#fff" />
    </view>

    <my-avatar
      :src="item.faceURL"
      :desc="item.remark || item.nickname || item.showName"
      :isGroup="item.groupName !== undefined || isGroupConversation"
      size="42"
    />

    <view class="user_item_details">
      <view class="user_name">
        <text>{{
          item.remark || item.nickname || item.groupName || item.showName
        }}</text>
        <u-tag
          v-if="position"
          :text="position"
          plain
          shape="circle"
          style="margin-left: 8rpx"
          size="mini"
        ></u-tag>
      </view>

      <text v-if="item.roleLevel === 100 && showRole" class="user_role">群主</text>
      <text v-if="item.roleLevel === 60 && showRole" class="user_role admin_role"
        >管理员</text
      >
      <!-- <view class="bottom_line" /> -->
    </view>

    <slot name="action"></slot>
  </view>
</template>

<script>
import MyAvatar from "../../components/MyAvatar/index.vue";
import { SessionType } from "openim-uniapp-polyfill";
export default {
  name: "UserItem",
  components: {
    MyAvatar,
  },
  props: {
    checkVisible: {
      type: Boolean,
      default: false,
    },
    checked: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    item: Object,
    position: {
      type: String,
      default: "",
    },
    showRole: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {};
  },
  computed: {
    isGroupConversation() {
      return this.item.conversationType === SessionType.WorkingGroup;
    },
  },
  methods: {
    clickItem() {
      if (!this.disabled) {
        this.$emit(this.checkVisible ? "updateCheck" : "itemClick", this.item);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.user_item {
  @include vCenterBox();
  padding: 24rpx 44rpx;
  color: $uni-text-color;
  position: relative;

  .check_wrap {
    @include centerBox();
    box-sizing: border-box;
    width: 40rpx;
    min-width: 40rpx;
    height: 40rpx;
    min-height: 40rpx;
    border: 2px solid #979797;
    border-radius: 50%;
    margin-top: 16rpx;
    margin-right: 24rpx;

    &_active {
      background-color: #1d6bed;
      border: none;
    }

    &_disabled {
      background-color: #c8c9cc;
    }
  }

  &_details {
    @include vCenterBox();
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-left: 24rpx;
    width: 100%;
    position: relative;

    .bottom_line {
      height: 1px;
      width: 100%;
      background-color: #f0f0f0;
      position: absolute;
      bottom: -44rpx;
    }

    .user_name {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex: 1;
      @include nomalEllipsis();
      color: $uni-text-color;
    }

    .user_role {
      font-size: 34rpx;
      // background-color: #f4da9a;
      // color: #FF8C00;
      padding: 8rpx 24rpx;
      border-radius: 24rpx;
      margin-left: 24rpx;
      color: $u-tips-color;
    }

    .admin_role {
      color: $u-tips-color;
      // background-color: #A2C9F8;
      // color: #2691ED;
    }
  }
}

.u-list-item:last-child {
  .bottom_line {
    height: 0;
  }
}
</style>