Phone-APP/pages/edit/edit.vue

<!-- 
编辑联系人信息，添加联系人名称、电话号码，并保存。删除联系人。修改备注传“NULL”的情况
 张志宏 调整删除提示框，使用自定义组件
24.9.6
完善了删除联系人时若姓名和号码已修改则无法删除的bug，完善了修改联系人信息后是新增联系人且原有信息不会删除的bug
fxl
24.9.2
张甜甜
添加了触发联系人更新事件确保拨号页面联系人匹配列表实时更新。  uni.$emit('contactsUpdated');
24.9.8
 
 -->

<template style="">
  <view class="contact-page">
    <view class="contact-form" style="font-size: 50px;">
	  <view class="name-delete">
	  	 <p class="p-contact-name">联系人</p>
		 <image src="../../static/pics/contact-delete.png" mode="" class="delete-picture" @click="showTipBar()"></image>
	  </view>
	   <custom-modal
	        :visible="showModal"
	        title="确认删除"
	        content="你确定要删除这个联系人吗？"
	        confirmText="删除"
	        cancelText="取消"
	        @confirm="deleteContact()"
	        @cancel="handCancel()"
	        @update:visible="showModal = $event"
	      />
      <view class="new-group">
        <input type="text" v-model="contact.name" placeholder="请输入备注" />
      </view>
      <view class="phone-list">
        <view class="new-group" v-for="(phone, index) in contact.phones" :key="index">
          <input type="text" v-model="phone.number" placeholder="请输入手机号" />
          <view class="remove-phone" @click="removePhone(index)" v-if="contact.phones.length > 1">
			<image src="../../static/pics/de.png" style="height: 100rpx;width: 100rpx;align-items: center;justify-content: center; margin: 5px;"></image>
		  </view>
        </view>
      </view>
      <view class="add-phone">
        <button @click="addPhone" style="font-size: 50rpx;background-color: white;">添加手机号</button>
      </view>
	  <view class="saveOut">
		  <view class="out">
		  	<button @click="gotoindex()" style="font-size: 50rpx;background-color: white;">退出</button>
		  </view>
		  <view class="save-contact">
			<button @click="saveContact()" style="background-color: #ecfff3;">保存</button>
		  </view>
	  </view>
	  
    </view>
  </view>
</template>

<script>
import CustomModal from '@/components/customModal.vue';

