Phone-APP/pages/tel/tel.vue

<!--本代码主要是拨号盘的功能用户可以实现按键拨打并且在拨号盘的后方有与用户拨号相匹配的联系人号码点击即可快速拨打。
内容：
1.匹配的联系人和通话记录列表，点击即可播出
2.显示号码输入框和删除按钮
3.数字键盘和拨打按钮区域 
4.点击切换按钮即可收起数字键盘展示与拨号相匹配的列表。
更新人：张甜甜   
最后更新时间：2024.9.23
更新内容：样式-->
<template>
  <view class="container">
       <!-- 匹配的联系人和通话记录列表 -->
          <view v-if="matchedItems.length > 0" class="matched-contacts">
            <view
              v-for="(item, index) in matchedItems"
              :key="index"
              class="contact-item"
              @touchstart="startPressTimer(item.number)"
              @touchend="clearPressTimer"
              @click="selectContact(item.number)"
            >
              <text class="contact-name">{{ item.name }}</text>
              <div class="contact-number" v-html="highlightMatch(item.number, displayPhoneNumber)"></div>
            </view>
          </view>


    <!-- 显示号码输入框和删除按钮 -->
    <view :class="['display', { 'display-bottom': !showDialPad }]">
      <text class="phone-number">
        {{ displayPhoneNumber }}
      </text>
      <image
        v-if="phoneNumber.length > 0"
        src="../../static/pics/delete.png"
        @touchstart="startDelete"
        @touchend="stopDelete"
        @click="deleteNumber"
        class="delete"
      ></image>
    </view>
    <!-- 数字键盘和拨打按钮区域 -->
    <view class="dial-pad" :style="{ zIndex: showDialPad ? '3' : '1' }">
      <view v-show="showDialPad" class="row" v-for="(row, index) in dialPad" :key="index">
        <button v-for="digit in row" :key="digit" @click="appendNumber(digit)" class="digit-button">
          {{ digit }}
        </button>
      </view>
    </view>
    <!-- 切换按钮和拨打按钮区域 -->
    <view class="bottom-buttons">
      <!-- 切换按钮 -->
      <view class="toggle-button">
        <button class="scale" @click="toggleDialPad">
          <image v-show="showDialPad" src="../../static/pics/down.png" class="ScaleIcon"></image>
          <image v-show="!showDialPad" src="../../static/pics/up.png" class="ScaleIcon"></image>
        </button>
      </view>

      <view class="action">
          <!-- 只显示一个拨打按钮 -->
          <button class="call-button single-sim" @click="callNumber(phoneNumber)">
            <image src="../../static/pics/call.png" class="CallIcon"></image>
          </button>
        </view>
	</view>
  </view>
</template>
<script>
	import pinyin from 'pinyin';
