ygoa_miniapp/pages/contacts/group/index.vue

<template>
	<view>
		<uv-index-list :index-list="indexList">
			<template v-for="(item, 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 :to="`../../mine/personal_message/personal_message?id=${id}&name=${name}`"
								v-for="({ id, name, phone, avatar}, index) in item" @click="clickChat" :title="name" :avatar="avatar"
								:note="phone" time="研发部" :clickable="true" :avatar-circle="true" :key="index">
								</uni-list-chat>
		
						</uni-list>
					</view>
				</uv-index-item>
			</template>
		</uv-index-list>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue'
	import headImg from "/static/images/mine/headImg.jpg";
	const indexList = ref([])
	const itemArr = ref([])
	onMounted(() => {
		const dept = '研发部'
		uni.setNavigationBarTitle({
			title: dept
		});
		indexList.value = ["A", "B", "C", "F", "G"]
		itemArr.value = [
			[
				{
					id: 1,
					name: '张三',
					phone: '13579543684',
					avatar: headImg
				},
				{
					id: 2,
					name: '李四',
					phone: '13987654321',
					avatar: headImg
				},
				{
					id: 3,
					name: '王五',
					phone: '13812345678',
					avatar: headImg
				},
			],
			[
				{
					id: 4,
					name: '赵六',
					phone: '13765432109',
					avatar: headImg
				},
				{
					id: 5,
					name: '孙七',
					phone: '13698765432',
					avatar: headImg
				},
				{
					id: 6,
					name: '周八',
					phone: '13524689753',
					avatar: headImg
				}
			],
			[
				{
					id: 7,
					name: '吴九',
					phone: '13456789012',
					avatar: headImg
				},
				{
					id: 8,
					name: '郑十',
					phone: '13367890123',
					avatar: headImg
				},
				{
					id: 9,
					name: '钱十一',
					phone: '13278901234',
					avatar: headImg
				}
			],
			
			[
				{
					id: 16,
					name: '郑十八',
					phone: '13876543210',
					avatar: headImg
				},
				{
					id: 17,
					name: '吴十九',
					phone: '13712345678',
					avatar: headImg
				},
				{
					id: 18,
					name: '周二十',
					phone: '13534567890',
					avatar: headImg
				}
			],
			[
				{
					id: 19,
					name: '二十一',
					phone: '13445678901',
					avatar: headImg
				},
				{
					id: 20,
					name: '二十二',
					phone: '13356789012',
					avatar: headImg
				},
				{
					id: 21,
					name: '二十三',
					phone: '13267890123',
					avatar: headImg
				}
			]
		]
	})
	function clickTop() {
		console.log('clickTop');
	}
	function clickChat(e) {
		console.log('clickChat', e);
	}
</script>

<style lang="scss">

</style>