电子钱包界面

zuoxiao

2024-02-28 76b111b85a391306e17d33187a594c94e0de1f41

电子钱包界面

电子钱包界面

 pages/wallet/wallet.js

@@ -5,8 +5,47 @@
   * 页面的初始数据
   */
  data: {
   balance:12,
   listData:[{orderNumber:"25425154351"}]
    balance: 12,
    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"
      }


    ]
  },

  /**

 pages/wallet/wallet.wxml

@@ -20,19 +20,27 @@
    </view>
  </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">
      <text>订单编号：</text>
      <text>{{item.orderNumber}}</text>
      <view class="list-item-piping">
        <image src="/images/piping.png"></image>
        <text>{{item.code}}</text>
      </view>
      <view>
        <t-switch bindchange="handleChange" value="{{defaultVal}}" label="{{['开', '关']}}" slot="note" />
    <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>
  </view>
  </scroll-view>

</view>

 pages/wallet/wallet.wxss

@@ -3,6 +3,12 @@

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

.top-wrapper {
@@ -19,22 +25,24 @@
}


.top-one{
.top-one {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 20vh;
}
.top-wallet-bg{
 width: 40%;
 height: 100%;

.top-wallet-bg {
  width: 40%;
  height: 100%;
}
.top-wallet-bg image{

.top-wallet-bg image {
  width: 100%;
  height: 100%;
}

.top-money-button{
.top-money-button {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
@@ -43,14 +51,14 @@



.top-wrapper-button{
.top-wrapper-button {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-right: 30rpx;
}

.button-refund{
.button-refund {
  font-size: 35rpx;
  border-radius: 90px;
  width: 30%;
@@ -58,13 +66,15 @@
  display: flex;
  align-items: center;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  padding-bottom: 15rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  justify-content: center;
  text-align: center;
  color: #fff;
}
.button-recharge{

.button-recharge {
  color: #000;
  font-size: 35rpx;
  border-radius: 90px;
@@ -78,4 +88,53 @@
  padding-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}

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