首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

微信小程序 密码输入（源码下载）

Posted in Javascript onJune 27, 2017

设计支付密码的输入框

效果如下：

微信小程序 密码输入（源码下载）

实例代码：

<view class="pay">
<view class="title">支付方式</view>
<view catchtap="wx_pay" class="wx_pay">
<i class="icon {{payment_mode==1?'active':''}}" type="String"></i>
<text>微信支付</text>
</view>
<view catchtap="offline_pay" class="offline_pay">
<i class="icon {{payment_mode==0?'active':''}}" type="String"></i>
<text>对公打款</text>
</view>
<block wx:if="{{balance!=0}}">
<view catchtap="wallet_pay" class="wallet_pay">
<i class="icon {{payment_mode==2?'active':''}}" type="String"></i>
<text>钱包支付(余额:{{balance/100}}元)</text>
</view>
</block>
<block wx:if="{{balance==0}}">
<view class="wallet_pay">
<i class="icon" type="String" style="background:#e8e8e8;border:none;"></i>
<text style="color:#999">钱包支付(余额不足)</text>
</view>
</block>
</view>
<view catchtap="pay" class="save">确定</view>
<!--输入钱包密码-->
<view wx:if="{{wallets_password_flag}}" class="wallets-password">
<view class="input-content-wrap">
<view class="top">
<view catchtap="close_wallets_password" class="close">×</view>
<view class="txt">请输入支付密码</view>
<view catchtap="modify_password" class="forget">忘记密码</view>
</view>
<view class="actual_fee">
<span>￥</span>
<text>{{actual_fee/100}}</text>
</view>
<view catchtap="set_Focus" class="input-password-wrap">
<view class="password_dot">
<i wx:if="{{wallets_password.length>=1}}"></i>
</view>
<view class="password_dot">
<i wx:if="{{wallets_password.length>=2}}"></i>
</view>
<view class="password_dot">
<i wx:if="{{wallets_password.length>=3}}"></i>
</view>
<view class="password_dot">
<i wx:if="{{wallets_password.length>=4}}"></i>
</view>
<view class="password_dot">
<i wx:if="{{wallets_password.length>=5}}"></i>
</view>
<view class="password_dot">
<i wx:if="{{wallets_password.length>=6}}"></i>
</view>
</view>
</view>
<input bindinput="set_wallets_password" class="input-content" password type="number" focus="{{isFocus}}" maxlength="6" />
</view>

index.js

Page({
 data: {
  payment_mode: 1,//默认支付方式 微信支付
  isFocus: false,//控制input 聚焦
  balance:100,//余额
  actual_fee:20,//待支付
  wallets_password_flag:false//密码输入遮罩
 },
 //事件处理函数
 
 onLoad: function () {
  
 },
 wx_pay() {//转换为微信支付
  this.setData({
   payment_mode: 1
  })
 },
 offline_pay() {//转换为转账支付
  this.setData({
   payment_mode: 0
  })
 },
 wallet_pay() {
  this.setData({//转换为钱包支付
   payment_mode: 2
  })
 },
 set_wallets_password(e) {//获取钱包密码
  this.setData({
   wallets_password: e.detail.value
  });
  if (this.data.wallets_password.length == 6) {//密码长度6位时，自动验证钱包支付结果
   wallet_pay(this)
  }
 },
 set_Focus() {//聚焦input
  console.log('isFocus', this.data.isFocus)
  this.setData({
   isFocus: true
  })
 },
 set_notFocus() {//失去焦点
  this.setData({
   isFocus: false
  })
 },
 close_wallets_password () {//关闭钱包输入密码遮罩
  this.setData({
   isFocus: false,//失去焦点
   wallets_password_flag: false,
  })
 },
 pay() {//去支付
  pay(this)
 }
})
/*-----------------------------------------------*/
/*支付*/
function pay(_this) {
 let apikey = _this.data.apikey;
 let id = _this.data.id;
 let payment_mode = _this.data.payment_mode
 if (payment_mode == 1) {
 // 微信支付
 // 微信自带密码输入框
  console.log('微信支付')
 } else if (payment_mode == 0) {
 // 转账支付 后续跳转至传转账单照片
  console.log('转账支付')
 } else if (payment_mode == 2) {
  // 钱包支付 输入密码
  console.log('钱包支付')
  _this.setData({
   wallets_password_flag: true,
   isFocus: true
  })
 }

}
// 钱包支付
function wallet_pay(_this) {
 console.log('钱包支付请求函数')
 /*
 1.支付成功
 2.支付失败：提示；清空密码；自动聚焦isFocus:true，拉起键盘再次输入
 */
}

index.wxss

page {
 height: 100%;
 width: 100%;
 background: #e8e8e8;
}

page .pay {
 display: flex;
 flex-direction: column;
 background: #fff;
}

page .pay .title {
 height: 90rpx;
 line-height: 90rpx;
 font-size: 28rpx;
 color: #353535;
 padding: 0 23rpx;
 border-bottom: 1rpx solid #ddd;
 box-sizing: border-box;
}

