小程序模板网

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

发布时间:2018-04-20 11:08 所属栏目:小程序开发教程

效果如下:干货:view class="pay"view class="title"支付方式/viewview catchtap="wx_pay" class="wx_pay"i class="icon {{payment_mode==1?'active':''}}" type="String"/itext微信支付/text/viewview catchtap="o ...

 
 
 

效果如下:

干货:

 

  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>
 

  1. //index.js
  2.  
  3. Page({
  4. data: {
  5. payment_mode: 1,//默认支付方式 微信支付
  6. isFocus: false,//控制input 聚焦
  7. balance:100,//余额
  8. actual_fee:20,//待支付
  9. wallets_password_flag:false//密码输入遮罩
  10. },
  11. //事件处理函数
  12.  
  13. onLoad: function () {
  14.  
  15. },
  16. wx_pay() {//转换为微信支付
  17. this.setData({
  18. payment_mode: 1
  19. })
  20. },
  21. offline_pay() {//转换为转账支付
  22. this.setData({
  23. payment_mode: 0


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23786.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询