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'
import { useUserStore } from '@/store/user.js'
const userStore = useUserStore()
onMounted(() => {
	// 获取 通讯录 索引列表
	let unitId = userStore.user.unitId
	if ( unitId === 0 ) unitId = userStore.user.groupid
	// getContactAllUser(userStore.user.groupid).then(res => {
	getContactAllUser(unitId).then(res => {
		getContactList(res.returnParams)
	})
})
// 索引列表
const indexList = ref([])
const itemArr = ref([])
function getContactList(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?useId=' + e.useId)
}
</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>