微信小程序 密码输入(源码下载)


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

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

Javascript 相关文章推荐
javascript nextSibling 与 getNextElement(node) 使用介绍
Oct 13 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
AngularJS Controller作用域
Jan 09 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
Bootstrap 中data-[*] 属性的整理
Mar 13 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
Vue-CLI与Vuex使用方法实例分析
Jan 06 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
You might like
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
浅谈PHP的反射机制
2016/12/15 PHP
jquery tab插件制作实现代码
2010/06/22 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
Python定时任务sched模块用法示例
2018/07/16 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
python实现AES加密和解密
2019/03/27 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
毕业生的自我评价范文
2013/12/31 职场文书
年会搞笑主持词
2014/03/27 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
施工质量承诺书范文
2014/05/30 职场文书
爱国主义影片观后感
2015/06/18 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL