【uniapp】 实现点击拨打电话 弹出相关的电话（不止一个） 并选择其中一个进行拨打

#问题#

uniapp 实现点击拨打电话 弹出相关的电话（不止一个） 并选择其中一个进行拨打

 

实现思路：对于点击显示所有人的相关电话号码，可以用一个弹出层+radio 显示，再跟进点击情况进行拨打电话；

思想误区：以拨打电话的方式弹出所有相关的电话号码，并且随机点击一个进行拨打电话，这样的思路暂时不能实现，或者是我没有想到这样的思路的解决办法，如果有博友知道 也可以告知学习；

点击需要显示弹出框

<button class="cu-btn bg-green shadow" @tap="showModal" data-target="RadioModal">Radio</button>

 JS实现

//第一部分 参数的设置
data() {
    return {
	modalName:null
}
  }




//第二部分  模态框的显示与隐藏
showModal(e) {
	this.modalName = e.currentTarget.dataset.target
},
hideModal(e) {
	this.modalName = null
},

弹出框的html

  <view class="cu-modal" :class="modalName=='RadioModal'?'show':''" @tap="hideModal">
	  	<view class="cu-dialog" @tap.stop="">
	  		<radio-group class="block" @change="RadioChange">
	  		<view class="cu-list menu text-left">
	  	<view class="cu-item" v-for="(item,index) in PhoneList">
	  	<label class="flex justify-between align-center flex-sub">
	  	<view class="flex-sub" @tap="CallPhone(item.Phone)">{{item.Name}}:{{item.Phone}}</view>
	  		</label>
	  			</view>
	  		</view>
	  	</radio-group>
	  </view>
  </view>

点击相关的电话进行拨打电话

/*拨打电话*/
CallPhone(e){
    uni.makePhoneCall({
		phoneNumber: e
	});
},