export default {
  components:{
	CustomModal	
  },
  data() {
    return {
      contact: {
        name: '', // 联系人备注
        phones: [
          { number: '' } // 手机号数组，初始化一个空对象
        ]
      },
	  oldContact:{
        name: '', // 联系人备注
        phones: [
          { number: '' } // 手机号数组，初始化一个空对象
        ]
      },
	  showModal:false,
    };
  },
  onLoad(options) {
    console.error('传输的内容',options);
    this.contact.name=decodeURIComponent(options.name);
    if(this.contact.name=='null'){
  	  this.contact.name=null
    }
	this.oldContact.phones=JSON.parse(decodeURIComponent(options.phones));
    this.contact.phones=JSON.parse(decodeURIComponent(options.phones));
	//保存传入数据，使得删除时可以准确查找
	this.oldContact.name=decodeURIComponent(options.name);
	if(this.oldContact.name=='null'){
	  this.oldContact.name=null
	}
	
	
  },
  methods: {
	//显示删除提示框
	showTipBar(){
		this.showModal=true;
	},
	//取消删除
	handCancel(){
		this.showModal=false
		uni.showToast({
			title:'已取消删除'
		})
	},
	gotoindex(){
		uni.navigateBack({
		  delta: 2 // 返回上一页
		});
	},
    addPhone() {
      // 添加新的手机号输入框
      this.contact.phones.push({ number: '' });
    },
    removePhone(index) {
      // 移除指定的手机号输入框
      this.contact.phones.splice(index, 1);
    },
	deleteContact() {
	    this.showModal = false;
	    if (plus.os.name !== 'Android') {
	        uni.showToast({
	            title: '非Android平台无法访问通讯录',
	            icon: 'none'
	        });
	        return;
	    }
	
	    console.log("old1元数据", this.oldContact);
	
	    // 直接执行删除操作
	    plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, addressbook => {
	        // 根据联系人名称和电话号码查找联系人
	        addressbook.find(
	            ["displayName", "phoneNumbers"],
	            contacts => {
	                if (contacts.length > 0) {
	                    let contactFound = false;
	                    // 遍历找到的联系人列表
	                    contacts.forEach(contact => {
	                        console.log("contact", contact);
	                        console.log("old元数据", this.oldContact);
	                        console.log("old号码元数据", this.oldContact.phones[0].number);
	                        // 检查联系人名称是否匹配
	                        if (contact.displayName === this.oldContact.name) {
	                            // 遍历联系人的电话号码，确保至少有一个号码匹配
	                            contact.phoneNumbers.forEach(phone => {
	                                if (phone.value === this.oldContact.phones[0].number||this.oldContact.phones.number==="") { // 使用第一个电话号码进行匹配
	                                    contactFound = true;
	                                    contact.remove(() => {
	                                        uni.showToast({
	                                            title: '联系人删除成功'
	                                        });
										    uni.$emit('contactsUpdated');
	                                        setTimeout(() => {
	                                            uni.navigateBack({
	                                                delta: 2 // 返回上两页
	                                            });
	                                        }, 800);
	                                    }, e => {
	                                        uni.showToast({
	                                            title: '删除联系人失败',
	                                            icon: 'none'
	                                        });
	                                        console.error('删除联系人失败：', e.message);
	                                    });
	                                }
	                            });
	                        }
	                    });
	                    if (!contactFound) {
	                        uni.showToast({
	                            title: '未找到匹配的联系人',
	                            icon: 'none'
	                        });
	                    }
	                } else {
	                    uni.showToast({
	                        title: '未找到联系人',
	                        icon: 'none'
	                    });
	                }
	            },
	            e => {
	                uni.showToast({
	                    title: '查找联系人失败',
	                    icon: 'none'
	                });
	                console.error('查找联系人失败：', e.message);
	            },
	            { filter: this.contact.name } // 初步过滤条件为联系人名称
	        );
	    }, e => {
	        uni.showToast({
	            title: '获取通讯录失败',
	            icon: 'none'
	        });
	        console.error("获取通讯录失败", e.message);
	    });
	},
    addDe(){
		plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, addressbook => {
		    // 根据联系人名称和电话号码查找联系人
		    addressbook.find(
		        ["displayName", "phoneNumbers"],
		        contacts => {
		            if (contacts.length > 0) {
		                let contactFound = false;
		                // 遍历找到的联系人列表
		                contacts.forEach(contact => {
		                    // 检查联系人名称是否匹配
		                    if (contact.displayName === this.oldContact.name) {
		                        // 遍历联系人的电话号码，确保至少有一个号码匹配
		                        contact.phoneNumbers.forEach(phone => {
		                            if (phone.value === this.oldContact.phones[0].number) { // 使用第一个电话号码进行匹配
		                                contactFound = true;
		                                contact.remove();
		                            }
		                        });
		                    }
		                });
		                if (!contactFound) {
		                    uni.showToast({
		                        title: '未找到匹配的联系人',
		                        icon: 'none'
		                    });
		                }
		            } else {
		                uni.showToast({
		                    title: '未找到联系人',
		                    icon: 'none'
		                });
		            }
		        },
		        e => {
		            uni.showToast({
		                title: '查找联系人失败',
		                icon: 'none'
		            });
		            console.error('查找联系人失败：', e.message);
		        },
		        { filter: this.contact.name } // 初步过滤条件为联系人名称
		    );
		}, e => {
		    uni.showToast({
		        title: '获取通讯录失败',
		        icon: 'none'
		    });
		    console.error("获取通讯录失败", e.message);
		});
	},
	saveContact() {
		uni.navigateTo({
		  url: '/pages/index/index' // 返回主页
		});
		var that = this;
		if (this.contact.phones.length === 0) {
			uni.showToast({
			  title: '请填写完整的联系人信息',
			  icon: 'none'
			});
			return;
		  }
		  // 确保plusready事件触发后再调用API
		  if (plus.os.name !== 'Android') {
			uni.showToast({
			  title: '非Android平台无法访问通讯录',
			  icon: 'none'
			});
			return;
		  }
		  this.addDe()
		  plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, addressbook => {
			// 创建新的联系人
			const newContact = addressbook.create();
			newContact.displayName = this.contact.name;
	
			// 过滤并映射电话号码
			const validPhones = this.contact.phones
			  .filter(phone => phone.number.trim() !== '')
			  .map(phone => ({
				type: "手机",
				value: phone.number,
				preferred: this.contact.phones.length === 1 || phone.number === this.contact.phones[0].number
			  }));
	
			// 保存所有有效的电话号码
			newContact.phoneNumbers = validPhones;
			newContact.save(() => {
				uni.showToast({
					title: '联系人保存成功'
				});
				setTimeout(()=>{
					uni.navigateBack({
					  delta: 2 // 返回上一页
					});
				},800);
			}, e => {
			  uni.showToast({
				title: '保存联系人失败',
				icon: 'none'
			  });
			  console.error('保存联系人失败：', e.message);
			});
		  }, e => {
			uni.showToast({
			  title: '获取通讯录失败',
			  icon: 'none'
			});
			console.error('获取通讯录失败：', e.message);
		  });
		},
		resetContact() {
		  // 重置联系人信息
		  this.newContact = { name: '', phones: [{ number: '' }] };
		}
       
    }
}
</script>

