微信小程序自定义键盘 内部虚拟支付


Posted in Javascript onDecember 20, 2018

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

先看效果图 :

微信小程序自定义键盘 内部虚拟支付

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

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

<view class="popup-memu">
 <view class="line" style="background-color: rgb(255, 255, 255)"></view>
 <view class="payMode" bindtap="pay" data-pay_type='weipay'>
  <image src="/images/wechat.png"></image>
  <text style="width:70%">微信</text>
  <image src="/images/arrows-right.png"></image>
 </view>
 <view class="payMode" bindtap="pay" data-pay_type='1'>
  <image src="/images/vip.png"></image>
  <text style="width:70%">会员卡</text>
  <image src="/images/arrows-right.png"></image>
 </view>
 <view class="payMode" bindtap="pay" data-pay_type='2'>
  <image src="/images/payPacket.png"></image>
  <text style="width:70%">零钱</text>
  <image src="/images/arrows-right.png"></image>
 </view>
</view>
 <!-- 密码框带键盘 -->
<action-sheet hidden="{{passwordInputHidden}}" bindchange="passwordInputHidden">
 <view class='password-input'>
  <view>
   <text style="display:{{inputPassword[0]?'':'none'}}"></text>
  </view>
  <view>
   <text style="display:{{inputPassword[1]?'':'none'}}"></text>
  </view>
  <view>
   <text style="display:{{inputPassword[2]?'':'none'}}"></text>
  </view>
  <view>
   <text style="display:{{inputPassword[3]?'':'none'}}"></text>
  </view>
  <view>
   <text style="display:{{inputPassword[4]?'':'none'}}"></text>
  </view>
  <view>
   <text style="display:{{inputPassword[5]?'':'none'}}"></text>
  </view>
 </view>
 <view class='tips'>请输入支付密码(
  <text>-¥100</text>)</view>
 <view class='keyboard'>
  <view class='left number'>
   <view data-key="1" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>1</view>
   <view data-key="2" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>2</view>
   <view data-key="3" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>3</view>
   <view data-key="4" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>4</view>
   <view data-key="5" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>5</view>
   <view data-key="6" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>6</view>
   <view data-key="7" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>7</view>
   <view data-key="8" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>8</view>
   <view data-key="9" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>9</view>
   <view data-key="X" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>X</view>
   <view data-key="0" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>0</view>
   <view data-key="." 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
   });
  }
 },
 
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
微信开发 微信授权详解
Oct 21 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
微信小程序实现随机验证码功能
Dec 20 #Javascript
微信小程序实现发送验证码按钮效果
Dec 20 #Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 #Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 #Javascript
js canvas实现橡皮擦效果
Dec 20 #Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 #Javascript
Cocos2d实现刮刮卡效果
Dec 20 #Javascript
You might like
php 判断IP为有效IP地址的方法
2018/01/28 PHP
写js时遇到的一些小问题
2010/12/06 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
Vue表单实例代码
2016/09/05 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
2017/03/15 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
python xml解析实例详解
2016/11/14 Python
Python的语言类型(详解)
2017/06/24 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
Python 实现微信自动回复的方法
2020/09/11 Python
.NET面试问题集
2015/12/08 面试题
北大青鸟学生求职信
2013/09/24 职场文书
财务会计人员岗位职责
2013/11/30 职场文书
小小的船教学反思
2014/02/21 职场文书
经典团队口号大全
2014/06/21 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
法人代表资格证明书
2015/06/18 职场文书
聘任通知书
2015/09/21 职场文书