小程序模板網(wǎng)

終章 給ofo擼一個(gè)微信小程序之錢包與充值

發(fā)布時(shí)間:2018-04-18 11:37 所屬欄目:小程序開發(fā)教程

上一節(jié)我們完成了登錄頁(yè)面的實(shí)現(xiàn),這一節(jié)讓我們完成登錄后的錢包頁(yè)面和充值頁(yè)面

 

頁(yè)面分析 
需要獲取錢包余額數(shù)據(jù)并顯示在頁(yè)面上,充值后數(shù)據(jù)會(huì)自動(dòng)更新 
其他可點(diǎn)擊按鈕分別顯示對(duì)應(yīng)的模態(tài)框,因?yàn)槲⑿胖辉试S五個(gè)頁(yè)面層級(jí),避免過(guò)多頁(yè)面層級(jí)造成用戶迷失。 
頁(yè)面結(jié)構(gòu)

 

  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">余額說(shuō)明</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>關(guān)于ofo</text>
  25. <text>></text>
  26. </view>
  27. </view>

頁(yè)面樣式

 

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

頁(yè)面數(shù)據(jù)邏輯

 

  1. // pages/wallet/index.js
  2. Page({
  3. data:{
  4. overage: 0,
  5. ticket: 0
  6. },
  7. // 頁(yè)面加載
  8. onLoad:function(options){
  9. wx.setNavigationBarTitle({
  10. title: '我的錢包'
  11. })
  12. },
  13. // 頁(yè)面加載完成,更新本地存儲(chǔ)的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. // 頁(yè)面顯示完成,獲取本地存儲(chǔ)的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. // 余額說(shuō)明
  36. overageDesc: function(){
  37. wx.showModal({
  38. title: "",
  39. content: "充值余額0.00元+活動(dòng)贈(zèng)送余額0.00元",
  40. showCancel: false,
  41. confirmText: "我知道了",
  42. })
  43. },
  44. // 跳轉(zhuǎn)到充值頁(yè)面
  45. movetoCharge: function(){
  46. // 關(guān)閉當(dāng)前頁(yè)面,跳轉(zhuǎn)到指定頁(yè)面,返回時(shí)將不會(huì)回到當(dāng)前頁(yè)面
  47. wx.redirectTo({
  48. url: '../charge/index'
  49. })
  50. },
  51. // 用車券
  52. showTicket: function(){
  53. wx.showModal({
  54. title< 


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/23696.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