Phone-APP/pages/add/add.vue

<!-- 
添加联系人
 
 fxl 24.08.14 
 
 美化界面
 张甜甜
 添加了触发联系人更新事件确保拨号页面联系人匹配列表实时更新。  uni.$emit('contactsUpdated');
 24.9.8
 -->

<template style="">
  <view class="contact-page">
    <view class="contact-form" style="font-size: 50px;">
	  
      <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="number" v-model="phone.number" placeholder="请输入手机号" 
		    pattern="[0-9]*" 
			@input="preventNonNumeric(index, $event)"/>
          <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-right: 13px;"></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 Hint from '@/components/hint.vue'
export default {
  data() {
    return {
      contact: {
        name: '', // 联系人备注
        phones: [
          { number: '' } // 手机号数组，初始化一个空对象
        ]
      }
    };
  },
  components: {
	Hint
  },
  methods: {
	showHint() {
	  const toast = this.$refs.Hint
	  toast.title = '请填写完整的联系人信息';
	  toast.icon = 'none';
	  toast.show();
	},
	preventNonNumeric(index, event) {
	    const value = event.detail.value;
	    // 保留数字，不允许非数字字符
	    const numericValue = value.replace(/\D/g, '');
	    if (numericValue !== value) {
	      // 如果用户输入了非数字字符，直接阻止更新输入框的值
	      this.contact.phones[index].number = numericValue;
	    }
	  },
    addPhone() {
      // 添加新的手机号输入框
      this.contact.phones.push({ number: '' });
    },
    removePhone(index) {
      // 移除指定的手机号输入框
      this.contact.phones.splice(index, 1);
    },
    saveContact() {
		uni.navigateTo({
		  url: '/pages/index/index' // 返回主页
		});
        var that = this;
		if (that.contact.phones[0].number.length === 0) {
            this.showHint()
            return;
          }
          // 确保plusready事件触发后再调用API
          if (plus.os.name !== 'Android') {
            uni.showToast({
              title: '非Android平台无法访问通讯录',
              icon: 'none'
            });
            return;
          }
          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: '联系人保存成功'
                });
				
				// 触发事件，通知拨号页面刷新联系人
			    uni.$emit('contactsUpdated');
				
				setTimeout(()=>{
					uni.navigateBack({
					  delta: 1 // 返回上一页
					});
				},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: 20px;
  margin: 0px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f0efef;
}

.contact-form {
  margin-top: 20px;
}

.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>