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


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 相关文章推荐
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
原生js实现验证码功能
Mar 16 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
js简易版购物车功能
Jun 17 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
深入理解 ES6中的 Reflect用法
Jul 18 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
改进的IP计数器
2006/10/09 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
Python字符编码与函数的基本使用方法
2017/09/30 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
python批量爬取下载抖音视频
2019/06/17 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
加拿大时装零售商:Influence U
2018/12/22 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
师范生自荐信
2013/10/27 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
学校四风对照检查材料
2014/08/28 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android