xg_total_process_master_cloud_h5/pages/addressbook/addressbook.vue

<template>
	<view>
		<cu-custom bgColor="bg-blue">
			<block slot="content">通讯录</block>
		</cu-custom>

		<u-sticky>
			<view style="padding: 20upx; background-color: white;">
				<u-search placeholder="姓名" :clearabled="true" :showAction="false" v-model="searchUserName"></u-search>
			</view>
			<view style="padding: 20upx; background-color: white;">
				<u-search placeholder="部门" :clearabled="true" :showAction="false" v-model="officeName"></u-search>
			</view>
			<view style="padding: 20upx; background-color: white;">
				<u-search placeholder="手机号" :clearabled="true" :showAction="false" v-model="mobile"></u-search>
			</view>
		</u-sticky>

		<view>
			<u-index-list :indexList="indexList">
				<template v-for="(item, index) in list">
					<!-- #ifdef APP-NVUE -->
					<u-index-anchor :text="list[index].letter" :key="index"></u-index-anchor>
					<!-- #endif -->
					<u-index-item :key="index">
						<!-- #ifndef APP-NVUE -->
						<u-index-anchor :text="list[index].letter"></u-index-anchor>
						<!-- #endif -->
						<view class="list" v-for="(user, index1) in list[index].data" :key="index1">
							<!-- 检查user.name是否不等于"管理员" -->
							<view class="list__item" v-if="user.name !== '管理员'">
								<u-avatar shape="square" size="35" icon="account-fill" fontSize="26"
									randomBgColor></u-avatar>
								<!-- <view class="cu-avatar round " :style="'background-image:url('+(user.photo?user.photo:'/h5/static/user/flat-avatar.png')+');'"></view> -->
								<text class="list__item__user-name">{{ user.name }}</text>
								<!-- 新增的展示其他信息的元素 -->
								<!-- 使用条件渲染检查 user.officeDTO.name 是否为 null -->
								<text class="list__item__additional-info" v-if="user.officeDTO">{{ user.officeDTO.name
								}}</text>
								<!-- 新的电话号码信息 -->
								<text class="list__item__phone-number">{{ user.mobile }}</text>
							</view>
							<u-line v-if="user.name !== '管理员'"></u-line>
						</view>
					</u-index-item>
				</template>
				<view style="font-size: 15px; color: gray; text-align: center; margin-top: 15px;">共{{ total }}位好友</view>
			</u-index-list>
			<u-gap height="100" bgColor="#fff"></u-gap>
		</view>
	</view>
</template>

<script>
import userService from '@/api/sys/userService'
export default {
	data() {
		return {
			indexList: [],
			userList: [],
			total: 0,
			searchUserName: '',
			officeName: '',
			mobile: ''
		}
	},
	created() {
		let params = { current: 1, size: 10000, tenantDTO: {} }
		if (this.userInfo.tenantDTO.id == "10009") {
			params.tenantDTO.id = this.userInfo.tenantDTO.id
		}

		userService.list(params).then((data) => {
			this.userList = data.records
			this.total = data.total
		}).catch((e) => {
			throw e
		})
	},
	computed: {
		userInfo() {
			return this.$store.state.user.userInfo
		},
		list() {
			let resultList = this.userList.filter((item) => {
				if (item.name.indexOf(this.searchUserName) >= 0) {
					return true
				}
			})
			resultList = resultList.filter((item) => {
				if (item.officeDTO && item.officeDTO.name) {
					if (item.officeDTO.name.indexOf(this.officeName) >= 0) {
						return true
					}
				}
			})
			resultList = resultList.filter((item) => {
				if (item.mobile) {
					if (item.mobile.indexOf(this.mobile) >= 0) {
						return true
					}
				}
			})
			this.total = resultList.length
			return this.pySegSort(resultList)
		}
	},
	methods: {
		// 排序
		pySegSort(arr) {
			if (!String.prototype.localeCompare)
				return null;

			var letters = "0abcdefghjklmnopqrstwxyz".split('');
			var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split('');

			var segs = [];
			this.indexList = [];
			var curr;
			letters.forEach((item, i) => {
				curr = { letter: item, data: [] };
				arr.forEach((item2) => {
					if ((!zh[i - 1] || zh[i - 1].localeCompare(item2.name) <= 0) && item2.name.localeCompare(zh[i]) == -1) {
						curr.data.push(item2);
					}
				});
				if (curr.data.length) {
					segs.push(curr);
					this.indexList.push(curr.letter)
					curr.data.sort((a, b) => {
						return a.name.localeCompare(b.name);
					});
				}
			});
			return segs;
		}
	}
}
</script>

<style lang="scss">
.list {

	&__item {
		@include flex;
		padding: 6px 12px;
		align-items: center;

		&__avatar {
			height: 35px;
			width: 35px;
			border-radius: 3px;
		}

		&__user-name {
			font-size: 16px;
			margin-left: 10px;
			color: $u-main-color;
		}
	}

	&__footer {
		color: $u-tips-color;
		font-size: 14px;
		text-align: center;
		margin: 15px 0;
	}
}

.list__item__additional-info {
	position: relative;
	top: 10px;
	/* Adjust as needed */
	left: 15px;
	/* Adjust as needed */
	font-size: 12px;
	/* Adjust the font size as needed */
	color: #999;
	/* Adjust the color as needed */
}

.list__item__phone-number {
	position: relative;
	top: 10px;
	/* Adjust as needed */
	margin-left: 20px;
	/* 根据需要调整间距 */
	font-size: 12px;
	/* 根据需要调整字体大小 */
	color: #999;
	/* 根据需要调整颜色 */
}
</style>