效果如下：

干貨：

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>對(duì)公打款</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">請(qǐng)輸入支付密碼</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,//默認(rèn)支付方式 微信支付
6. isFocus: false,//控制input 聚焦
7. balance:100,//余額
8. actual_fee:20,//待支付
9. wallets_password_flag:false//密碼輸入遮罩
10. },
11. //事件處理函數(shù)
12.  
13. onLoad: function () {
14.  
15. },
16. wx_pay() {//轉(zhuǎn)換為微信支付
17. this.setData({
18. payment_mode: 1
19. })
20. },
21. offline_pay() {//轉(zhuǎn)換為轉(zhuǎn)賬支付
22. this.setData({
23. payment_mode: 0