export default {
  data() {
    return {
	  simNumber: 0,
      phoneNumber: '', // 输入的电话号码
      showDialPad: true, // 控制是否显示数字键盘
      dialPad: [
        ['1', '2', '3'],
        ['4', '5', '6'],
        ['7', '8', '9'],
        ['*', '0', '#']
      ],
      contacts: [], // 存储联系人信息
      matchedItems: [], // 匹配的联系人和通话记录
      telephoneLog: [], // 存储通话记录
      pressTimer: null, // 计时器用于长按操作
      deleteInterval: null // 计时器用于删除操作
    };
  },
  mounted() {
    this.getContacts(); // 组件挂载时获取联系人数据
    this.handleGetCallLogs(); // 获取通话记录
  },
  computed: {
    displayPhoneNumber() {
      // 根据输入的电话号码长度显示部分号码或省略号
      if (this.phoneNumber.length <= 11) {
        const part1 = this.phoneNumber.slice(0, 3);
        const part2 = this.phoneNumber.slice(3, 7);
        const part3 = this.phoneNumber.slice(7, 11);
        return `${part1} ${part2} ${part3}`.trim(); // 按 "3 4 4" 格式显示号码
      } else {
        return `...${this.phoneNumber.slice(-11)}`; // 若号码过长，则显示最后11位，前面用省略号表示
      }
    }
  },
  watch: {
    phoneNumber(newValue) {
      this.matchContactsAndCallLogs(newValue); // 当电话号码变化时调用匹配方法
    }
  },
  onLoad() {
	// 初始化联系人列表
	this.getContacts();
    // 监听联系人更新事件
    uni.$on('contactsUpdated', () => {
    // 重新加载联系人
      this.getContacts();
    });
  },
  
  onUnload() {
    // 页面卸载时移除事件监听
    uni.$off('contactsUpdated');
  },
  methods: {
	
    startPressTimer(number) {
      this.pressTimer = setTimeout(() => {
        // 执行长按操作，例如显示操作菜单
        console.log('长按号码:', number);
        // 这里可以添加长按的具体操作
      }, 2000); // 设置长按时间
    },
    clearPressTimer() {
      if (this.pressTimer) {
        clearTimeout(this.pressTimer);
        this.pressTimer = null;
      }
    },
    startDelete(event) {
      if (!event) return;
      event.stopPropagation();
      if (this.phoneNumber.length === 0) {
        return;
      }
      if (this.deleteInterval) {
        clearInterval(this.deleteInterval);
      }
      this.deleteInterval = setInterval(() => {
        if (this.phoneNumber.length > 0) {
          this.deleteNumber();
        } else {
          clearInterval(this.deleteInterval);
        }
      }, 100);
    },
    stopDelete(event) {
      if (event) {
        event.stopPropagation();
      }
      if (this.deleteInterval) {
        clearInterval(this.deleteInterval);
        this.deleteInterval = null;
      }
    },
    deleteNumber() {
      if (this.phoneNumber.length > 0) {
        this.phoneNumber = this.phoneNumber.slice(0, -1);
      }
      if (this.phoneNumber.length === 0) {
        this.stopDelete();
      }
      console.log('Current phoneNumber:', this.phoneNumber);
    },
	  // 高亮匹配的文本部分
 highlightMatch(text, query) {
     if (!query) return text;
 
     // 格式化后的文本，带有空格，如 '136 2341 3568'
     const formattedText = this.formatPhoneNumber(text);
     // 移除查询字符串中的空格
     const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&').replace(/\s+/g, '');
     // 构建正则表达式，允许匹配时中间有任意数量的空格
     const regexQuery = escapedQuery.split('').map(char => `${char}\\s*`).join('');
     const regex = new RegExp(`(${regexQuery})`, 'gi');
     // 执行替换，保持原始文本的空格并高亮匹配部分
     const result = formattedText.replace(regex, (match) => `<span class="highlight">${match}</span>`);
     return result;
 },
    // 获取联系人并格式化
    getContacts() {
     let self = this;
         plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE, (addressbook) => {
           addressbook.find(['displayName', 'phoneNumbers'], (contacts) => {
             self.contacts = []; // 清空当前联系人列表
             contacts.forEach((contact) => {
               if (contact.phoneNumbers && contact.phoneNumbers.length > 0) {
                 contact.phoneNumbers.forEach(phone => {
                   let cleanNumber = phone.value.replace(/[^\d\s]/g, '');
                   self.contacts.push({
                     name: contact.displayName,
                     number: cleanNumber
                   });
                 });
               }
             });
          // 确保事件在获取到联系人数据后触发
          uni.$emit('contactsUpdated');
        }, (e) => {
          console.log("获取联系人失败: " + e.message);
        });
      }, (e) => {
        console.log("打开通讯录失败: " + e.message);
      });
    },

    handleGetCallLogs() {
		//获取历史记录联系人
        if (plus.android) {
          try {
            const MainActivity = plus.android.runtimeMainActivity();
            const CallLogHelper = plus.android.importClass("com.example.mylibrary.CallLogHelper");
    
            if (CallLogHelper) {
              const logsJson = CallLogHelper.getCallLogs(MainActivity);
              console.log("Raw logsJson:", logsJson);
    
              const logsArray = JSON.parse(logsJson);
              console.log("Parsed logsArray:", logsArray);
    
              if (Array.isArray(logsArray)) {
                this.telephoneLog = logsArray;
              } else {
                console.error("解析后的数据不是数组");
              }
            } else {
              console.error("CallLogHelper 类未加载");
            }
          } catch (e) {
            console.error("获取通话记录失败:", e);
          }
        } else {
          console.error("Android 环境未准备好");
        }
      },
    appendNumber(digit) {
      if (this.phoneNumber.length >= 14) {
        return;
      }
      this.phoneNumber += digit;
    },
   getInitials(str) {
        const initialsArray = pinyin(str, {
          style: pinyin.STYLE_FIRST_LETTER
        });
        const firstLettersOnly = initialsArray.map(initial => initial[0]);
        return firstLettersOnly.join('');
      },
  // 匹配联系人
    matchContacts(query) {
      if (!this.contacts || this.contacts.length === 0) {
        return [];
      }
      const cleanQuery = query.replace(/\s+/g, '');
      let matchedContacts = [];
      this.contacts.forEach(contact => {
        const cleanNumber = contact.number.replace(/\s+/g, '');
        if (cleanNumber.includes(cleanQuery)) {
          matchedContacts.push({
            ...contact,
            number: cleanNumber
          });
        } else if (contact.notes) {
          contact.notes.forEach(note => {
            if (note.includes(cleanQuery)) {
              matchedContacts.push({
                ...contact,
                number: cleanNumber
              });
            }
          });
        }
      });
      // 按备注的第一个字的拼音首字母进行排序
      matchedContacts.sort((a, b) => {
        const noteA = a.notes ? a.notes[0] : '';
        const noteB = b.notes ? b.notes[0] : '';
        const initialsA = this.getInitials(noteA);
        const initialsB = this.getInitials(noteB);
        return initialsA.localeCompare(initialsB);
      });
      return matchedContacts;
    },
    // 匹配通话记录
    matchCallLogs(query) {
      // 如果 this.telephoneLog 未定义或为空，返回空数组
      if (!this.telephoneLog || this.telephoneLog.length === 0) {
        console.log('call logs is null');
        return [];
      }
      
      const cleanQuery = query.replace(/\s+/g, '');
      return this.telephoneLog.filter(log => {
        const cleanNumber = log.number.replace(/\s+/g, '');
        return cleanNumber.includes(cleanQuery);
      }).map(log => ({
        ...log,
        number: log.number.replace(/\s+/g, '')
      }));
    },
  
    // 匹配联系人和通话记录
    matchContactsAndCallLogs(query) {
      if (query.length === 0) {
        this.matchedItems = [];
        return;
      }
      
      const cleanQuery = query.replace(/\s+/g, '');
      
      const matchedContacts = this.matchContacts(cleanQuery);
      const matchedCallLogs = this.matchCallLogs(cleanQuery);
      
      console.log('Query:', cleanQuery);
      console.log('Matched Contacts:', matchedContacts);
      console.log('Matched Call Logs:', matchedCallLogs);
      
      const uniqueItems = new Map();
      
      // 先插入联系人信息
      matchedContacts.forEach(contact => {
        uniqueItems.set(contact.number, contact);
      });
      
      // 再插入通话记录，只有在号码未被匹配到联系人时才插入
      matchedCallLogs.forEach(log => {
        if (!uniqueItems.has(log.number)) {
          // 如果通话记录中的号码没有匹配到联系人，则标记为未知联系人
          uniqueItems.set(log.number, {
            name: '陌生号',
            number: log.number
          });
        }
      });
      
      // 获取所有条目并进行排序
      let items = Array.from(uniqueItems.values());
      
      // 将“陌生号”条目分开
      const unknownItems = items.filter(item => item.name === '陌生号');
      const knownItems = items.filter(item => item.name !== '陌生号');
      
      // 按拼音首字母排序已知条目
      knownItems.sort((a, b) => {
        const nameA = a.name || '';
        const nameB = b.name || '';
        const initialsA = this.getInitials(nameA);
        const initialsB = this.getInitials(nameB);
        return initialsA.localeCompare(initialsB);
      });
      
      // 合并已知条目和“陌生号”条目
      this.matchedItems = knownItems.concat(unknownItems);
      
      console.log('Final Matched Items:', this.matchedItems);
    },
   

    selectContact(number) {
      this.phoneNumber = number;
      this.matchedItems = [];
      
      // 显示号码后，延迟执行重置操作
      setTimeout(() => {
        this.callNumber(number);
      }, 500); // 延迟 500 毫秒后拨号并重置
    },
    callNumber(number) {
      if (!number || number.length === 0) {
        uni.showToast({
          title: '请输入电话号码',
          icon: 'none'
        });
        return;
      }
        // 在拨号前更新通话记录
        this.handleGetCallLogs();
        // this.getContacts();
        // 拨打电话
        plus.device.dial(number, false);
		// 拨打电话后重置拨号页面状态
		this.resetDialPad();
      },
    toggleDialPad() {
      this.showDialPad = !this.showDialPad;
    },
	// 重置拨号页面状态的方法
		  resetDialPad() {
		    this.phoneNumber = ''; // 清空输入的电话号码
		    this.matchedItems = []; // 清空匹配的联系人和通话记录
		    this.showDialPad = true; // 确保数字键盘显示
		},

    formatPhoneNumber(number) {
      const cleanedNumber = number.replace(/[^\d]/g, '');
      if (cleanedNumber.length === 11) {
        return cleanedNumber.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1 $2 $3');
      } else if (cleanedNumber.length > 7) {
        return cleanedNumber.replace(/^(\d{3})(\d{4})(\d+)$/, '$1 $2 $3');
      } else {
        return cleanedNumber;
      }
    }
  }
};
</script>
	  
