ygoa_miniapp/pages/contacts/index.vue

<template>
	<view class="contact_container">
		<uv-index-list :index-list="indexList">
			<!-- <template v-slot:header>
				<view class="top">
					<uni-list>
						<uni-list-item :clickable="true" @click="clickTop" :to="'./group/index'">
							<template v-slot:body>
								<view class="top_slot_container">
									<uni-row>
										<uni-col :xs="5" :sm="4">
											<uni-icons color="#ffffff" type="staff" size="50"></uni-icons>
										</uni-col>
										<uni-col :xs="17" :sm="18">
											<view class="top_text">部门</view>
										</uni-col>
									</uni-row>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
			</template> -->
			<template v-for="(items, index) in itemArr" :key="index">
				<uv-index-item>
					<uv-index-anchor :text="indexList[index]" size="16"></uv-index-anchor>
					<view class="chat_list">
						<uni-list :border="true">
							<uni-list-chat v-for="(item, index) in items" @click="clickChat(item)" :title="item.name"
								:avatar="item.avatar || headImg" :note="item.desktop_phone" :clickable="true" :avatar-circle="true" :key="index">
								<view class="chat-custom-right">
									<text class="chat-custom-text" v-text="item.dept"></text>
								</view>
							</uni-list-chat>
						</uni-list>
					</view>
				</uv-index-item>
			</template>
		</uv-index-list>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import headImg from "@/static/images/mine/headImg.jpg";
	import $tab from '@/plugins/tab.js'
	import { getContactAllUser } from '@/api/contacts.js'
	onMounted(() => {
		const unitId = '47517153919893'
		// 获取 通讯录 索引列表
		getContactAllUser(unitId).then(res => {
			getContactList(res.returnParams)
		})
	})
	// 索引列表
	const indexList = ref([])
	const itemArr = ref([])
	function getContactList(data) {
		// console.log('data', data);
		
		for(let key in data) {
			// hasOwnProperty 排除 __proto__等数据
			if (data.hasOwnProperty(key)) {
				// 过滤 userState 为 0 的 User
				data[key] = data[key].filter(user => user.userState !== '0')
			} else {
				continue
			}
			// 删除 过滤后 数据为0的 索引 
			if (data[key].length === 0) delete data[key]
		}
		// 获取索引
		indexList.value = Object.keys(data)
		// 获取索引数据
		itemArr.value = Object.values(data)
	}
	function clickTop() {
		console.log('clickTop');
	}
	// 点击通讯录列表
	function clickChat(e) {
		$tab.navigateTo('/pages/mine/personal_message/personal_message?id=' + e.useId + '&name=' + e.name)
	}
</script>

<style lang="scss">
	.contact_container {
		.top {
			.top_slot_container {
				height: 100%;
				width: 100%;

				::v-deep .uni-icons {
					background-color: #468bf0;
					border-radius: 50%;
				}

				.top_text {
					font-size: 24px;
				}
			}
		}

		.chat_list {
			.chat-custom-right {
				.chat-custom-text {
					margin-right: 10px;
				}
			}
		}
	}
</style>