yijianbao_user_uniapp/pages_im/pages/contact/index/components/OrgnizationRow.vue

<template>
	<view class="orgnization_row">
		<view @click="itemClick(item, idx)" v-for="(item, idx) in orgList" :key="idx" class="orgnization_row_item">
			<my-avatar v-if="idx === 0" :desc="item.title" :src="item.icon" size="42" />
			<view v-else class="orz_icon">
				<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/contact_dep_icon.png" mode=""></image>
			</view>
			<view class="item_content">
				<text class="title">
					{{ item.title }}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
import MyAvatar from '../../../../components/MyAvatar/index.vue';
export default {
	name: '',
	components: {
		MyAvatar
	},
	props: {
		checkedUserInfoList: Array,
		checkedGroupInfoList: Array,
		disabledUserIDList: Array,
		groupID: String
	},
	data() {
		return {
			orgList: []
		};
	},
	mounted() {
		this.getOrganizationData();
	},
	methods: {
		itemClick({ departmentID }, idx) {
			uni.$u.route('/pages_im/pages/contact/orgnization/index', {
				title: this.$store.getters.storeOrganizationData.current.name,
				departmentID,
				checkedUserInfoList: JSON.stringify(this.checkedUserInfoList),
				checkedGroupInfoList: JSON.stringify(this.checkedGroupInfoList),
				disabledUserIDList: JSON.stringify(this.disabledUserIDList),
				groupID: this.groupID
			});
		},
		getOrganizationData() {
			let tmpList = [];
			tmpList.push({
				title: this.$store.getters.storeOrganizationData.current.name,
				icon: this.$store.getters.storeOrganizationData.current.faceURL,
				departmentID: this.$store.getters.storeOrganizationData.current.departmentID
			});
			const departmentList = (this.$store.getters.storeSelfInfo.members ?? []).map((item) => item.department);
			departmentList.map((item) => {
				tmpList.push({
					title: item.name,
					departmentID: item.departmentID
				});
			});
			this.orgList = [...tmpList];
		}
	}
};
</script>

<style lang="scss" scoped>
.orgnization_row {
	background-color: #fff;

	&_item {
		@include vCenterBox();
		margin: 0 44rpx;
		padding: 24rpx 0;

		.company_icon,
		.orz_icon {
			width: 42px;
			min-width: 42px;
			height: 42px;
			min-height: 42px;
		}

		.orz_icon {
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.item_content {
			@include btwBox();
			margin-left: 24rpx;
			width: 100%;
			position: relative;
			color: #0c1c33;
		}
	}
}
</style>