• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

【小程序】----自定义数字键盘拨号

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、问题描述

  项目要求在小程序中实现像手机拨打电话一样得拨号键盘,点击拨打后跳转到手机默认拨号界面,并通过虚拟小号进行拨打。

二、页面效果

    

三、代码实现

// wxml

<view> <view class="input-box">{{tel}}</view> <view class="keyboard"> <view class="key-row"> <view class="key-cell" bindtap="btnclick" >1 <text class="key-downletter" data-num="1"></text> </view> <view class="key-cell" bindtap="btnclick" >2 <text class="key-downletter" data-num="2">ABC</text> </view> <view class="key-cell" bindtap="btnclick" >3 <text class="key-downletter" data-num="3">DEF</text> </view> </view> <view class="key-row"> <view class="key-cell" bindtap="btnclick" >4 <text class="key-downletter" data-num="4">GHI</text> </view> <view class="key-cell" bindtap="btnclick" >5 <text class="key-downletter" data-num="5">JKL</text> </view> <view class="key-cell" bindtap="btnclick" >6 <text class="key-downletter" data-num="6">MNO</text> </view> </view> <view class="key-row"> <view class="key-cell" bindtap="btnclick" >7 <text class="key-downletter" data-num="7">PQRS</text> </view> <view class="key-cell" bindtap="btnclick" >8 <text class="key-downletter" data-num="8">TUV</text> </view> <view class="key-cell" bindtap="btnclick" >9 <text class="key-downletter" data-num="9">WXYZ</text> </view> </view> <view class="key-row"> <view class="key-cell key-boldcell" data-num="*" bindtap="btnclick" >*</view> <view class="key-cell" data-num="0" bindtap="btnclick" >0</view> <view class="key-cell" data-num="#" bindtap="btnclick" >#</view> </view> <view class="key-row key-bottombox"> <view class="key-confirm t-icon t-icon-dianhua" bindtap="btnclick" data-num="S"></view> <view class="key-delete t-icon t-icon-delete_left" bind:touchstart="btnclick" bind:touchend="_handleKeyEnd" data-num="D"></view> </view> </view> </view>
// wxss

.key-container { width: 100%; margin-top: 100rpx; display: flex; display: -webkit-flex; flex-direction: column; align-items: center; justify-content: space-between; } .input-box { font-size: 60rpx; font-weight: bold; height: 200rpx; line-height: 200rpx; margin-top: 80rpx; margin-bottom: 20rpx; padding-right: 125rpx; text-align: right; overflow: auto; box-sizing: border-box; width: 100%; } .keyboard { height: 480rpx; width : 80%; margin: 0 auto; } .key-row { display: flex; display: -webkit-flex; position: relative; height: 140rpx; line-height: 140rpx; } .key-downletter { position: absolute; font-size: 24rpx; color: #a18484c9; top: 34rpx; left: 0; right: 0; } .key-row::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 1px; color: #d5d5d6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .key-cell { flex: 1; -webkit-box-flex: 1; text-align: center; position: relative; font-size: 42rpx; border-radius: 50%; } .key-boldcell { font-size: 72rpx; line-height: 168rpx; } .key-cell:active { background: rgb(97, 196, 97); } .key-cell:nth-last-child(1)::after { border-right: 0; } .disabled { background: rgba(0, 0, 0, 0.2); } .key-bottombox { margin: 0 auto; width: 80%; text-align: right; } .key-confirm { color: #fff; display: inline-block; position: absolute; font-size: 50rpx; border-radius: 50%; text-align: center; height: 85rpx; width: 85rpx; top: 10rpx; left: 194rpx; line-height: 100rpx; /* background: rgb(97, 196, 97); */ } .key-confirm:active{ background: rgb(105, 167, 105); } .key-delete { right: 0; bottom: 0; display: inline-block; position: absolute; font-size: 25rpx; text-align: center; height: 70rpx; width: 72rpx; border-radius: 50%; line-height: 100rpx; margin-left: 90rpx; top: 14rpx; left: 308rpx; } .key-delete:active { background: rgb(97, 196, 97); }
// js

Page({
  data: {
    tel: '',
    telPhone: '',
    timeoutTop: '',
    flag : false
  },
  
  // 点击键盘事件
  btnclick:function(e){
    var num = e.target.id || e.target.dataset.num
    // 按钮长按删除键方法
    if (num === 'D') {
      const tag = e.target
      this.setData({
        timeoutTop: setInterval(() => {
          tag.Loop = 0
          this._handleDeleteKey()
        }, 300)
      })
      return false
    }
    switch (String(num)) {
      // 拨号键
      case 'S':
        this._handleConfirmKey()
        break
      default:
        this._handleNumberKey(num)
        break
    }
  },

  // 触屏结束事件
  _handleKeyEnd:function(e) {
    const num = e.target.dataset.num
    // 按钮没有长按删除键
    if (num === 'D') {
      clearTimeout(this.data.timeoutTop)
      this._handleDeleteKey()
    }
  },

  // 处理删除键
  _handleDeleteKey () {
    const S = this.data.tel
    // 如果没有输入,直接返回
    if (!S.length) return false
    // 否则删除最后一个
    this.setData({
      tel: S.substring(0, S.length - 1)
    })
  },

  // 处理长按删除所有数字
  _handleClearKey () {
    this.setData({
      tel: '',
      telPhone: ''
    })
  },

  // 处理数字
  _handleNumberKey (num) {
    const S = this.data.tel
    // 数字最多只能十三位
    if (S.length >= 13) return
    this.setData({
      tel: this.phonekG(S + num),
      telPhone: 'tel:' + S + num
    })
  },

  // 拨打按钮提交
  _handleConfirmKey () {
    const S = this.data.tel
    // 未输入
    if (!S.length) {
      wx.showToast({
        title: '您目前未输入!',
        icon: 'none',
        duration: 1500
      })
      return false
    }
    if (S.length <= 10 || S.length >= 20) {
      wx.showToast({
        title: '电话只支持11位数字!',
        icon: 'none',
        duration: 1500
      })
      return false
    }
    if (this.flag) {
      return false
    }
    this.setData({
      flag: false
    })
    
    // 此处调用拨号请求
    // 请求成功后调用小程序拨号api -- wx.makePhoneCall()
    // 并将flag变为false
    // that.setData({
    //   flag: false
    // })

  },

  /* 公共方法 去掉所有空格*/
  phonekG: (str)=>{
    return str.replace(/^(.{3})(.{4})(.{4})$/, '$1 $2 $3');
  }
})

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序登录时序图发布时间:2022-07-18
下一篇:
微信小程序用AES加密和java后台对接发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap