当前位置：Gxlcms > JavaScript > 微信小程序 密码输入（源码下载）

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

时间：2021-07-01 10:21:17 帮助过：3人阅读

设计支付密码的输入框

效果如下：

实例代码：

  1. <view class="pay">
  2. <view class="title">支付方式</view>
  3. <view catchtap="wx_pay" class="wx_pay">
  4. <i class="icon {{payment_mode==1?'active':''}}" type="String"></i>
  5. <text>微信支付</text>
  6. </view>
  7. <view catchtap="offline_pay" class="offline_pay">
  8. <i class="icon {{payment_mode==0?'active':''}}" type="String"></i>
  9. <text>对公打款</text>
  10. </view>
  11. <block wx:if="{{balance!=0}}">
  12. <view catchtap="wallet_pay" class="wallet_pay">
  13. <i class="icon {{payment_mode==2?'active':''}}" type="String"></i>
  14. <text>钱包支付(余额:{{balance/100}}元)</text>
  15. </view>
  16. </block>
  17. <block wx:if="{{balance==0}}">
  18. <view class="wallet_pay">
  19. <i class="icon" type="String" style="background:#e8e8e8;border:none;"></i>
  20. <text style="color:#999">钱包支付(余额不足)</text>
  21. </view>
  22. </block>
  23. </view>
  24. <view catchtap="pay" class="save">确定</view>
  25. <!--输入钱包密码-->
  26. <view wx:if="{{wallets_password_flag}}" class="wallets-password">
  27. <view class="input-content-wrap">
  28. <view class="top">
  29. <view catchtap="close_wallets_password" class="close">×</view>
  30. <view class="txt">请输入支付密码</view>
  31. <view catchtap="modify_password" class="forget">忘记密码</view>
  32. </view>
  33. <view class="actual_fee">
  34. <span>￥</span>
  35. <text>{{actual_fee/100}}</text>
  36. </view>
  37. <view catchtap="set_Focus" class="input-password-wrap">
  38. <view class="password_dot">
  39. <i wx:if="{{wallets_password.length>=1}}"></i>
  40. </view>
  41. <view class="password_dot">
  42. <i wx:if="{{wallets_password.length>=2}}"></i>
  43. </view>
  44. <view class="password_dot">
  45. <i wx:if="{{wallets_password.length>=3}}"></i>
  46. </view>
  47. <view class="password_dot">
  48. <i wx:if="{{wallets_password.length>=4}}"></i>
  49. </view>
  50. <view class="password_dot">
  51. <i wx:if="{{wallets_password.length>=5}}"></i>
  52. </view>
  53. <view class="password_dot">
  54. <i wx:if="{{wallets_password.length>=6}}"></i>
  55. </view>
  56. </view>
  57. </view>
  58. <input bindinput="set_wallets_password" class="input-content" password type="number" focus="{{isFocus}}" maxlength="6" />
  59. </view>

index.js

  1. Page({
  2.  data: {
  3.   payment_mode: 1,//默认支付方式 微信支付
  4.   isFocus: false,//控制input 聚焦
  5.   balance:100,//余额
  6.   actual_fee:20,//待支付
  7.   wallets_password_flag:false//密码输入遮罩
  8.  },
  9.  //事件处理函数
  10.  
  11.  onLoad: function () {
  12.   
  13.  },
  14.  wx_pay() {//转换为微信支付
  15.   this.setData({
  16.    payment_mode: 1
  17.   })
  18.  },
  19.  offline_pay() {//转换为转账支付
  20.   this.setData({
  21.    payment_mode: 0
  22.   })
  23.  },
  24.  wallet_pay() {
  25.   this.setData({//转换为钱包支付
  26.    payment_mode: 2
  27.   })
  28.  },
  29.  set_wallets_password(e) {//获取钱包密码
  30.   this.setData({
  31.    wallets_password: e.detail.value
  32.   });
  33.   if (this.data.wallets_password.length == 6) {//密码长度6位时，自动验证钱包支付结果
  34.    wallet_pay(this)
  35.   }
  36.  },
  37.  set_Focus() {//聚焦input
  38.   console.log('isFocus', this.data.isFocus)
  39.   this.setData({
  40.    isFocus: true
  41.   })
  42.  },
  43.  set_notFocus() {//失去焦点
  44.   this.setData({
  45.    isFocus: false
  46.   })
  47.  },
  48.  close_wallets_password () {//关闭钱包输入密码遮罩
  49.   this.setData({
  50.    isFocus: false,//失去焦点
  51.    wallets_password_flag: false,
  52.   })
  53.  },
  54.  pay() {//去支付
  55.   pay(this)
  56.  }
  57. })
  58. /*-----------------------------------------------*/
  59. /*支付*/
  60. function pay(_this) {
  61.  let apikey = _this.data.apikey;
  62.  let id = _this.data.id;
  63.  let payment_mode = _this.data.payment_mode
  64.  if (payment_mode == 1) {
  65.  // 微信支付
  66.  // 微信自带密码输入框
  67.   console.log('微信支付')
  68.  } else if (payment_mode == 0) {
  69.  // 转账支付 后续跳转至传转账单照片
  70.   console.log('转账支付')
  71.  } else if (payment_mode == 2) {
  72.   // 钱包支付 输入密码
  73.   console.log('钱包支付')
  74.   _this.setData({
  75.    wallets_password_flag: true,
  76.    isFocus: true
  77.   })
  78.  }
  79. }
  80. // 钱包支付
  81. function wallet_pay(_this) {
  82.  console.log('钱包支付请求函数')
  83.  /*
  84.  1.支付成功
  85.  2.支付失败：提示；清空密码；自动聚焦isFocus:true，拉起键盘再次输入
  86.  */
  87. }

index.wxss

  1. page {
  2.  height: 100%;
  3.  width: 100%;
  4.  background: #e8e8e8;
  5. }
  6. page .pay {
  7.  display: flex;
  8.  flex-direction: column;
  9.  background: #fff;
  10. }
  11. page .pay .title {
  12.  height: 90rpx;
  13.  line-height: 90rpx;
  14.  font-size: 28rpx;
  15.  color: #353535;
  16.  padding: 0 23rpx;
  17.  border-bottom: 1rpx solid #ddd;
  18.  box-sizing: border-box;
  19. }
  20. page .pay .wx_pay, page .pay .offline_pay, page .pay .wallet_pay {
  21.  margin: 0 26rpx;
  22.  height: 90rpx;
  23.  line-height: 90rpx;
  24.  border-bottom: 2rpx solid #ddd;
  25.  box-sizing: border-box;
  26.  display: flex;
  27.  align-items: center;
  28.  justify-content: flex-start;
  29. }
  30. page .pay .wx_pay .icon, page .pay .offline_pay .icon,
  31. page .pay .wallet_pay .icon {
  32.  width: 34rpx;
  33.  height: 34rpx;
  34.  border: 2rpx solid #ddd;
  35.  box-sizing: border-box;
  36.  border-radius: 50%;
  37. }
  38. page .pay .wx_pay .icon.active, page .pay .offline_pay .icon.active,
  39. page .pay .wallet_pay .icon.active {
  40.  border: 10rpx solid #00a2ff;
  41. }
  42. page .pay .wx_pay text, page .pay .offline_pay text, page .pay .wallet_pay text {
  43.  margin-left: 20rpx;
  44.  color: #353535;
  45.  font-size: 26rpx;
  46. }
  47. page .pay .wallet_pay {
  48.  border: 0;
  49.  border-top: 2rpx solid #ddd;
  50. }
  51. page .pay .offline_pay {
  52.  border: 0 none;
  53. }
  54. page .save {
  55.  margin: 80rpx 23rpx;
  56.  color: #fff;
  57.  background: #00a2ff;
  58.  height: 88rpx;
  59.  line-height: 88rpx;
  60.  text-align: center;
  61.  font-size: 30rpx;
  62.  border-radius: 10rpx;
  63. }
  64. page .wallets-password {
  65.  position: absolute;
  66.  left: 0;
  67.  top: 0;
  68.  width: 100%;
  69.  height: 100%;
  70.  background: rgba(0, 0, 0, 0.6);
  71. }
  72. page .wallets-password .input-content-wrap {
  73.  position: absolute;
  74.  top: 200rpx;
  75.  left: 50%;
  76.  display: flex;
  77.  flex-direction: column;
  78.  width: 600rpx;
  79.  margin-left: -300rpx;
  80.  background: #fff;
  81.  border-radius: 20rpx;
  82. }
  83. page .wallets-password .input-content-wrap .top {
  84.  display: flex;
  85.  align-items: center;
  86.  height: 90rpx;
  87.  border-bottom: 2rpx solid #ddd;
  88.  justify-content: space-around;
  89. }
  90. page .wallets-password .input-content-wrap .top .close {
  91.  font-size: 44rpx;
  92.  color: #999;
  93.  font-weight: 100;
  94. }
  95. page .wallets-password .input-content-wrap .top .forget {
  96.  color: #00a2ff;
  97.  font-size: 22rpx;
  98. }
  99. page .wallets-password .input-content-wrap .actual_fee {
  100.  display: flex;
  101.  align-items: center;
  102.  justify-content: center;
  103.  color: #000;
  104.  height: 100rpx;
  105.  margin: 0 23rpx;
  106.  border-bottom: 2rpx solid #ddd;
  107. }
  108. page .wallets-password .input-content-wrap .actual_fee span {
  109.  font-size: 24rpx;
  110. }
  111. page .wallets-password .input-content-wrap .actual_fee text {
  112.  font-size: 36rpx;
  113. }
  114. page .wallets-password .input-content-wrap .input-password-wrap {
  115.  display: flex;
  116.  align-items: center;
  117.  justify-content: center;
  118.  height: 150rpx;
  119. }
  120. page .wallets-password .input-content-wrap .input-password-wrap .password_dot {
  121.  display: flex;
  122.  align-items: center;
  123.  justify-content: center;
  124.  text-align: center;
  125.  color: #000;
  126.  box-sizing: border-box;
  127.  width: 90rpx;
  128.  height: 90rpx;
  129.  border: 2rpx solid #ddd;
  130.  border-left: none 0;
  131. }
  132. page .wallets-password .input-content-wrap .input-password-wrap .password_dot:nth-child(1) {
  133.  border-left: 2rpx solid #ddd;
  134. }
  135. page .wallets-password .input-content-wrap .input-password-wrap .password_dot i {
  136.  background: #000;
  137.  border-radius: 50%;
  138.  width: 20rpx;
  139.  height: 20rpx;
  140. }
  141. page .wallets-password .input-content {
  142.  position: absolute;
  143.  opacity: 0;
  144.  left: -100%;
  145.  top: 600rpx;
  146.  background: #f56;
  147.  z-index: -999;
  148. }
  149. page .wallets-password .input-content.active {
  150.  z-index: -99;
  151. }

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

源码下载地址：http://xiazai.jb51.net/201706/yuanma/master(jb51.net).rar

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！