免费网页设计_h5制作模板_h5素材网站_h5 制作_手机小程序开发_答题h5

h5制作模板_h5素材网站_h5 制作_手机小程序开发_答题h5移动版

建站首页 > 公司实力 >

免费网页设计

免费网页设计:微信小程序 密码输入(源码下载)

微信小程序 密码输入(源码下载)  更新2017年06月27日   作者:five_trees   这篇文章主要介绍了微信小程序 密码输入(源码下载)的相关资料,需要的朋友可以参考下

效果如下:

实例代码:

 view 
 view 支付方式 /view 
 view catchtap="wx_pay" 
 i class="icon {{payment_mode==1 'active':''}}" type="String" /i 
 text 微信支付 /text 
 /view 
 view catchtap="offline_pay" 
 i class="icon {{payment_mode==0 'active':''}}" type="String" /i 
 text 对公打款 /text 
 /view 
 block wx:if="{{balance!=0}}" 
 view catchtap="wallet_pay" 
 i class="icon {{payment_mode==2 'active':''}}" type="String" /i 
 text 钱包支付(余额:{{balance/100}}元) /text 
 /view 
 /block 
 block wx:if="{{balance==0}}" 
 view 
 i type="String" /i 
 text 钱包支付(余额不足) /text 
 /view 
 /block 
 /view 
 view catchtap="pay" 确定 /view 
 !--输入钱包密码-- 
 view wx:if="{{wallets_password_flag}}" 
 view 
 view 
 view catchtap="close_wallets_password" × /view 
 view 请输入支付密码 /view 
 view catchtap="modify_password" 忘记密码 /view 
 /view 
 view 
 span ¥ /span 
 text {{actual_fee/100}} /text 
 /view 
 view catchtap="set_Focus" 
 view 
 i wx:if="{{wallets_password.length =1}}" /i 
 /view 
 view 
 i wx:if="{{wallets_password.length =2}}" /i 
 /view 
 view 
 i wx:if="{{wallets_password.length =3}}" /i 
 /view 
 view 
 i wx:if="{{wallets_password.length =4}}" /i 
 /view 
 view 
 i wx:if="{{wallets_password.length =5}}" /i 
 /view 
 view 
 i wx:if="{{wallets_password.length =6}}" /i 
 /view 
 /view 
 /view 
 input bindinput="set_wallets_password" 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/-_-

源码下载地址:

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


相关文章

这篇文章主要介绍了微信小程序template模板使用的相关资料,希望通过本文能帮助到大家,让大家理解掌握这样的功能,需要的朋友可以参考下

这篇文章主要介绍了微信小程序 tabs选项卡效果的实现的相关资料,微信小程序内部组件没有Tabs 选项卡的功能,自己实现个类似的,需要的朋友可以参考下

这篇文章主要介绍了微信小程序 合法域名校验出错详解及解决办法的相关资料,需要的朋友可以参考下

这篇文章主要介绍了微信小程序联网请求的轮播图的相关资料,需要的朋友可以参考下

这篇文章主要介绍了微信小程序request出现400的问题解决办法的相关资料,需要的朋友可以参考下

判断是否输入完毕再激活提交按钮...

这篇文章主要介绍了微信小程序 定位到当前城市实现实例代码的相关资料,需要的朋友可以参考下

这篇文章主要介绍了微信小程序 视图容器组件的详解及实例代码的相关资料,这里对基础知识进行了详细介绍并附有简单实例代码,需要的朋友可以参考下

这篇文章主要介绍了微信小程序 navigation API实例详解的相关资料,需要的朋友可以参考下

这篇文章主要介绍了微信小程序 location API接口相关资料,这里详细介绍了location API接口并附简单实例代码,需要的朋友可以参考下 (责任编辑:admin)