前言
因项目的需求,需要我完成,当用户点击复制时,能成功把手机号复制下来,以及还让它在剪切板版显示,以及点击咨询的时候,能唤起拨打电话提示以及拨打手机号功能实现,或许我说的有些迷糊,大家可以看下面的效果图
点击咨询后的效果
点击复制后出现的效果
复制 代码
这里主要是用到了
<view style="display: flex;align-items: center;justify-content: space-between;">
<view>
<uni-icons type="weixin"></uni-icons> <text style="margin: 0 20rpx;">手机号码</text>
</view>
<text class="item-btn" @click="copy('手机号码')">复制</text>
</view>
// 复制文本到粘贴板
copy(value) {
//提示模板
uni.showModal({
content: value, //模板中提示的内容
confirmText: '复制内容',
success: (res) => { //点击复制内容的后调函数
if (res.confirm) {
uni.setClipboardData({
data: value, //要被复制的内容
success: () => { //复制成功的回调函数
uni.$showMsg('复制成功')
}
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
拨打电话 代码
拨打手机号要分 安卓系统 以及 iOS系统
<view style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px;">
<view>
<uni-icons type="phone-filled"></uni-icons> <text>咨询的手机号</text>
</view>
<view size="mini" @click="call('咨询的手机号')">咨询</view>
</view>
// 拨打电话
call(phone) {
console.log('传入的电话', phone);
const res = uni.getSystemInfoSync();
if (res.platform == 'ios') { // ios系统默认有个模态框
uni.makePhoneCall({
phoneNumber: phone,
success() {
console.log('拨打成功了');
},
fail() {
console.log('拨打失败了');
}
})
} else { //安卓手机手动设置一个showActionSheet
uni.showActionSheet({
itemList: [phone, '呼叫'],
success: function(res) {
console.log(res);
if (res.tapIndex == 1) {
uni.makePhoneCall({
phoneNumber: phone,
})
}
}
})
}
},