微信小程序一键复制、一键拨号

 

 

wxml：

<!-- .wxml -->
<view class="container">
  <view class="headBgm"></view>
  <view class="main">
    <view class="list" wx:for="{{carList}}" wx:key="index">
      <image src="../../../images/page4-9.png"></image>
      <view class="main-content">
        <view class="c-left">
          <image src="../../../images/banner01.png"></image>
        </view>
        <view class="c-right">
          <view class="name">姓名：{{item.name}}</view>
          <view>未来城市置业顾问</view>
          <view class="info">
            <text>微信号：</text>
            <text class="wxId">{{item.wxid}}</text>
            <text class="copy" bindtap="copyTBL" data-wxid="{{item.wxid}}">复制微信号</text>
            <text class="dial" bindtap="calling" data-wxid="{{item.wxid}}">一键拨号</text>
          </view>
        </view>
      </view>
    </view>
    
  </view>
</view>

.wxss

.container{
  width: 100%;
  position: relative;
}
.headBgm{
  width: 100%;
  height: 350rpx;
  background: #fdcd02;
}
.main{
  width: 688rpx;
  height: 900rpx;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.main .list{
  widows: 100%;
  height: 190rpx;
  margin-top: 10rpx;
  border-radius: 20rpx;
  background: #fff;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0rpx 2rpx 10rpx #ccc;
  padding: 30rpx;
  box-sizing: border-box;
}
.main .list>image{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.main-content{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.main-content .c-left{
  width: 20%;
  height: 100%;
  text-align: center;
}
.main-content .c-left image{
  width: 104rpx;
  height: 104rpx;
  border-radius: 50%;
}
.main-content .c-right{
  width: 80%;
  height: 100%;
  font-size: 22rpx;
  color: #9d9e9e;
  font-family: "黑体";
  line-height: 35rpx;
  overflow: hidden;
}
.c-right .name{
  width: 100%;
  border-bottom: 1px solid #fdcd02;
  font-size: 30rpx;
  color: #fdcd02;
  margin: 10rpx 0;
}
.c-right .info .copy,
.c-right .info .dial{
  margin-left: 10rpx;
  padding: 5rpx 10rpx;
  box-sizing: border-box;
  background: #fdcd02;
  color: #fff;
  font-weight: normal;
  border-radius: 0rpx;
  font-size: 22rpx;
  /* width: 140rpx; */
  overflow: hidden;
  line-height:40rpx;
  text-align: center;
}
.c-right .info{
  width: 100%;
  display: flex;
}
.c-right .info text{
  display: block;
  /* width: 100rpx; */
}
.c-right .info .wxId{
  width: 140rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-right .info .copy{
  background: #f8b500;

}

.js

// pages/index/card/card.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    carList: [{
      name: "张三",
      wxid: "bf15186066632"
    }, {
      name: "李四",
      wxid: "180857545421"
    }, {
      name: "王二",
      wxid: "15186066632"
    }]
  },
  // 复制
  copyTBL: function (e) {
    let phone = e.target.dataset.wxid;
    wx.setClipboardData({
      data: phone,
      success: function (res) {
        wx.showToast({
          title: '内容已复制',
        })
        // self.setData({copyTip:true}),
        // wx.showModal({
        //   title: '提示',
        //   content: '复制成功',
        //   success: function (res) {
        //     if (res.confirm) {
        //       console.log('确定')
        //     } else if (res.cancel) {
        //       console.log('取消')
        //     }
        //   }
        // })
      }
    });
  },
  calling: function(e) {
    // console.log(Number(e.target.dataset.wxid)) 
    let phone =e.target.dataset.wxid;
    wx.makePhoneCall({    
      phoneNumber: phone,
          success: function() {
        wx.showToast({
          title: '拨打电话成功！',
        })        
      },
          fail: function() {
        wx.showToast({
          title: '拨打电话失败！',
          icon: "none"
        })    
      }  
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

.json

{
  "usingComponents": {},
  "navigationBarTitleText": "联系我们",
  "navigationBarBackgroundColor": "#fdcd02"
}