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


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 相关文章推荐
javascript Demo模态窗口
Dec 06 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 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错误Warning:mysql_query()解决方法
2015/10/24 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
理解javascript模块化
2016/03/28 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
Vue表单控件绑定图文详解
2019/02/11 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
Python pass详细介绍及实例代码
2016/11/24 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
python实现决策树分类(2)
2018/08/30 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
党员自我批评与反省材料
2014/02/10 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
政风行风评议工作总结
2014/10/21 职场文书
绿里奇迹观后感
2015/06/15 职场文书