用户
 找回密码
 立即注册

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. })
  22. },
  23. wallet_pay() {
  24. this.setData({//转换为钱包支付
  25. payment_mode: 2
  26. })
  27. },
  28. set_wallets_password(e) {//获取钱包密码
  29. this.setData({
  30. wallets_password: e.detail.value
  31. });
  32. if (this.data.wallets_password.length == 6) {//密码长度6位时,自动验证钱包支付结果
  33. wallet_pay(this)
  34. }
  35. },
  36. set_Focus() {//聚焦input
  37. console.log('isFocus', this.data.isFocus)
  38. this.setData({
  39. isFocus: true
  40. })
  41. },
  42. set_notFocus() {//失去焦点
  43. this.setData({
  44. isFocus: false
  45. })
  46. },
  47. close_wallets_password () {//关闭钱包输入密码遮罩
  48. this.setData({
  49. isFocus: false,//失去焦点
  50. wallets_password_flag: false,
  51. })
  52. },
  53. pay() {//去支付
  54. pay(this)
  55. }
  56. })
  57. /*-----------------------------------------------*/
  58. /*支付*/
  59. function pay(_this) {
  60. let apikey = _this.data.apikey;
  61. let id = _this.data.id;
  62. let payment_mode = _this.data.payment_mode
  63. if (payment_mode == 1) {
  64. // 微信支付
  65. // 微信自带密码输入框
  66. console.log('微信支付')
  67. } else if (payment_mode == 0) {
  68. // 转账支付 后续跳转至传转账单照片
  69. console.log('转账支付')
  70. } else if (payment_mode == 2) {
  71. // 钱包支付 输入密码
  72. console.log('钱包支付')
  73. _this.setData({
  74. wallets_password_flag: true,
  75. isFocus: true
  76. })
  77. }
  78. }
  79. // 钱包支付
  80. function wallet_pay(_this) {
  81. console.log('钱包支付请求函数')
  82. /*
  83. 1.支付成功
  84. 2.支付失败:提示;清空密码;自动聚焦isFocus:true,拉起键盘再次输入
  85. */
  86. }

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/--

鲜花
鲜花 (2)
鸡蛋
鸡蛋

刚表态过的朋友 (2 人)

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

相关阅读

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