这篇文章主要为大家详细介绍了微信小程序自定义键盘,内部虚拟支付,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序自定义键盘的具体代码,供大家参考,具体内容如下

先看效果图 :

微信支付的话,调用微信支付接口是有自己的小键盘的,因为小程序没有内部键盘,所以有时候商城内部需要零钱支付 ,会员卡支付,输入密码就需要自己做一个小键盘了。

 css  跟  html不做过多说明 直接照搬就行 页面上面的3个小图片就不提供了 js 部分做了详细注释

<view>
 <view></view>
 <view bindtap="pay">
  <image src="/images/wechat.png"></image>
  <text>微信</text>
  <image src="/images/arrows-right.png"></image>
 </view>
 <view bindtap="pay">
  <image src="/images/vip.png"></image>
  <text>会员卡</text>
  <image src="/images/arrows-right.png"></image>
 </view>
 <view bindtap="pay">
  <image src="/images/payPacket.png"></image>
  <text>零钱</text>
  <image src="/images/arrows-right.png"></image>
 </view>
</view>
 <!-- 密码框带键盘 -->
<action-sheet hidden="{{passwordInputHidden}}" bindchange="passwordInputHidden">
 <view class='password-input'>
  <view>
   <text></text>
  </view>
  <view>
   <text></text>
  </view>
  <view>
   <text></text>
  </view>
  <view>
   <text></text>
  </view>
  <view>
   <text></text>
  </view>
  <view>
   <text></text>
  </view>
 </view>
 <view class='tips'>请输入支付密码(
  <text>-¥100</text>)</view>
 <view class='keyboard'>
  <view class='left number'>
   <view hover-class='active' hover-stay-time='100' bindtap='inputPassword'>1</view>
   <view hover-class='active' hover-stay-time='100' bindtap='inputPassword'>2</view>
   <view hover-class='active' hover-stay-time='100' bindtap='inputPassword'>3</view>
   <view hover-class='active' hover-stay-time='100' bindtap='inputPassword'>4</view>
   <view hover-class='active' hover-stay-time='100' bindtap='inputPassword'>5</view>
   <view hover-class='active' hover-stay-time='100' bindtap='inputPassword'>6</view>
   <view hover-class='active' hover-stay-time='100' bindtap='inputPassword'>7</view>
   <view hover-class='active' hover-stay-time='100' bindtap='inputPassword'>8</view>
   <view hover-class='active' hover-stay-time='100' bindtap='inputPassword'>9</view>
   <view hover-class='active' hover-stay-time='100' bindtap='inputPassword'>X</view>
   <view hover-class='active' hover-stay-time='100' bindtap='inputPassword'>0</view>
   <view hover-class='active' hover-stay-time='100' bindtap='inputPassword'>.</view>
  </view>
  <view class='right ctr-btn'>
   <view class='ctr-btn-item' hover-class='active' hover-stay-time='100' bindtap='clear'>
    <label class='iconfont icon-shanchu'></label>
   </view>
   <view class='ctr-btn-item' hover-class='active' hover-stay-time='100' bindtap='passwordInputHidden'>取消</view>
  </view>
 </view>
</action-sheet>

CSS: 

.popup-memu {
 width: 100%;
 background-color: white;
 border-top: 1px solid #dedbd5;
 border-bottom: 1px solid #eee;
 display: block;
}
 
.line {
 background-color: #eee;
 margin-left: 10px;
 height: 1px;
 margin-right: 10px;
}
 
.popup-memu {
 height: 50px;
 font-size: 15px;
 line-height: 50px;
 border-bottom: 1px solid #eee;
}
 
.payMode {
 display: flex;
 background: #fff;
 align-items: center;
 border-bottom: 2px solid #eee;
}
 
.payMode image {
 width: 30px;
 height: 30px;
 margin-left: 18px;
 margin-right: 10px;
}
 
.sheet-content {
 background-color: #fff;
 padding: 0 15rpx;
}
/* 键盘 */
.password-input {
 display: flex;
 width: 660rpx;
 border: 1px solid #ddd;
 margin: 0 auto;
 margin-top: 50rpx;
 background-color: #fff;
 border-radius: 3px;
}
 
.password-input view {
 width: 110rpx;
 height: 80rpx;
 display: flex;
 align-items: center;
 justify-content: center;
 box-sizing: border-box;
 border-right: 1px solid #ccc;
}
 
.password-input view:nth-child(6) {
 border-right: none;
}
 
.password-input view text {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background-color: #333;
}
 
.tips {
 font-size: 28rpx;
 text-align: center;
 margin-top: 5px;
}
 
