完成简易版的充值和充值记录查询页面，简单的我的页面

pages/recharge/index.js

@@ -0,0 +1,110 @@
+import { getGlobalData, showModal } from "../../utils/index";
+
+// pages/recharge/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    code: "",
+    money: 0,
+    moneyIndex: -1,
+    primaryColor: getGlobalData().primaryColor,
+    codes: ['105465640', '46845132', '1645468'],
+    defaultMoneyArray: [100, 200, 500, 1000, 2000],
+    customFlag: false,
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+  chooseMoney(e) {
+    const { money, index } = e.currentTarget.dataset;
+    console.log('index', index, typeof index)
+    this.setData({
+      money,
+      moneyIndex: Number(index),
+      customFlag: false,
+    });
+  },
+  onChangeCode(e) {
+    const { codes } = this.data;
+    const index = Number(e.detail.value);
+    this.setData({
+      code: codes[index]
+    })
+  },
+  custom() {
+    this.setData({
+      moneyIndex: -1,
+      customFlag: true,
+    })
+  },
+  onChangeCustomMoney(e) {
+    console.log('onChangeCustomMoney', e)
+    const money = e.detail.value;
+    this.setData({
+      money: money,
+    })
+  },
+  async recharge() {
+    const { code, money } = this.data;
+    const confirmResult = await showModal({ title: "充值确认", content: `确认充值表号为${code}的表计${money}元吗？` });
+    if (!confirmResult) {
+      return;
+    }
+    console.log('确认')
+  },
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/recharge/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "navigator": "/components/navigator/index"
+  }
+}

pages/recharge/index.wxml

@@ -0,0 +1,23 @@
+<!--pages/recharge/index.wxml-->
+<navigator title="充值" />
+<view class="wrapper">
+  <view class="chooseMeter">
+    充值表号
+    <view class="selectMeter">
+      <picker bindchange="onChangeCode" value="{{index}}" range="{{codes}}">
+        <view class="picker">
+          <view class="input border" wx:if="{{code}}">{{code}}</view>
+          <view class="input border" style="color: rgb(116, 109, 109)" wx:else>请选择</view>
+        </view>
+      </picker>
+    </view>
+  </view>
+  <view class="moneyBoxs">
+    <view wx:for="{{defaultMoneyArray}}" class="moneyBox border radius12" style="background-color: {{moneyIndex === index ? primaryColor : ''}};" bind:tap="chooseMoney" data-money="{{item}}" data-index="{{index}}"> {{item}} </view>
+    <view class="moneyBox border radius12" bind:tap="custom"> 自定义 </view>
+  </view>
+    <view class="customInput border radius12" wx:if="{{customFlag}}" > <input type="number" focus placeholder="请输入要充值的金额"	bindinput="onChangeCustomMoney"/> </view>
+  <view class="operate">
+    <button type="primary" bind:tap="recharge" disabled="{{!code || !money}}"> 充值 </button>
+  </view>
+</view>

pages/recharge/index.wxss

@@ -0,0 +1,44 @@
+/* pages/recharge/index.wxss */
+.moneyBoxs {
+  margin-top: 32rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.moneyBox {
+  width: 30%;
+  height: 140rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 24rpx;
+}
+
+.chooseMeter {
+  display: flex;
+  align-items: center;
+  margin-top: 10rpx;
+}
+
+.selectMeter {
+  margin-left: 24rpx;
+}
+
+.operate {
+  margin-top: 24rpx;
+}
+
+.input {
+  height: 40rpx;
+  width: 400rpx;
+  line-height: 40rpx;
+  border-radius: 20rpx;
+  padding: 12rpx 14rpx 16rpx;
+  /* border: 1rpx solid #ccc; */
+}
+
+.customInput {
+  padding: 16rpx 24rpx;
+}