<style>
.container {
  /* 整体容器，使用 flex 布局，垂直排列子元素并居中，容器高度占满整个视口，背景色为浅灰色 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
  background-color: #f7f7f7;
  padding-top: 50px; 
  overflow: hidden;
}

.display, .display-bottom {
  /* 显示号码的输入框，宽度占满父容器，高度 80px，背景色为白色，带有灰色边框 */
  width: 100%;
  height: 80px;
  background-color: white;
  border: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: space-between; 
  padding:0 30px 0 10px; /* 调整左侧 padding，增加右侧 padding */
  margin-bottom: 0; 
  transition: all 0.2s; 
  position: fixed; 
  z-index: 3;
}

.display {
  /* 控制输入框初始显示位置 */
  bottom: 420px;
}

.display-bottom {
  /* 切换后，输入框移动到更低位置 */
  bottom: 100px;
  z-index: 4;
}

.phone-number {
  /* 电话号码文本的样式，字体大小为 46px */
  font-size: 40px;
  transform: translateX(20px); 
}

.delete {
  /* 删除按钮的样式，指定按钮的宽度和高度 */
  height: 100rpx;
  width: 80rpx;
  margin-left: -10rpx;
}

.dial-pad {
  /* 数字键盘区域的样式，宽度占满父容器，背景色为浅灰色，固定定位，覆盖在容器底部 */
  width: 100%;
  background-color: #f7f7f7;
  padding-bottom: 0;
  position: fixed; 
  bottom: 100px; 
  left: 0;
  right: 0; 
  z-index: 3;
}

