上一节我们完成了登录页面的实现，这一节让我们完成登录后的钱包页面和充值页面

页面分析 
需要获取钱包余额数据并显示在页面上，充值后数据会自动更新 
其他可点击按钮分别显示对应的模态框，因为微信只允许五个页面层级，避免过多页面层级造成用户迷失。 
页面结构

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>

页面样式

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. }

页面数据逻辑

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<