微信小程序---支付密码的输入框

效果如下：

干货：

<view class="pay">
catchtap"wx_pay""wx_pay">
type"String"></i>
</view>
"icon {{payment_mode==0?'active':''}}"></i>
</view>
"icon {{payment_mode==2?'active':''}}"></i>
</view>
"{{balance==0}}">
<textcolor:#999钱包支付(余额不足)</text>
</block>
"pay""save"确定</view>
<!--输入钱包密码-->
"input-content-wrap""top""close_wallets_password""close"×</view>
{{actual_fee/100}}"set_Focus""input-password-wrap""password_dot""{{wallets_password.length>=1}}"></i>
>
=4}}"></i>
=5}}"></i>
</view>
</view>

Page({
  data {
    isFocus false//控制input 聚焦
    actual_fee20//待支付
  },
  onLoadfunction(){

  wx_pay{//转换为微信支付
      payment_mode1
  offline_pay//转换为转账支付
0
  wallet_pay{
2
      wallets_password edetailvalue
if(datawallets_passwordlength ==6//密码长度6位时，自动验证钱包支付结果
}
  set_Focus//聚焦input
isFocus)
      isFocustrue

({
})
  close_wallets_password //关闭钱包输入密码遮罩
      wallets_password_flag    pay)

/*-----------------------------------------------*/
 pay_this{
 id id;
payment_mode //  微信支付
'微信支付')
//  转账支付 后续跳转至传转账单照片
)
'钱包支付')
true

// 钱包支付
/*
  2.支付失败：提示；清空密码；自动聚焦isFocus:true，拉起键盘再次输入
}

  height%;
  background #e8e8e8;

  display flex;
#fff;
title 90rpx  lineheight;
  color#353535;
  boxsizing borderbox;
  alignitems center  justifycontentstart;

34rpx;
radius50%;
}

left20rpx#353535;

 nonesave 80rpx#fff;
88rpx  textalign30rpx10rpxwalletspassword   position absolute  left  top%;
 rgba(0.6);
600rpx-300rpx#fff;
}
weightforget #00a2ff;
100rpx#ddd;
 none password_dotnthchild#ddd;

content   opacity#f56;
github地址：-">https://github.com/fiveTree/--
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!