ygoa_miniapp/pages/work/homesysSetting/userList.vue

<template>
	<page-meta root-font-size="system" />
	<view class="contact_container">
		<uv-index-list :index-list="indexList">
			<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 || config.baseUrlPre+config.defaultAvatarPath" :clickable="true"
								:avatar-circle="true" :key="index">
								<view class="chat-custom-right">
									<text class="chat-custom-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 $tab from '@/plugins/tab.js'
import { getContactAllUser } from '@/api/contacts.js'
import { useUserStore } from '@/store/user.js'
import config from '@/config';
const userStore = useUserStore()

onMounted(() => {
	// 获取 通讯录 索引列表
	let unitId = userStore.user.unitId
	if ( unitId === 0 ) unitId = userStore.user.groupid
	getContactAllUser(unitId).then(res => {
		getContactList(res.returnParams)
	})
})

// 索引列表
const indexList = ref([])
const itemArr = ref([])
function getContactList(data) {
	const filtered = {}
	Object.keys(data).forEach((key) => {
		const users = (data[key] || []).filter((user) => user.userState !== '0' && user.name.slice(-3) !== '管理员')
		if (users.length > 0) {
			filtered[key] = users
		}
	})
	indexList.value = Object.keys(filtered)
	itemArr.value = Object.values(filtered)
}
// 点击通讯录列表
function clickChat(e) {
	$tab.navigateTo('/pages/work/homesysSetting/user?userName=' + e.userName)
}
</script>

<style lang="scss">
::v-deep .contact_container {
	.uv-index-list {
		.uv-index-list__letter {
			.uv-index-list__letter__item {
				width: calc(16px + .5*(1rem - 16px)) !important;
				height: calc(16px + .5*(1rem - 16px)) !important;
			}
		}
		.uv-index-item {
			.uv-index-anchor {
				height: calc(32px + .5*(1rem - 16px)) !important;
				.uv-index-anchor__text {
					font-size: calc(1.5rem + 0px) !important;
				}
			}
			.chat_list {
				.uni-list-chat {
					.uni-list-chat__header-warp {
						.uni-list-chat__header {
							width: calc(45px + .5*(1rem - 16px)) !important;
							height: calc(45px + .5*(1rem - 16px)) !important;
						}
					}
					.uni-list-chat__content {
						.uni-list-chat__content-title {
							font-size: calc(1rem + 0px) !important;
						}
						.uni-list-chat__content-note {
							font-size: calc(0.75rem + 0px) !important;
						}
					}
				}
			}
		}
	}

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