.tips text {
 color: #c30;
}
 
.keyboard {
 width: 100%;
 display: flex;
 background-color: #fff;
 border-top: 1px solid #eee;
 margin-top: 50rpx;
}
 
.keyboard .number {
 display: flex;
 width: 570rpx;
 flex-wrap: wrap;
}
 
.keyboard .number view {
 width: 190rpx;
 height: 120rpx;
 line-height: 120rpx;
 text-align: center;
 font-size: 46rpx;
 font-weight: bold;
 box-sizing: border-box;
 border-right: 1px solid #eee;
 border-bottom: 1px solid #eee;
}
 
.keyboard .ctr-btn {
 width: 180rpx;
}
 
.keyboard .ctr-btn view {
 height: 240rpx;
 line-height: 240rpx;
 text-align: center;
 box-sizing: border-box;
 border-bottom: 1px solid #eee;
}
 
.keyboard .ctr-btn view .iconfont {
 font-size: 44rpx !important;
 color: #c30;
}
 
.keyboard .ctr-btn view:nth-child(2) {
 font-size: 46rpx;
 color: #c30;
}
 
.keyboard .active {
 background-color: #e4e7ed;
}
 
.activity {
 background-color: #fff;
 padding: 25rpx 20rpx;
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-size: 24rpx;
 border-bottom: 1px solid #f6f6f6;
}
 
.activity.activity-item {
 font-size: 26rpx;
}
 
.arrows-right {
 width: 30rpx;
 height: 30rpx;
}
 
.arrows-right.active {
 transform: rotate(270deg);
}
/* 键盘结束 */

 js:

Page({
 
 /**
  * 页面的初始数据
  */
 data: {
  inputPassword: '', //输入的密码
  passwordInputHidden: true,//hidden是true 默认隐藏
  pay_type: '',//支付方式
  password: 123456,//设置的密码 这里写死 实际开发中后台专门设置一个表存储用户设置的密码
 },
 
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
 
 },
 
 pay(e) {
  //你选择的支付方式
  var pay_type = e.currentTarget.dataset.pay_type;
  var _this = this;
  if (pay_type == 'weipay') { 
   //此处写入微信支付需要执行的代码不做过多介绍
  } else { 
   //内部支付 打开键盘
   _this.passwordInputHidden();
  }
 },
 
 
 inputPassword(e) {
  //键盘输入的密码 赋值给inputPassword
  this.data.inputPassword = this.data.inputPassword + e.currentTarget.dataset.key;
  this.setData({
   inputPassword: this.data.inputPassword
  });
  //当输入密码正确时 
  if (this.data.inputPassword.length == 6 && this.data.password == this.data.inputPassword) {
  
   this.passwordInputHidden();//关闭小键盘
  }
   //当输入密码错误时 给个提示 并且把输入的密码清零
  if (this.data.inputPassword.length == 6 && this.data.password != this.data.inputPassword) {
   wx.showModal({
    title: "提示",
    content: "输入密码错误",
   })
   this.setData({
    inputPassword: ''
   });
  }
 },
 passwordInputHidden() {
  this.setData({
   passwordInputHidden: !this.data.passwordInputHidden //取反 打开关闭小键盘
  });
  this.setData({
   inputPassword: ''
  });
 },
 //删除输入错误的密码
 clear() {
  var index = this.data.inputPassword.length;
  if (index > 0) {
   var inputPassword = this.data.inputPassword.substr(0, index - 1);
   this.setData({
    inputPassword: inputPassword
   });
  }
 },
 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
陌陌换帅:账上150亿现金救不了低迷股价,唐岩寻找新出路

陌陌换帅:账上150亿现

当智能手机的使用人数触达中国人口数上限,而快抖B站等
高瓴联合成立基金首期10亿元 重点关注中国研究型医院建设

高瓴联合成立基金首期

中国研究型医院学会与高瓴签署战略合作框架协议,联合成
德银:取消附赠充电器拉动苹果其他产品销量

德银:取消附赠充电器拉

尽管苹果声称不使用插头是为了保护环境,但由于插头的销
德媒:Wirecard将在下月底前决定出(bu)售(mai)核心业务

德媒:Wirecard将在下月

德国《南德意志报》周六援引破产管理人Michael Jaffe
到欧洲去!中国手机的下一个必争之地?

到欧洲去!中国手机的下

疫情也阻挡不了中国手机厂商寻求增长的脚步,在攻下印度
段永平部下做了一家快递公司,遭到围剿

段永平部下做了一家快

放眼中国前三大电商巨头,阿里京东都有了自己强大的物流
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,