.row {
  /* 数字键盘每一行的样式，使用 flex 布局，使数字按钮在行内均匀分布 */
  display: flex;
  justify-content: space-around; 
  transition: all 0.3s;
}

.digit-button {
  /* 数字按钮的样式 */
  width: 33%;
  height: 80px;
  background-color: #ecfff3;
  border-radius: 0; /* 去掉圆角 */
  color: black;
  font-size: 50px;
  border: 0px solid #d0dddd; /* 边框更细更浅 */
  display: flex;
  align-items: center;
  justify-content: center; 
  z-index: 3;
}

.toggle-button {
  /* 切换按钮的样式，宽度占 30%，固定在底部，高度为 100px，靠右对齐 */
  width: 33.3%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s; 
  position: fixed; 
  bottom: 0px; 
  right: 0; /* 右对齐 */
  z-index: 4;
  background-color: #ecfff3;
}


.action {
  display: flex;
  position: fixed;
  bottom: 0;
  width: 66.7%; /* 确保整个区域占满屏幕宽度 */
  left: 0;
  padding: 0;
  z-index: 4;
}

.CallIcon {
  /* 拨打图标的样式，指定图标的宽度和高度 */
  width: 60px;
  height: 60px;
  z-index: 4;
  position: absolute; /* 使用绝对定位使图标在按钮内居中 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 将图标移动到按钮的中心位置 */
}

.single-sim {
  width: 100%; /* 占满整个 .action 容器的宽度 */
  height: 100px; /* 设置按钮高度 */
  background-color: #ecfff3; /* 按钮背景颜色 */
  color: #A9A9A9;
  font-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  position: relative;
}

.scale {
  /* 切换按钮的样式，背景色为浅绿色，内容居中对齐 */
  width: 100%;
  height: 100px;
  display: flex;
  background-color: #ecfff3;
  align-items: center;
  justify-content: center;
}

.ScaleIcon {
  /* 切换图标的样式，指定图标的宽度和高度 */
  width: 60px;
  height: 60px;
}


.matched-contacts {
  /* 匹配联系人列表的样式，宽度占满父容器，背景色为白色，带有浅灰色边框，高度占视口的 70%，支持垂直滚动 */
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #ccc;
  height: 73vh; /* 设置为视口高度的 70% */
  overflow-y: auto; 
  z-index: 3;
  position: fixed; /* 固定定位 */
  top: 0px; /* 距离顶部的距离，根据需要调整 */
  left: 0; /* 确保在左侧对齐 */
}

.contact-item {
  display: flex;
  justify-content: space-between; /* 使两个部分分别靠左和靠右 */
  align-items: center;
  height: 80px;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
/* 匹配部分用红色渲染 */
.highlight {
  color: red;
  font-weight: bold; /* Optional: Make the highlighted text bold */
}

.contact-name {
  font-size: 36px;
  margin-right: 10px;
  max-width: 40%; /* 左侧区域占 40% 宽度 */
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制为两行显示 */
}

/* .contact-name > span {
  display: inline-block; 
  width: 100%;
  text-align: center; /* 第二行居中对齐 */



.contact-number {
  font-size: 26px;
  max-width: 80%;
  min-width: 0;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline; /* 确保在一行内 */
}

.contact-number span {
  display: inline; /* 确保高亮部分在一行内 */
}

.contact-number .highlight {
  color: red; /* 高亮颜色 */
  font-weight: bold; /* Optional: Make the highlighted text bold */
}


.contact-number .line-1, .contact-number .line-2 {
  display: inline-block;
  width: 100%;
  text-align: right; /* 保持右对齐 */
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>