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

pages/home/index.js

@@ -0,0 +1,66 @@
+// pages/home/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/home/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/home/index.wxml

@@ -0,0 +1,2 @@
+<!--pages/home/index.wxml-->
+111111111111111

pages/home/index.wxss

@@ -0,0 +1 @@
+/* pages/home/index.wxss */

pages/index/index.js

@@ -1,10 +1,44 @@
+import { throttle } from "../../utils/index"
 
 Page({
   data: {
     motto: 'Hello World',
-
+    num: 1,
+    staffA: {firstName: 'Hulk', lastName: 'Hu'},
+    staffB: {firstName: 'Shang', lastName: 'You'},
+    staffC: {firstName: 'Gideon', lastName: 'Lin'}
+  },
+  onLoad() {
+    console.log('---', this.renderer)
   },
   onShow() {
 
+  },
+  test: throttle(function() {
+    console.log('test',  this.data.motto)
+  }, 500),
+  payment: function() {
+    wx.requestPayment({
+      timeStamp: `${Date.now()}`,
+      nonceStr: 'qwertyuiop',
+      package: 'prepay_id=111',
+      signType: 'MD5',
+      paySign: '11',
+      success (res) {
+        console.log('success', res);
+      },
+      fail (res) {
+        console.log('res', res)
+      }
+    })
+  },
+  kefu(e) {
+    console.log('e', e);
+  },
+  increment() {
+    // this.data.num = this.data.num +=1 ;
+    this.setData({
+      num: this.data.num + 1
+    })
   }
 })

pages/index/index.json

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

pages/index/index.wxml

@@ -1,6 +1,11 @@
 <!--index.wxml-->
-<scroll-view class="scrollarea" scroll-y type="list">
-  <view class="usermotto">
-      <text class="user-motto">{{motto}}</text>
-    </view>
-</scroll-view>
+<!-- <scroll-view class="scrollarea" scroll-y type="list">
+  <view class="usermotto" bind:tap="payment">
+    支付
+  </view>
+  <button open-type="contact" bindcontact="kefu"> 客服 </button>
+  {{num}}
+  <button bindtap="increment"> 增加 </button>
+</scroll-view> -->
+<navigator title="充值" />
+

pages/index/index.wxss

@@ -3,61 +3,10 @@ page {
   height: 100vh;
   display: flex;
   flex-direction: column;
-}
-.scrollarea {
-  flex: 1;
-  overflow-y: hidden;
-}
-
-.userinfo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #aaa;
-  width: 80%;
-}
-
-.userinfo-avatar {
   overflow: hidden;
-  width: 128rpx;
-  height: 128rpx;
-  margin: 20rpx;
-  border-radius: 50%;
 }
 
 .usermotto {
   margin-top: 200px;
   text-align: center;
 }
-
-.avatar-wrapper {
-  padding: 0;
-  width: 56px !important;
-  border-radius: 8px;
-  margin-top: 40px;
-  margin-bottom: 40px;
-}
-
-.avatar {
-  display: block;
-  width: 56px;
-  height: 56px;
-}
-
-.nickname-wrapper {
-  display: flex;
-  width: 100%;
-  padding: 16px;
-  box-sizing: border-box;
-  border-top: .5px solid rgba(0, 0, 0, 0.1);
-  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
-  color: black;
-}
-
-.nickname-label {
-  width: 105px;
-}
-
-.nickname-input {
-  flex: 1;
-}

pages/login/index.js

@@ -0,0 +1,66 @@
+// pages/login/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/login/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/login/index.wxml

@@ -0,0 +1,4 @@
+<!--pages/login/index.wxml-->
+<view class="content">
+
+</view>

pages/login/index.wxss

@@ -0,0 +1,13 @@
+/* pages/login/index.wxss */
+.content {
+  width: 600rpx;
+  height: 500rpx;
+  background-color: #fff;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  padding: 20rpx 24rpx;
+}

pages/meterList/index.js

@@ -0,0 +1,66 @@
+// pages/meterList/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/meterList/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/meterList/index.wxml

@@ -0,0 +1,2 @@
+<!--pages/meterList/index.wxml-->
+<text>pages/meterList/index.wxml</text>

pages/meterList/index.wxss

@@ -0,0 +1 @@
+/* pages/meterList/index.wxss */

pages/my/index.js

@@ -0,0 +1,70 @@
+// pages/my/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+  jumpToQuestions() {
+    wx.navigateTo({
+      url: '/pages/questions/index',
+    })
+  },
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/my/index.json

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

pages/my/index.wxml

