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">
			<text class="user_name">{{item.remark || item.nickname || item.groupName || item.showName}}</text>
			<text v-if="item.roleLevel === 100" class="user_role">群主</text>
			<text v-if="item.roleLevel === 60" 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,
		},
		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 {
				@include nomalEllipsis();
				max-width: 60%;
				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>