最近用uniapp给公司做一个内部MI聊天app，联系人是直接从组织架构获取的，后台提供接口即可，类似于树形结构菜单 参考企业微信通讯录。

效果图

首页

企业联系人页面

首页代码

//html
<div class="frimTitle">我的企业</div>
		<div v-for="(item,index) in menuList" :key='index'>
			<div class='frimTitle_btn frimTitle' @click="item.children.length>0?goFirmContacts(item):'' ">
				<img :src="src" alt="">
				<!-- <p :style="{'color': (checkIndex3==m.txt ? '#3d8cff':'#BBBBBB')}">{{m.txt}}</p> -->
				<div :style="{ 'color':(item.children.length>0?'' :'#aaaaaa') }">{{item.title}}</div>
			</div>
</div>
//js
data() {
			return {
				src: '../../static/file_msg.png',
				menuList: [
					
				]

			}
		},
                methods: {
                // 获取企业联系人
			async getContact() {
				uni.request({
					url: 接口地址",
					success: (res) => {
						this.menuList = res.data.data
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			
			// 跳转企业联系人
			goFirmContacts(val){
				uni.navigateTo({
					url: "/pages/mailList/firmContacts?val="+encodeURIComponent(JSON.stringify(val))
				})
			},
		}
                

企业联系人页面

//html
<template>
	<view class="">
		<uni-nav-bar left-icon="back" title="企业联系人" @clickLeft="goBack"></uni-nav-bar>
		<scroll-view scroll-y class="scroll-box">
			<!-- 部门文件夹 -->
			
			<div v-for="(item,index) in menuList.children" :key='index'>
				<div class='frimTitle_btn frimTitle' @click="item.children?goFirmContacts(item):'' ">
					<img :src="src" alt="">
					<div :style="{ 'color':(item.children?'' :'#aaaaaa') }">{{item.title}}</div>
				</div>
			</div>
			
			<!-- 个人用户 -->
			<view v-for="item in Linkman" :key="item.userNo" class="notice-item" @click='bindClick(item)'>
				<u-avatar src="../../static/user.png"/>
				<view class="info-area">
					<text class="nick">{{item.fullName}}</text>
				</view>
			</view>
			
			<view class="noData" v-if=' (menuList.children.length<1 && Linkman.length<1)'>
				<img src="../../static/noData.png" alt="">
				暂无数据
			</view>	
			
			
		</scroll-view>
	</view>
</template>
//js
data() {
			return {
				menuList: [],//组织架构
				menuListKey:'',
				src: '../../static/file_msg.png',
				Linkman:[
					
				]
			}
		},
                
                methods: {
			// 返回
			goBack() {
				uni.navigateBack()
			},
			// 跳转企业联系人
			goFirmContacts(val){
				uni.navigateTo({
					url: "/pages/mailList/firmContacts?val="+encodeURIComponent(JSON.stringify(val))
				})
			},
			//获取企业联系人
			getUsersByOrgId(){
				uni.request({
					url: 接口地址",
					data: {
						orgId:this.menuListKey
					},
					success: (res) => {
						this.Linkman = res.data.data
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			
			
			// 企业联系人 点击事件
			bindClick(item) {
				// 构造参数
				let newItem = item
				newItem.userID = newItem.userNo
				newItem.conversationID = 'single_' + newItem.userNo
				this.$u.vuex('vuex_conversation', newItem)
				this.$u.vuex('vuex_conversation_user', newItem.userNo)
				// 跳转到消息页面
				uni.navigateTo({
					url: "/pages/conversation/chatWin",
				});
			},
			
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.menuList = JSON.parse(decodeURIComponent(option.val));
			this.menuListKey = this.menuList.key  //获取企业联系人所需要的key
			
			this.getUsersByOrgId()
			
		}
                

ps:后台接口数据格式大概长这样