uniapp 客户详情页面：添加/删除联系人

 客户列表页面向详情页传值，父组件传递值给子组件

//跳转到详情页并传递数值
uni.navigateTo({
	url:'./khDetail?id='+id+'&city='+cityname+'&pagerowsources=list'+'&isadd='+isa
})


//详情页onload获取值
//注意：传递的值为string类型，转为boolaen类型
if(e.isadd=='true'){
	this.isadd=true
}else if(e.isadd=='false'){
	this.isadd=false
}

<!--详情页父组件向子组件传值-->
<!--客户基本信息-->
<khCard :khInfo="khInfo" :cityName="cityname" :isSelect="true" :isadd="isadd"></khCard>

//子组件接收数据
props: {
	khInfo: {
		// type: Object,
		// default: () => {}
	},
	cityName:{
		
	},
	isSelect: {
		type: Boolean,
		default: false
	},
	isadd: {
		type:Boolean,
		default:false
	},
	index: {
		type: Number,
		default: 0
	}
},

【报错】Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "isadd"

【原因】通过props传递给子组件的数值（此处为isadd），不能在子组件内部修改props。 

  

//页面显示
<view class="txlimg"  @click="changtxl">
	<image v-if="isAdd" src="@/static/img/txldel.png" mode=""></image>
	<image v-else src="@/static/img/txladd.png" mode=""></image>
</view>

changtxl(){
	let name=this.khInfo.name
	let mobile=this.khInfo.mobile
	let that=this
	if(this.isAdd){
		uni.showModal({
			title:'提醒',
			content:'要从通讯录中删除此号码吗？',
			success:function(res){
				if(res.confirm){
					//调用删除联系函数
					that.txl_del()
				}else if(res.cancel){
					console.log('用户已取消。')
				}
			}
		})
	}else{
			// 未添加到通讯录，执行添加到通讯录操作
			plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, (addressbook) =>{
			// 向通讯录中添加联系人
			var contact = addressbook.create()
			contact.name = {givenName: name}
			contact.phoneNumbers  = [{type: '手机', value: mobile, preferred:true}]
			contact.save()
		})
		
		uni.showToast({
			title:'添加成功！'+this.isAdd
		})
		this.isAdd=true
	}
},
txl_del(){
	let name=this.khInfo.name
	let mobile=this.khInfo.mobile
	// 已添加到通讯录，执行删除操作
	plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, (addressbook) =>{
		var contact = addressbook.find([],function(res){
			for(let i=0;i<res.length;i++){//res1查询到的通讯录数组
				if(res[i].displayName.includes(name)){//查询特殊字段数据进行删除操作避免删除错误
					res[i].remove(function(res2){
						uni.showToast({
							title:'已删除'+this.isAdd
						})
					},function(res3){
						console.log(res3+"失败")
					})
				}
				
			}
		})
	})
	this.isAdd=false
}

下面是获取手机通讯录，将手机通讯录列表与客户列表匹配，判断客户是否已添加到通讯录 

getContacts: function() {//获取通话记录
	let list = []
	var that = this
	if (that.isGettxl) {
		that.isGettxl = false//控制是否获取，默认true，获取通讯录变为false
		//获取通讯录对象
		plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, function(addressbook) {
			addressbook.find(["displayName", "phoneNumbers"], function(contacts) {
				// uni.showToast({
				// 	title: '获取联系人成功',
				// 	duration: 2000
				// })
				// console.log(JSON.stringify(contacts))
				that.clist = contacts
				contacts.forEach((item) => {
					item.phoneNumbers.forEach((t, k) => {
						if (t.value != '') {
							let a = {
								"id": item.id,
								"displayName": item.displayName,
								"phoneNumbers": t.value
							}
							let index = that.contactslist.findIndex(item =>
								item.id == a.id)
							if (index == -1) {
								that.contactslist.push(a)
							} else {

							}
						}
					})
			})
				}, function() {
				uni.showToast({
					title: '获取联系人失败',
					duration: 2000
				})
			}, {
				multiple: true
			});
		}, function(e) {
			uni.showToast({
				title: '获取通讯录对象失败:' + e.message,
				duration: 2000
			})
		});
		//获取通讯录后清洗数据
		that.cleanContacts()
	}

},
cleanContacts: function() {
	//将通讯录数据与客户列表比较
	// 判断通讯录中的联系人、电话是否存在
	//contactslist:通讯录列表;mlist：客户列表;istxladd：记录添加到通讯录情况
	let a = this.contactslist
	let b = this.mlist
	let flag = true
	a.forEach((lxr) => {
		// console.log(lxr)
		//获取通讯录中姓名电话信息
		let name = lxr.displayName
		let phone = lxr.phoneNumbers.replace(/\s*/g, "");

		b.forEach((item) => {
			let list = item.mobile
			//判断该数据是否存在
			//isadd 默认false不存在
			//如果姓名想相同或者任一手机号相同为true存在
			let isadd = false
			let index = this.istxlAdd.findIndex((t) => t.id == item.id)

			if (name == item.name) {
				isadd = true
			}

			// 有多个电话号码
			for (var k = 0; k < list.length; k++) {
				let mobile = list[k]
				if (mobile == phone) {
					isadd = true
				}
			}

			//判断istalAdd中是否存在数据
			if (index > -1) {
				if (isadd == true) {
					this.istxlAdd[index] = {
						id: item.id,
						isadd: isadd
					}
				}
			} else {
				this.istxlAdd.push({
					id: item.id,
					isadd: isadd
				})
			}
		})
	})
},

 https://www.html5plus.org/doc/zh_cn/contacts.htmlhttps://www.html5plus.org/doc/zh_cn/contacts.html

【注意：this指向性问题】

使用uni.showModal回调函数改变isAdd的值会有冲突，所以又写了txl_del函数，在回调函数中调用，在uni.showModal回调函数中，如果直接使用this调用函数会报错。

 【解决方法】

let that = this；使用that