更新 'pages/index/index.vue'

pages/index/index.vue

@@ -1,7 +1,7 @@
 <!-- 
  联系人主页，获取通讯录信息
  
- zzh 24.8.26 修改 name-btn边框宽度
+ zzh 24.9.28 选择对方电话号码
  方新力 24.8.28 修改字体大小，满6字换行，号码满7字换
  -->
 
@@ -36,6 +36,7 @@
         </view>
       </view>
     </view>
+
     <view class="text-area">
       <view v-if="filteredContacts.length" v-for="(item, id) in filteredContacts" :key="id">
         <view class="name-btn">
@@ -46,7 +47,26 @@
 		    <text v-if="!item.displayName">{{ formatPhoneNumber(item.phoneNumbers[0].value) }}</text>
 		    <text v-else>{{ truncate(item.displayName) }}</text>
 		  </view>
-          <view class="btn" @click="CallPhone(item.phoneNumbers[0].value)">
+		  
+		  <NumbersChoose class="phonenumber-choose-component"
+		    :visible="isChooseNumberVisible[item.id] || false"
+		    :title="item.displayName"
+		    @update:visible="(visible) => this.$set(isChooseNumberVisible, item.id, visible)"
+		  >
+		    <template #default>
+		  	  <view v-for="(number, index) in item.phoneNumbers" :key="index" @click="CallPhone(item,number.value)">
+			    <view class="line"></view>
+			    <text class="choose-phonenumber" style="white-space: nowrap;">				
+				  {{formatPhoneNumber(number.value) }}
+				</text>	
+		  	  </view>
+		    </template>
+		  </NumbersChoose>
+		  <!-- :style="{backgroundColor:isActive ? 'grey' :'white'}"
+		  @touchedstart="handleTouchedStart"
+		  @touchend="handleTouchedEnd"
+		  @touchcancel="handleTouchedEnd" -->
+          <view class="btn" @click="showChooseNumber(item,item.phoneNumbers[0].value)">
             <image class="Call" src="../../static/pics/call-out.png"></image>
           </view>
         </view>
@@ -74,7 +94,16 @@
 	}
 	const FvvUniTTS=uni.requireNativePlugin('Fvv-UniTTS');
 	import pinyin from "pinyin"; // 假设你使用了一个 pinyin 库，例如 pinyin
+	import CustomModal from '@/components/customModal.vue';
+	import NumbersChoose from '@/components/oppositePhonenumberChoose.vue'
+	// import oppositePhonenumbers from '@components/oppositePhonenumberChoose.vue';
 	export default {
+		//注册组件
+	  components:{
+		  CustomModal,
+		  NumbersChoose,
+		  // oppositePhonenumbers,
+	  }	,
 	  data() {
 		return {
 		    searchText: '', // 用户输入的搜索文本
@@ -83,6 +112,10 @@
 			num: '',
 			isLoudVisible: true, // 初始状态为显示
 		    searchActive: true,
+			showModal:false,//选择对方号码部件显示判断
+			phoneNumbersCount:'',
+			isChooseNumberVisible:{},
+			isActive: false,//点击对方号码，背景加深判断
 			
 		};
 	  },
@@ -100,7 +133,34 @@
 				'src': "url('../assets/typeface/almmdfdk.ttf')"
 			});
 	  },
+	  mounted() {
+		this.filteredContacts.forEach(item => {
+		  this.$set(this.isChooseNumberVisible, item.id, false);
+		});
+	  },
 	  methods: {
+		    showChooseNumber(item,phoneNumber){
+				console.log("showChooseNumber called");
+				console.log(new Error().stack); // 打印当前调用堆栈
+				if(item.phoneNumbers.length>1){
+					this.$set(this.isChooseNumberVisible,item.id,true)
+					console.log("isChooseNumberVisible",this.isChooseNumberVisible)	
+				}
+				else{
+					console.log("这里对方只有一个电话号码")
+					this.CallPhone(item,phoneNumber)
+				}
+
+			},
+			toggleActive() {
+		      this.isActive = !this.isActive;
+		    },	
+			handleTouchedStart(){
+				this.isActive=true;
+			},
+			handleTouchedEnd(){
+				this.isActive=false;
+			},
 		    toNum(e){
 				console.log("num",e);
 				this.num=e;
@@ -285,9 +345,17 @@
 		 });
 	   },
 		// 拨打电话
-		CallPhone(e) {
+		CallPhone(item,e) {
+		  // 重置所有isChooseNumberVisible状态
+		  Object.keys(this.isChooseNumberVisible).forEach(key=>{
+		  			 this.$set(this.isChooseNumberVisible,key,false); 
+		  });
+		  console.log("ischooseNumber",this.isChooseNumberVisible)
 		  // 调用HTML5 Plus框架提供的接口
 		  plus.device.dial(e, false);
+		  Object.keys(this.isChooseNumberVisible).forEach(key=>{
+		  			 this.$set(this.isChooseNumberVisible,key,false); 
+		  });
 		},
 		filterContacts() {
 		  // 获取用户输入的文本，转换为小写
@@ -424,7 +492,6 @@
 }
 
 .con-mes {
-  line-height: 1.05; /* 行高为字体大小的0.2倍 */
   font-family: 'FangSong', '仿宋_GB2312', serif;
   font-size: 35px;
   font-weight: 700;
@@ -510,7 +577,29 @@
 	  width: 80px;
 	  height: 80px;
 	}
+.phonenumber-choose-component{
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.choose-phonenumber{
+	flex-direction: column;
+	font-size: 80rpx;
+	transition: background-color 0.3s;
 	
+}	
+.choose-phonenumber.active {
+	background-color: #b0b0b0; /* 点击后颜色 */
+}
+.line{
+	/*分隔线，宽度、height参数为分隔线的粗细、颜色、上下间隔*/
+	width: 100%;
+	height: 2rpx;
+	background-color: #dbdbdb;
+	margin: 9rpx 0;
+}
 /* 悬浮框css */
 movable-view {
 	display: flex;
@@ -533,4 +622,4 @@ movable-area {
 	width:500rpx;
 	height: 500rpx;
 }
-</style>
+</style>