logpm/pagesUser/pages/AddressBook/AddressBook.vue

<template>
	<BasicContainer ref="basicContainer" :option="option">
		<template #head>
			<view class="header_container align-center">
				<view class="flex1 mr20">
					<MyInput v-model="details.form.searchText" placeholder="请输入" @remove="handleSearch" clearable />
				</view>

				<view class="searchBtn flex-c-c" hover-class="clickClass" @click="handleSearch">
					<u-icon name="search" color="#fff" size="40" />
				</view>
			</view>
		</template>

		<template #body>
			<view class="main">

				<block v-for="item in details.data">
					<view :class="{row: true, 'align-center': true, isHide: item.isHide}"
						@click="()=> handleShowDetail(item)">
						<view class="flex1">
							{{item.name}}
						</view>

						<view class="align-center">
							<view class="mr20 phone">
								{{item.mobile || '暂未维护'}}
							</view>

							<view class="phone_container">
								<!-- 拨打 -->
								<u-icon name="phone-fill" size="40" color="#fff"></u-icon>
							</view>
						</view>
					</view>
				</block>
			</view>
		</template>
	</BasicContainer>

	<PopUp ref="DetailPopUp">
		<view class="flex-c-sb">
			<!-- 占位 -->
			<view style="width: 10px;height: 10px;"></view>
			<view>详情</view>
			<view @click="handleClosePopUp">
				<u-icon name="close" size="40"></u-icon>
			</view>
		</view>

		<view class="details_container">
			<view class="details_title text-center">
				{{details.detailInfo.name}}
			</view>

			<view class="details_content">
				<view class="">
					{{details.detailInfo.deptNames}}
				</view>

				<view class="tip_content">
					<block v-for="item in details.detailInfo.postNamesArr">
						<view class="tip">{{item}}</view>
					</block>
				</view>
			</view>

			<view class="flex-c-sb" @click="handlePhone">
				<view class="phone">
					{{details.detailInfo.mobile}}
				</view>

				<view class="phone_container">
					<!-- 拨打 -->
					<u-icon name="phone-fill" size="40" color="#fff"></u-icon>
				</view>
			</view>
		</view>
	</PopUp>
</template>

<script lang="ts" setup>
	import {
		onShow,
		onLoad,
		onHide,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import { reactive, ref, toRefs } from 'vue';
	import { getContactsList } from '@/api/user';
	import utils from '@/utils/utils.js';

	const DetailPopUp = ref()

	const option = {
		title: '通讯录',
		haveData: true,
		pullDownRefreshInitPage() {

		},
		reachBottomInitPage() {
		},
		haveReachBottom: false,
		isFixed: true
	}

	const details = reactive({
		form: {
			searchText: ''
		},
		data: [],
		detailInfo: {}
	})


	const initPage = async () => {
		const res = await getContactsList({})
		const { code, data } = res
		if (code !== 200) return

		details.data = data

		for (let i = 0; i < details.data.length; i++) {
			details.data[i].isHide = false
		}
	}

	initPage()

	const handlePhone = (item) => {
		if (!details.detailInfo.mobile) return uni.showToast({ title: '系统暂无该用户电话', icon: 'none' })

		console.log('details.detailInfo :>> ', details.detailInfo);
		uni.makePhoneCall({
			phoneNumber: details.detailInfo.mobile,
			success() {
				console.log('111 :>> ', 111);
			},
			fail() {
				console.log('222 :>> ', 222);
			}, complete() {
				console.log('333 :>> ', 333);
			}
		})
	}

	const handleShowDetail = (item) => {
		console.log('DetailPopUp :>> ', DetailPopUp);
		details.detailInfo = { ...item }

		details.detailInfo.postNamesArr = utils.getObjType(details.detailInfo.postNames) === 'string' && details.detailInfo.postNames ? details.detailInfo.postNames.split(',') : []

		DetailPopUp.value.setDetails({
			/**
			 * 是否显示弹框
			 */
			showPopUp: true,
			isShowClose: false,
			isShowButton: false,
			/**
			 * 标题
			 */
			title: '',
		})
	}

	const handleClosePopUp = () => {
		DetailPopUp.value.setDetails({ showPopUp: false })
	}

	const handleSearch = () => {
		const _rep = details.form.searchText && new RegExp('^' + details.form.searchText)

		for (let i = 0; i < details.data.length; i++) {
			const item = details.data[i]
			item.isHide = details.form.searchText ? !_rep.test(item.name) : false
			console.log('item.isHide :>> ', item.isHide);
		}
	}
</script>

<style lang="scss" scoped>
	.header_container {
		$height: 2.3rem;
		padding: 20upx;
		background-color: #fff;
		height: fit-content;
		width: 100vw;
		box-sizing: border-box;

		:deep(.input_container) {
			height: $height;
			border: 4upx solid #ccc;
			// box-shadow: 0 0 20upx #ccc;

			input {
				padding: 0 30upx;
			}
		}

		.searchBtn {
			background-color: var(--subjectColor);
			height: $height;
			text-align: center;
			padding: 0 50upx;
			border-radius: 10upx;
			transition: all 0.3s;
		}
	}

	.main {
		margin: 20upx;
		padding: 0 20upx;
		background-color: #fff;
		// padding: 20upx;
		border-radius: 10upx;

		.row {
			padding: 20upx 0;
			border-bottom: 2upx solid #eee;
			line-height: 1.5rem;
			overflow: hidden;
			transition: all 0.3s;
			// height: 1.5rem;

			&::before {
				content: '';
				width: 6upx;
				height: 1.5rem;
				background-color: var(--primaryColor);
				margin-right: 20upx;
				border-radius: 10upx;
			}

			&.isHide {
				display: none;
			}

			.phone {
				color: #888;
				font-size: 0.9rem;
			}
		}


	}

	.phone_container {
		$size: 56upx;
		width: $size;
		height: $size;
		background-color: var(--primaryColor);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.detailRow {
		padding-left: 40upx;
		font-size: 0.9rem;

		.title {
			color: #888;
		}
	}

	.details_container {
		padding: 32upx 20upx;
		background-color: #fdf9f4;
		margin-top: 28upx;
		border-radius: 16upx;
		margin-bottom: 32upx;

		.details_title {
			font-size: 1.2rem;
			font-weight: bold;
			margin-bottom: 32upx;
		}

		.details_content {
			$border: 2upx solid #eee;
			border-bottom: $border;
			border-top: $border;
			padding: 32upx 0;
			margin-bottom: 32upx;

			.tip_content {
				display: flex;
				flex-wrap: wrap;
				margin-top: 20upx;

				.tip {
					padding: 8upx 20upx;
					background-color: #f8eddf;
					color: var(--subjectColor);
					margin-right: 10upx;
					margin-bottom: 0;
					border-radius: 10upx;
				}
			}
		}


		.phone {
			font-size: 1.2rem;
			font-weight: bold;
		}
	}
</style>