gwlz/jp-mobile/pages/addressbook/addressbook.vue

<template>
	<view class="main">
		<!-- #ifdef APP-PLUS -->
		<cu-custom bgColor="bg-blue_default">
			<block slot="content">通讯录</block>
		</cu-custom>
		<!-- #endif -->
		<view class=" text-center flex tab-custom" style="height: 45px;line-height: 45px;">
			<u-tabs :list="list" @click="changeParent" lineWidth="30" lineHeight="1" lineColor="#ffffff" :activeStyle="{
        color: '#ffffff',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
    }" :inactiveStyle="{
        color: '#fff',
        transform: 'scale(1)'
    }" itemStyle=" height: 34px;"></u-tabs>
		</view>
		<!-- <view class="tree">
			<ly-tree :tree-data="officeList" :props="props" node-key="id" :checkOnClickNode="true" :showRadio="false"
				:show-checkbox="false" :checkOnlyLeaf="false" ref="officeTree" />
		</view> -->
		<view>
			<u-cell-group class="cell_group__title" v-for="(item, index) in indexList" :key="index"
				:title="indexList[index].name">
				<u-cell class="book_info" v-for="user in getUser(indexList[index].id)">
					<view class="book_info_title" slot="title">
						{{user.name}}
					</view>
					<u-avatar v-if="user.photo!=''" slot="icon" shape="circle" size="40" :src="BASE_URL + user.photo"
						customStyle="margin: -3px 5px -3px 0"></u-avatar>
					<u-avatar v-else slot="icon" shape="circle" size="35" src="../../static/img/avatar.png"
						customStyle="margin: -3px 5px -3px 0"></u-avatar>
					<view v-if="user.mobile || user.phone" class="ellipsis-description text-gray" slot="label">
						{{user.mobile + '  ' + user.phone}}
					</view>
					<view v-if="user.mobile || user.phone" class="flex"  slot="value">
						<u-icon @click="toPhone(user)" size="30" style="margin-right: 10px;" name="../../static/img/icon_dh.png"></u-icon>
						<u-icon @click="copyPhone(user)" v-if="user.mobile || user.phone" size="30"
							name="../../static/img/icon_fz.png"></u-icon>
					</view>


				</u-cell>
			</u-cell-group>
		</view>
		<u-modal :show="show" title="选择号码" :showConfirmButton="false" :showCancelButton="true" @cancel="show = false">
			<view class="slot-content">
				<view v-for="(item,index) in phones" :key="index">
					<view @click="toPhone(item)" class="modal_content">{{item}}</view>
				</view>
			</view>
		</u-modal>
		<u-overlay :show="loading">
			<view class="warp">
				<view class="rect"><u-button plain loading loadingText="加载中"></u-button></view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import userService from '@/api/sys/userService'
	import officeService from "@/api/sys/officeService"
	import BASE_URL from '@/config.js'
	export default {
		data() {
			return {
				loading: true,
				show: false,
				indexList: [],
				officeList: [],
				userList: [],
				total: 0,
				searchUserName: '',
				list: [],
				phones: [],
			}
		},
		props: {
			props: {
				type: Object,
				default: () => {
					return {
						children: 'children',
						label: 'name'
					}
				}
			}
		},
		created() {
			officeService.treeData().then(data => {
				this.officeList = data
				this.list = this.officeList.filter((item) => {
					if (item.type == "1") {
						return true
					}
				})
				this.list.sort((a, b) => b.name.localeCompare(a.name) || b.name.localeCompare(a
					.name));
				userService.list({
					current: 1,
					size: 10000
				}).then((res) => {
					this.userList = res.records
					this.indexList = this.list[0].children
					this.total = res.total
					this.loading = false
				}).catch((e) => {
					throw e
				})
			})
		},
		methods: {
			// 切换部门
			changeParent(e) {
				this.indexList = e.children
			},
			// 获取用户
			getUser(id) {
				let b = this.userList.filter(item => item.officeDTO && item.officeDTO.id == id)
				return b
			},
			// 打电话
			toPhone(user) {
				if (user.mobile || user.phone) {
					if (user.mobile != '' && user.phone == '') {
						uni.makePhoneCall({
							phoneNumber: user.mobile //仅为示例
						});
					} else if (user.mobile == '' && user.phone != '') {
						uni.makePhoneCall({
							phoneNumber: user.phone //仅为示例
						});
					} else if (user.mobile != '' && user.phone != '') {
						this.phones = []
						this.phones.push(user.mobile)
						this.phones.push(user.phone)
						this.show = true
					}
				} else {
					this.show = false
					uni.makePhoneCall({
						phoneNumber: user //仅为示例
					});
				}

			},
			// 复制号码
			copyPhone(user) {
				uni.setClipboardData({
					data: user.phone + " " + user.mobile,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.book_info {
		background-color: #fefefe;

	}

	.book_info .cell_group__title span {
		// background-color: #ededed;
		font-size: 18px !important;
	}

	.book_info .ellipsis-description {
		font-size: 12px !important;
		margin-top: 10px;
	}

	.main .tab-custom {
		justify-content: center;
		align-items: center;
		background-color: #36a7f3;
	}

	.main .modal_content {
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #ededed;
		z-index: 10;
	}

	.book_info_title {
		color: #21b7fc;
	}

	.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;
		}
	}
</style>