talk_appAmin/pages/Friend/addressbook.vue

<!-- 通讯录 -->
<template>

	<view style="position: fixed; top: 0;bottom: 0; left: 0; right: 0; background-color: #ffffff; z-index: -1;"></view>

	<up-index-list :index-list="indexList">
		<template v-for="(item, index) in itemArr">
			<!-- #ifdef APP-NVUE -->
			<up-index-anchor :text="indexList[index]"></up-index-anchor>
			<!-- #endif -->
			<up-index-item>
				<!-- #ifndef APP-NVUE -->
				<up-index-anchor :text="indexList[index]" bg-color="#ffffff" height="78rpx"
					style="border-bottom: none;margin-left: 32rpx;padding: 0rpx;" size="30rpx"></up-index-anchor>
				<!-- #endif -->
				<!-- <view class="list-cell" v-for="(cell, index) in item"> -->
				<view class="list-cell">
					<view class="box">
						<image src="../../static/images/icon/tu4-1.jpg" />
						<view style="margin: auto 0; margin-left: 24rpx;">
							<view><text class="boxtexttop">{{item.sysUserInfo.infoName}}</text></view>
							<view><text class="boxtextbottom">[签名]{{item.sysUserInfo.remark}}</text></view>
						</view>
					</view>
				</view>
			</up-index-item>
		</template>
	</up-index-list>
</template>

<script setup>
	// 创建响应式数据  
	const indexList = ref(["A", "B", "C", "D", "E", "F", "G", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V",
		"W", "X", "Y", "Z"
	]);
	const itemArr = ref([
		// ['列表A1', '列表A2', '列表A3'],
		// ['列表B1', '列表B2', '列表B3'],
		// ['列表C1', '列表C2', '列表C3'],
		// ['列表D1', '列表D2', '列表D3'],
		// ['列表D1', '列表D2', '列表D3'],
		// ['列表D1', '列表D2', '列表D3'],
		// ['列表D1', '列表D2', '列表D3'],
		// ['列表D1', '列表D2', '列表D3']
	]);

	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from 'vue';
	import {
		listFriendShip,
		getFriendShip,
		delFriendShip,
		addFriendShip,
		updateFriendShip,
		listFriendShipId,
	} from "@/api/signln/FriendShip/FriendShip";

	import {
		GetListid
	} from "@/api/signln/SignTa/SignTa";
	const {
		proxy
	} = getCurrentInstance();
	const form = {
		// pageNum: 1,
		// pageSize: 10,
		userId: null,
		friendId: null,
		actionUserId: null,
		actionTime: null,
		status: null
	}
	const myuserid = ref(0);
	onMounted(() => {
		//获取$("#")
		const getuser = GetListid().then(res => {
			myuserid.value = res;
			console.log("党情登录用户" + myuserid.value)
		})
	})
	//获取所有的好友
	function GetList() {
		listFriendShipId(form.value).then(response => {
			itemArr.value = response.rows;
			console.log(response.rows)
		});
	}
	GetList();
</script>

<style scoped>
	.list-cell {
		padding: 0rpx;
	}

	.box {
		width: 750rpx;
		height: 108rpx;
		background: #ffffff;
		display: flex;
	}

	.box>image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 60rpx;
		display: block;
		margin: auto 0;
		margin-left: 32rpx;
	}

	.boxtexttop {
		font-weight: 600;
		/* width: 81rpx; */
		height: 30rpx;
		font-size: 30rpx;
		text-align: left;
		color: #000000;
	}

	.boxtextbottom {
		font-weight: Regular;
		/* width: 291rpx; */
		height: 21rpx;
		font-size: 20rpx;
		text-align: left;
		color: #939393;
	}
</style>