小程序模板网

终章 给ofo撸一个微信小程序之钱包与充值

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

 

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

 

  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< 


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23696.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询