ygoa_miniapp/pages/contacts/index.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" :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 $tab from '@/plugins/tab.js'
import { getContactAllUser } from '@/api/contacts.js'
import { useUserStore } from '@/store/user.js'
import { onShow } from '@dcloudio/uni-app'
import config from '@/config';
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)
	})
})

onShow(()=>{
	uni.$emit('showTabBarBadge')
})

// 索引列表
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' && user.name.slice(-3) !== '管理员')
		} 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">
::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;
						}
					}
				}
			}
		}
	}
	// .top {
	// 	.top_slot_container {
	// 		height: 100%;
	// 		width: 100%;

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

	// 		.top_text {
	// 			font-size: calc(1.5rem + 0px);
	// 		}
	// 	}
	// }

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