编写充值页面

1.页面结构
<!--pages/charge/index.wxml-->
<view class="container">
    <view class="title">请输入充值金额</view>
    <view class="input-box">
        <input bindinput="bindInput" />
    </view>
    <button bindtap="charge" class="btn-charge">充值</button>
</view>
2.页面样式
/* pages/charge/index.wxss */
.input-box{
    background-color: #fff;
    margin: 0 auto;
    padding: 20rpx 0;
    border-radius: 10rpx;
    width: 90%;

}
.input-box input{
    width: 100%;
    height: 100%;
    text-align: center;
}
3.页面数据逻辑
// pages/charge/index.js
Page({
  data:{
    inputValue: 0
  },
// 页面加载
  onLoad:function(options){
    wx.setNavigationBarTitle({
      title: '充值'
    })
  },
// 存储输入的充值金额
  bindInput: function(res){
    this.setData({
      inputValue: res.detail.value
    })  
  },
// 充值
  charge: function(){
    // 必须输入大于0的数字
    if(parseInt(this.data.inputValue) <= 0 || isNaN(this.data.inputValue)){
      wx.showModal({
        title: "警告",
        content: "咱是不是还得给你钱？！！",
        showCancel: false,
        confirmText: "不不不不"
      })
    }else{
      wx.redirectTo({
        url: '../wallet/index',
        success: function(res){
          wx.showToast({
            title: "充值成功",
            icon: "success",
            duration: 2000
          })
        }
      })
    }
  },
// 页面销毁，更新本地金额，（累加）
  onUnload:function(){
    wx.getStorage({
      key: 'overage',
      success: (res) => {
        wx.setStorage({
          key: 'overage',
          data: {
            overage: parseInt(this.data.inputValue) + parseInt(res.data.overage)
          }
        })
      },
      // 如果没有本地金额，则设置本地金额
      fail: (res) => {
        wx.setStorage({
          key: 'overage',
          data: {
            overage: parseInt(this.data.inputValue)
          },
        })
      }
    }) 
  }
})