A micro-channel applet copy key, a dial key

 

 

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 ({ 

  / * * 
   * page initial data 
   * / 
  Data: { 
    Carlist: [{ 
      name: "Joe Smith" , 
      wxid: "bf15186066632" 
    }, { 
      name: "Li four " , 
      wxid: " 180 857 545 421 " 
    }, { 
      name: " king " , 
      wxid: " 15,186,066,632 " 
    }] 
  }, 
  // copy 
  copyTBL: function (E) { 
    the let Phone = e.target.dataset.wxid; 
    WX. SetClipboardData ({ 
      Data: Phone,
      Success:function (RES) { 
        wx.showToast ({ 
          title: 'content is copied' , 
        }) 
        // self.setData (copyTip {:} to true), 
        // wx.showModal ({ 
        //    title: 'prompt', 
        //    content: 'copy success', 
        //    success: function (RES) { 
        //      IF (res.confirm) { 
        //        the console.log ( 'OK') 
        //      } the else IF (res.cancel) { 
        //        Console. log ( 'cancel') 
        //      } 
        //    } 
        // }) 
      } 
    }); 
  }, 
  Calling: function (E) {
     // the console.log (Number The (e.target.dataset.wxid))  
    the let Phone = e.target.dataset.wxid; 
    wx.makePhoneCall ({     
      phoneNumber: Phone, 
          Success: function () { 
        wx.showToast ({ 
          title: 'call success!' , 
        })         
      }, 
          fail: function () { 
        wx.showToast ({ 
          title: 'call failed!' , 
          icon: "none" 
        })     
      }   
    }) 
  }, 
  / * * 
   * life cycle function - listen for the page is loaded 
   * /
  onLoad: function (Options) { 

  }, 

  / * * 
   * Life Cycle function - listening initial page rendering is complete 
   * / 
  the onReady: function () { 

  }, 

  / * * 
   * Life Cycle function - monitor page displays 
   * / 
  onShow: function () { 

  } 

  / * * 
   * life cycle function - listening hidden page 
   * / 
  onHide: function () { 

  } 

  / * * 
   * life cycle function - listen to uninstall the page 
   * / 
  onUnload: function () { 

  } 

  / * * 
   * page related event handler - the drop-down monitor user actions 
   * / 
  onPullDownRefresh:function  () {

  }, 

  / * * 
   * bottoming event handler to pull the page 
   * / 
  onReachBottom: function () { 

  }, 

  / * * 
   * user clicks on the top right corner to share 
   * / 
  onShareAppMessage: function () { 

  } 
})

.json

{
   "UsingComponents" : {},
   "navigationBarTitleText": "Contact us" ,
   "navigationBarBackgroundColor": "# fdcd02" 
}