用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2017-6-16 00:43

效果如下:干货: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. Page({
  3. data: {
  4. payment_mode: 1,//默认支付方式 微信支付
  5. isFocus: false,//控制input 聚焦
  6. balance:100,//余额
  7. actual_fee:20,//待支付
  8. wallets_password_flag:false//密码输入遮罩
  9. },
  10. //事件处理函数
  11. onLoad: function () {
  12. },
  13. wx_pay() {//转换为微信支付
  14. this.setData({
  15. payment_mode: 1
  16. })
  17. },
  18. offline_pay() {//转换为转账支付
  19. this.setData({
  20. payment_mode: 0
  21. 邀请
    鲜花
    鲜花 (2)
    鸡蛋
    鸡蛋

    刚表态过的朋友 (2 人)

    分享至 : QQ空间
    收藏
    原作者: five_trees 来自: 博客园

    相关阅读

    • alwxkxk 2017-7-7 15:53
      十分感谢你的分享,学习了~