上一節我們完(wan)成了登錄(lu)頁(ye)面(mian)的實現(xian)，這一節讓我們完(wan)成登錄(lu)后的錢包頁(ye)面(mian)和充值(zhi)頁(ye)面(mian)

頁面分析 
需要獲取錢包余額數據并顯示在頁面上，充值后數據會自動更新 
其他可點擊按鈕分別顯示對應的模態框，因為微信只允許五個頁面層級，避免過多頁面層級造成用戶迷失。 
頁面結構

1. <!--pages/wallet/index.wxml-->
2. <view class="container">
3. <view class="overage">
4. <view>
5. <text class="overage-header">我的余額（元）</text>
6. </view>
7. <view>
8. <text class="overage-amount">{{overage}}</text>
9. </view>
10. <view>
11. <text bindtap="overageDesc" class="overage-desc">余額說明</text>
12. </view>
13. </view>
14. <button bindtap="movetoCharge" class="btn-charge">充值</button>
15. <view bindtap="showTicket" class="my-ticket tapbar">
16. <text>我的用車券</text>
17. <text><text class="c-g">{{ticket}}張</text>></text>
18. </view>
19. <view bindtap="showDeposit" class="my-deposit tapbar">
20. <text>我的押金</text>
21. <text><text class="c-y">99元，押金退款</text>></text>
22. </view>
23. <view bindtap="showInvcode" class="my-invcode tapbar">
24. <text>關于ofo</text>
25. <text>></text>
26. </view>
27. </view>

頁面(mian)樣(yang)式

1. /* pages/wallet/index.wxss */
2. .overage{
3. background-color: #fff;
4. padding: 40rpx 0;
5. text-align: center;
6. }
7. .overage-header{
8. font-size: 24rpx;
9. }
10. .overage-amount{
11. display: inline-block;
12. padding: 20rpx 0;
13. font-size: 100rpx;
14. font-weight: 700;
15. }
16. .overage-desc{
17. padding: 10rpx 30rpx;
18. font-size: 24rpx;
19. border-radius: 40rpx;
20. border: 1px solid #666;
21. }
22. .my-deposit{
23. margin-top: 2rpx;
24. }
25. .my-invcode{
26. margin-top: 40rpx;
27. }
28. .c-y{
29. color: #b9dd08;
30. padding-top: -5rpx;
31. padding-right: 10rpx;
32. }
33. .c-g{
34. padding-top: -5rpx;
35. padding-right: 10rpx;
36. }

頁(ye)面數(shu)據邏輯

1. // pages/wallet/index.js
2. Page({
3. data:{
4. overage: 0,
5. ticket: 0
6. },
7. // 頁面加載
8. onLoad:function(options){
9. wx.setNavigationBarTitle({
10. title: '我的錢包'
11. })
12. },
13. // 頁面加載完成，更新本地存儲的overage
14. onReady:function(){
15. wx.getStorage({
16. key: 'overage',
17. success: (res) => {
18. this.setData({
19. overage: res.data.overage
20. })
21. }
22. })
23. },
24. // 頁面顯示完成，獲取本地存儲的overage
25. onShow:function(){
26. wx.getStorage({
27. key: 'overage',
28. success: (res) => {
29. this.setData({
30. overage: res.data.overage
31. })
32. }
33. })
34. },
35. // 余額說明
36. overageDesc: function(){
37. wx.showModal({
38. title: "",
39. content: "充值余額0.00元+活動贈送余額0.00元",
40. showCancel: false,
41. confirmText: "我知道了",
42. })
43. },
44. // 跳轉到充值頁面
45. movetoCharge: function(){
46. // 關閉當前頁面，跳轉到指定頁面，返回時將不會回到當前頁面
47. wx.redirectTo({
48. url: '../charge/index'
49. })
50. },
51. // 用車券
52. showTicket: function(){
53. wx.showModal({
54. title<