heshanApp/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">
			<image v-if="getRole() == 1" class="taoj" src="/static/svg/doctor.svg"></image>
			<image v-if="getRole() == 2" class="taoj" src="/static/svg/guanjia.svg"></image>
		</my-avatar>

		<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>
				<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>
		</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;
		}
	},
	mounted() {

	},
	methods: {
		clickItem() {
			if (!this.disabled) {
				this.$emit(this.checkVisible ? 'updateCheck' : 'itemClick', this.item);
			}
		},
		getRole() {
			let userType = 0;
			let userId = this.item.userID;
			if (userId != undefined && (userId != "" || userId.length > 0)) {
				if (userId.indexOf('U') !== -1) {
					userType = 0;
				}
				if (userId.indexOf('D') !== -1) {
					userType = 1;
				}
				if (userId.indexOf('C') !== -1) {
					userType = 2;
				}
			}
			return userType;
		}
	}
};
</script>

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

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

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

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

	&_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: 24rpx;
			background-color: rgba(255, 92, 3, 0.12);
			color: #FF5030;
			padding: 6rpx 8rpx;
			border-radius: 8rpx;
			margin-left: 24rpx;
		}

		

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

.u-list-item:last-child {
	.bottom_line {
		height: 0;
	}
}

.taoj {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}
</style>