page .pay .wx_pay, page .pay .offline_pay, page .pay .wallet_pay {
 margin: 0 26rpx;
 height: 90rpx;
 line-height: 90rpx;
 border-bottom: 2rpx solid #ddd;
 box-sizing: border-box;
 display: flex;
 align-items: center;
 justify-content: flex-start;
}

page .pay .wx_pay .icon, page .pay .offline_pay .icon,
page .pay .wallet_pay .icon {
 width: 34rpx;
 height: 34rpx;
 border: 2rpx solid #ddd;
 box-sizing: border-box;
 border-radius: 50%;
}

page .pay .wx_pay .icon.active, page .pay .offline_pay .icon.active,
page .pay .wallet_pay .icon.active {
 border: 10rpx solid #00a2ff;
}

page .pay .wx_pay text, page .pay .offline_pay text, page .pay .wallet_pay text {
 margin-left: 20rpx;
 color: #353535;
 font-size: 26rpx;
}

page .pay .wallet_pay {
 border: 0;
 border-top: 2rpx solid #ddd;
}

page .pay .offline_pay {
 border: 0 none;
}

page .save {
 margin: 80rpx 23rpx;
 color: #fff;
 background: #00a2ff;
 height: 88rpx;
 line-height: 88rpx;
 text-align: center;
 font-size: 30rpx;
 border-radius: 10rpx;
}

page .wallets-password {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.6);
}

page .wallets-password .input-content-wrap {
 position: absolute;
 top: 200rpx;
 left: 50%;
 display: flex;
 flex-direction: column;
 width: 600rpx;
 margin-left: -300rpx;
 background: #fff;
 border-radius: 20rpx;
}

page .wallets-password .input-content-wrap .top {
 display: flex;
 align-items: center;
 height: 90rpx;
 border-bottom: 2rpx solid #ddd;
 justify-content: space-around;
}

page .wallets-password .input-content-wrap .top .close {
 font-size: 44rpx;
 color: #999;
 font-weight: 100;
}

page .wallets-password .input-content-wrap .top .forget {
 color: #00a2ff;
 font-size: 22rpx;
}

page .wallets-password .input-content-wrap .actual_fee {
 display: flex;
 align-items: center;
 justify-content: center;
 color: #000;
 height: 100rpx;
 margin: 0 23rpx;
 border-bottom: 2rpx solid #ddd;
}

page .wallets-password .input-content-wrap .actual_fee span {
 font-size: 24rpx;
}

page .wallets-password .input-content-wrap .actual_fee text {
 font-size: 36rpx;
}

page .wallets-password .input-content-wrap .input-password-wrap {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 150rpx;
}

page .wallets-password .input-content-wrap .input-password-wrap .password_dot {
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 color: #000;
 box-sizing: border-box;
 width: 90rpx;
 height: 90rpx;
 border: 2rpx solid #ddd;
 border-left: none 0;
}

page .wallets-password .input-content-wrap .input-password-wrap .password_dot:nth-child(1) {
 border-left: 2rpx solid #ddd;
}

page .wallets-password .input-content-wrap .input-password-wrap .password_dot i {
 background: #000;
 border-radius: 50%;
 width: 20rpx;
 height: 20rpx;
}

page .wallets-password .input-content {
 position: absolute;
 opacity: 0;
 left: -100%;
 top: 600rpx;
 background: #f56;
 z-index: -999;
}

page .wallets-password .input-content.active {
 z-index: -99;
}

github地址：https://github.com/fiveTree/-_-

源码下载地址：http://xiazai.3water.com/201706/yuanma/master(3water.com).rar

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序 密码输入（源码下载）

- Author -

five_trees

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js select常用操作控制代码
Mar 16 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 #Javascript
微信小程序 空白页重定向解决办法
Jun 27 #Javascript
ionic 自定义弹框效果
Jun 27 #Javascript
js脚本编写简单刷票投票系统
Jun 27 #Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 #Javascript
详解vue.js的事件处理器v-on:click
Jun 27 #Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 #Javascript
SWL(1) 中波(3) 立体声(1) GWEN(1) 调频(4) ad hoc(1) 电台频率(32) FM(4) Harman Kardon(1) KDKA(1)
You might like
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
JS表单提交验证、input（type=number） 去三角 刷新验证码
2017/06/21 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
js计算两个日期间的天数月的实例代码
2018/09/20 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
Python合并字符串的3种方法
2015/05/21 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
python  logging日志打印过程解析
2019/10/22 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
python中关于数据类型的学习笔记
2020/07/19 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
海外淘书首选：AbeBooks
2017/07/31 全球购物
德国在线购买葡萄酒网站：Geile Weine
2019/09/24 全球购物
以下为Windows NT 下的32 位C++程序，请计算sizeof 的值
2016/12/07 面试题
MYSQL支持事务吗
2013/08/09 面试题
营销与策划专业毕业生求职信
2013/11/01 职场文书
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
党校培训思想汇报
2014/01/03 职场文书
初中美术教学反思
2014/01/29 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
廉洁自律个人总结
2015/02/14 职场文书