@@ -0,0 +1,4 @@
+<!--pages/my/index.wxml-->
+<navigator title="我的" />
+<cell open-type="contact" title="联系客服" borderBottom="{{true}}" />
+<cell  title="常见问题" bind:click="jumpToQuestions" />

pages/my/index.wxss

@@ -0,0 +1 @@
+/* pages/my/index.wxss */

pages/questions/index.js

@@ -0,0 +1,66 @@
+// pages/questions/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/questions/index.json

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

pages/questions/index.wxml

@@ -0,0 +1,2 @@
+<!--pages/questions/index.wxml-->
+<navigator title="常见问题" canBack="{{true}}" />

pages/questions/index.wxss

@@ -0,0 +1 @@
+/* pages/questions/index.wxss */

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;
+}

pages/rechargeRecord/index.js

@@ -0,0 +1,93 @@
+import { getYears } from "../../utils/index";
+
+// pages/rechargeRecord/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    year: new Date().getFullYear(),
+    month: new Date().getMonth() + 1,
+    years: getYears(),
+    list: [
+      { code: '165146513', money: 100, time: "2024-02-20 18:56:15" },
+      { code: '466541651', money: 200, time: "2024-02-28 18:56:15" },
+      { code: '165146513', money: 100, time: "2024-02-20 18:56:15" },
+      { code: '466541651', money: 200, time: "2024-02-28 18:56:15" },
+      { code: '165146513', money: 100, time: "2024-02-20 18:56:15" },
+      { code: '466541651', money: 200, time: "2024-02-28 18:56:15" },
+      { code: '165146513', money: 100, time: "2024-02-20 18:56:15" },
+      { code: '466541651', money: 200, time: "2024-02-28 18:56:15" },
+      { code: '165146513', money: 100, time: "2024-02-20 18:56:15" },
+      { code: '466541651', money: 200, time: "2024-02-28 18:56:15" },
+      { code: '165146513', money: 100, time: "2024-02-20 18:56:15" },
+      { code: '466541651', money: 200, time: "2024-02-28 18:56:15" },
+      { code: '165146513', money: 100, time: "2024-02-20 18:56:15" },
+      { code: '466541651', money: 200, time: "2024-02-28 18:56:15" },
+      { code: '165146513', money: 100, time: "2024-02-20 18:56:15" },
+      { code: '466541651', money: 200, time: "2024-02-28 18:56:15" }
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+  onChangeYear(e) {
+    const { years } = this.data;
+    this.setData({
+      year: years[Number(e.detail.value)]
+    })
+  },
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/rechargeRecord/index.json

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

pages/rechargeRecord/index.wxml

@@ -0,0 +1,25 @@
+<!--pages/rechargeRecord/index.wxml-->
+<scrollPageWrapper>
+  <navigator title="充值记录" />
+  <scroll-view type="list" scroll-y style="display: flex; flex-direction: column; flex: 1; width: 100%; overflow: auto;">
+    <view class="wrapper" list-item>
+      <view>
+        <picker bindchange="onChangeYear" value="{{index}}" range="{{years}}">
+          <view class="yearPicker">
+            {{ year }}年
+            <image src="/assets/images/down.png" mode="" class="down" />
+          </view>
+        </picker>
+      </view>
+      <view class="recordsWrapper">
+        <view class="recordsItem border" wx:for="{{list}}">
+          <view class="codeTime">
+            <view class="code"> 表号：{{ item.code }} </view>
+            <view class="time"> {{ item.time }} </view>
+          </view>
+          <view class="money"> {{ item.money }} </view>
+        </view>
+      </view>
+    </view>
+  </scroll-view>
+</scrollPageWrapper>

pages/rechargeRecord/index.wxss

@@ -0,0 +1,48 @@
+/* pages/rechargeRecord/index.wxss */
+.yearPicker {
+  display: flex;
+  align-items: center;
+}
+
+.down {
+  width: 32rpx;
+  height: 32rpx;
+  margin-left: 10rpx;
+}
+
+.recordsWrapper {
+  background-color: white;
+  margin-top: 24rpx;
+  border-radius: 6rpx;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+.recordsItem {
+  display: flex;
+  justify-content: space-between;
+  padding: 16rpx 20rpx;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+}
+.recordsItem:last-child {
+  border-bottom: 0;
+}
+.code {
+  font-size: 36rpx;
+}
+.time {
+  margin-top: 16rpx;
+  font-size: 28rpx;
+}
+.money {
+  font-size: 42rpx;
+  font-weight: 600;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}