Phone-APP/pages/search/search.vue

<template>
  <view class="content">
	<view v-if="" class="navbar" @click="showBar()">
		<image @click="showBar()" class="icon" src="../../static/pics/search.png"></image>
		<image @click="navigateToPage('add')" class="icon" src="../../static/pics/add.png"></image>
		<image @click="navigateToPage('setting')" class="icon" src="../../static/pics/setting.png"></image>
	</view>
	<view class="navbar" v-show="searchActive">
		<view class="uni-column">
			<view class="search-input">
				<input type="text" v-model="searchText" placeholder="输入号码或名字" @input="filterContacts"/>
			</view>
			<view class="search-img" @click="search()" >
				<image src="../../static/pics/search.png"></image>
			</view>
		</view>
	</view>
    <view  class="text-area">
		<view v-if="filteredContacts.length" v-for="(item, id) in filteredContacts" :key="id">
			<view class="name-btn">
					<view class="con-mes">
						<text v-if="!item.displayName">{{item.phoneNumbers[0].value}}</text>
						<text v-else>{{ item.displayName }}</text>
					</view>
					<view class="btn" @click="CallPhone(item.phoneNumbers[0].value)">
						<image @click="CallPhone(item.phoneNumbers[0].value)" class="Call" src="../../static/pics/call-out.png"></image>
					</view>
			</view>
		</view>
		<view v-else class="notFind">
			该号码或联系人不存在
		</view>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		searchText: '', // 用户输入的搜索文本
		list: [], // 原始联系人列表
		filteredContacts: [] ,// 过滤后的联系人列表
		f:[],

    }
  },
  mounted() {
	  // 运行后直接调用
  	this.ToGetMessage();
	/* this.ToGetHis(); */
  }, 
  methods: {
	    

	  //获取联系人信息
    ToGetMessage() {
		var that=this
		  	//获取通讯录对象
		plus.contacts.getAddressBook( plus.contacts.ADDRESSBOOK_PHONE, function( addressbook ) {
		  		addressbook.find(["displayName","phoneNumbers"],function(contacts){
		  			console.log(contacts);
		  			that.list = contacts;
					that.filteredContacts = that.list;
		  		}, function () {
		  			uni.showToast({
		  				title: '获取联系人失败',
		  				duration: 2000//在屏幕上显示的时间长度
		  			})
		  		},{multiple:true});//应该检索多个联系人
		}, function ( e ) {
		  		uni.showToast({
		  			title: '获取通讯录对象失败:' + e.message,
		  			duration: 2000
		  		})
		  	});
	}, 
	//拨打电话
	CallPhone(e){
		//调用HTML5 Plus框架提供的接口
		plus.device.dial(e,false);
	},
	filterContacts() {
		//实现模糊查找
	      const searchText = this.searchText.toLowerCase();
	      this.filteredContacts = this.list.filter(list => {
	        return (list.displayName || '').toLowerCase().includes(searchText) ||
	               list.phoneNumbers.some(phone => phone.value.toLowerCase().includes(searchText));
	      });
	    },
	search() {
	  // 可以在这里添加更复杂的搜索逻辑
	  this.filterContacts();
	}
	
}
}
</script>

<style>
	
.null{
	
}


/* 其他样式保持不变 */

.uni-column {
	width: 690rpx;
	height: 180rpx;
	border: 1px solid black; 
	margin-top: 18rpx;
	border-radius: 20rpx;
	font-size: 50rpx;
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 左右分布 */
  /* 其他样式保持不变 */
}

.search-input {
	width: 75%;
  /* 可以根据需要调整以下样式 */
  display: flex;
  align-items: center;
}

.search-img{
	width: 25%;
  /* 可以根据需要调整以下样式 */
  display: flex;
  border-left: 1px solid black;
  justify-content: center;
  align-items: center;
}

.search-input input {
  /* 根据需要调整输入框大小 */
  width: 90%; /* 例如90% */
  height: 80%; /* 例如80% */
  font-size: 50rpx;
  padding: 10px; /* 根据需要调整内边距 */
}

.search-img image {
  width: 50%; /* 例如30% */
  height: 50%; /* 保持与输入框一致的高度 */
  font-size: 50rpx;
}
	
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F7F7F7;
}

.con-mes{
	display: flex;
	align-items: center; 
	justify-content: center;
	width: 440rpx;
	height: 200rpx;
	border: none;
	background-color: white;
	border-radius: 20rpx 0rpx 0rpx 20rpx;
}

.name-btn{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 690rpx;
	height: 200rpx;
	border: 1px solid black; 
	margin-top: 18rpx;
	border-radius: 20rpx;
	font-size: 50rpx;
}

.text-area {
	height: 70%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 30%;
}



.btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 250rpx;
	height: 200rpx;
	background-color: #ecfff3;
	border-radius: 0rpx 20rpx 20rpx 0rpx;
}

.Call{
	width:100rpx;
	height: 100rpx;
	object-fit: contain; 
} 

.navbar {
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	background-color: #F8F8F8;
	height: 90px;
	position: fixed; /* 设置为固定定位 */
	top: 0; /* 与页面顶部的距离为0 */
	z-index: 999; 
}
.icon{
	justify-content: space-around;
	width: 100rpx;
	height: 100rpx;
}
</style>