<style>
button{
	font-size: 50rpx;
    border: 0.5px solid #aeaeae;
	border-radius: 10px;
}
	
.contact-page {
  padding: 10px 20px 20px 20px;
  margin: 0px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f0efef;
}

.title{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	padding-top: 8%;
	font-size: 60rpx;
	font-weight: 650;
	background-color: #fafafa;
	box-shadow: 0 2rpx 3rpx 3rpx rgba(248, 248, 248, 0.2);
}

.name-delete{
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* margin-top: 2%; */
	margin-bottom: 10rpx;
	/* background-color: aqua; */
}

.p-contact-name{
	margin-left: 4%;
	font-size: 80rpx;
	color: #aeaeae;
}

.delete-picture{
	width: 100rpx;
	height: 100rpx;
	margin-right: 4%;
}
.contact-form {
  margin-top: 10px;
}

.phone-list {
  border-bottom: 1px solid #aeaeae;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.add-phone {
  margin-top: 20px;
}

.add-phone button {
  padding: 10px;
  font-size: 16px;
  margin-bottom: 30rpx;
}

.new-group {
	background-color: white;
	margin-bottom: 80rpx;
    height: 150rpx;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    border: 1px solid #aeaeae;
    border-radius: 10px;
}

.new-group input {
  /* 根据需要调整输入框大小 */
  width: 100%; /* 例如90% */
  height: 85%; /* 例如80% */
  font-size: 50rpx;
  padding: 10px; /* 根据需要调整内边距 */
}
.remove-phone {
	height: 100%;
	width: 20%;
    margin-left: 10px;
    color: red;
	align-items: center;
	justify-content: center;
    cursor: pointer;
	display: flex;
}

.saveOut{
    margin-top: auto; 
	margin-top: 50rpx;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.out{
	width: 200rpx;
	height: 300rpx;
}

.save-contact {
	width: 200rpx;
	height: 300rpx;
}


</style>