添加充值记录界面

zuoxiao

2024-03-01 bffad7ed501df27ed84432c693a9707e045bff71

添加充值记录界面

添加充值记录界面

 app.json

@@ -1,6 +1,6 @@
{
  "pages": [
 
    "pages/rechargeList/rechargeList",
    "pages/wallet/wallet",
    "pages/home/home",
    "pages/login/login",
@@ -21,7 +21,8 @@
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#2D8BF7",
    "list": [{
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/images/home_grey.png",
@@ -32,7 +33,6 @@
        "text": "电子钱包",
        "iconPath": "/images/wallet_grey.png",
        "selectedIconPath": "/images/wallet_blue.png"

      },
      {
        "pagePath": "pages/my/my",

 pages/recharge/recharge.js

@@ -22,7 +22,11 @@
    }

  },

  moveToRechargeList:function(e){
    wx.navigateTo({
      url: '/pages/rechargeList/rechargeList'
    })
  },




 pages/recharge/recharge.wxml

@@ -63,7 +63,7 @@
  <text >充值</text>
  </view>
  <view class="rechageList-view">
  <text class="rechageList">充值记录</text>
  <text class="rechageList" bind:tap="moveToRechargeList">充值记录</text>
  </view>
</view>


 pages/rechargeList/rechargeList.js

New file
@@ -0,0 +1,109 @@
// pages/rechargeList/rechargeList.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    listData: [{
        orderNumber: "25425154351",
        time: "2024-01-14 15:34:25",
        state: "付款成功",
        money: "200"
      },
      {
        orderNumber: "25425154351",
        time: "2024-01-14 15:34:25",
        state: "付款成功",
        money: "200"
      }, {
        orderNumber: "25425154351",
        time: "2024-01-14 15:34:25",
        state: "付款成功",
        money: "200"
      }, {
        orderNumber: "25425154351",
        time: "2024-01-14 15:34:25",
        state: "付款成功",
        money: "200"
      }, {
        orderNumber: "25425154351",
        time: "2024-01-14 15:34:25",
        state: "付款成功",
        money: "200"
      }, {
        orderNumber: "25425154351",
        time: "2024-01-14 15:34:25",
        state: "付款成功",
        money: "200"
      }, {
        orderNumber: "25425154351",
        time: "2024-01-14 15:34:25",
        state: "付款成功",
        money: "200"
      }
    ],
    array: ['选项1', '选项2', '选项3', '选项4'],
    index: 0
  },
  bindPickerChange: function (e) {
    this.setData({
      index: e.detail.value
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

 pages/rechargeList/rechargeList.json

New file
@@ -0,0 +1,4 @@
{
  "navigationBarTitleText": "充值记录",
  "navigationBarTextStyle": "white"
}

 pages/rechargeList/rechargeList.wxml

New file
@@ -0,0 +1,40 @@
<!--pages/rechargeList/rechargeList.wxml-->
<view class="base-wrapper">
<view>
  <picker mode="selector" range="{{array}}" bindchange="bindPickerChange">
    <view class="picker">
      当前选择：{{array[index]}}
    </view>
  </picker>


</view>
<scroll-view class="scroll-view" scroll-y="true">
    <view class="scroll-bg">
      <view class="list-item" wx:for="{{listData}}" wx:for-item="item" wx:for-index="index">
        <view>
          <view class="order-code">
            <text>订单编号：</text>
            <text>{{item.orderNumber}}</text>
          </view>
          <view>
            <text class="order-time">{{item.time}}</text>
          </view>

        </view>
        <view class="order-right">
          <view class="money-wrapper">
            <text>{{item.money}}</text>
            <text>元</text>
          </view>
          <text class="order-state">{{item.state}}</text>
        </view>
      </view>
    </view>
  </scroll-view>



</view>



 pages/rechargeList/rechargeList.wxss

New file
@@ -0,0 +1,60 @@

.base-wrapper {
  background-color: #f5f5f5;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  /* 防止底部区域滚动 */
  display: flex;
  flex-direction: column;
}


.list-item {
  background-color: #fff;
  margin-top: 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 30rpx;
  padding-right: 30rpx;
  padding-top: 40rpx;
  padding-bottom: 40rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
}

.scroll-view {
  margin-top: 30rpx;
  flex: 1;
  overflow-y: auto;
  /* 允许垂直滚动 */
  z-index: 0;
}

.order-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.money-wrapper text {
  font-size: 50rpx;
  color: #1890FF;
}

.order-state {
  font-size: 30rpx;
  color: #000000;
  opacity: 0.7;
  
}
.order-code text{
  font-size: 35rpx;
  color: #000000;
}
.order-time{
  font-size: 35rpx;
  color: #000000;
  opacity: 0.7;
}

 pages/wallet/wallet.js

@@ -43,8 +43,6 @@
        state: "付款成功",
        money: "200"
      }


    ]
  },