OfficeApp/subpkg/topUpList/topUpList.vue

<template>
  <view class="">
    <view class="list">
      <view class="card" v-for="(item, index) in list" :key="index">
        <view class="top">
          <view class="tips">余额充值</view>
          <view>充值日期：{{item.create_time}}</view>
        </view>
        <view class="bottom">
          <view class="left">
            <view>充值金额(元)</view>
            <view class="num">{{item.order_amount}}</view>
          </view>
          <view class="right">
            <view>备注:</view>
            <view>{{item.tips}}</view>
          </view>
        </view>
      </view>
    </view>
    <u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText" :loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />    
  </view>
</template>

<script>
import {rechargeLists} from "@/api/pay.js"
export default {
  data() {
    return {
      list:[],
       loadConfig:{
         page: 1,
         limit: 15,
         loadingText: '努力加载中',
         loadmoreText: '轻轻上拉',
         nomoreText: '没有更多记录了~~',
         status: 'loadmore'
       },
    }
  },
  onLoad() {
    this.loadList();
  },
  onShow() {},
  onReachBottom() {
    this.loadList()
  },
  methods: {
    async loadList(){
      if(this.loadConfig.status=="nomore")return;
      this.loadConfig.status="loading"
      let res = await rechargeLists({
        page_no: this.loadConfig.page,
        page_size: this.loadConfig.limit
      });
      this.loadConfig.status="loadmore"
      if(res.data.lists.length<this.loadConfig.limit){
        this.loadConfig.status="nomore"
      }else {
        this.loadConfig.page++;
      }
      this.list = [...this.list, ...res.data.lists];
    }
  },
  onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
.list{
    // background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 28rpx;
    .card{
      padding: 28rpx;
      width: 694rpx;
      background-color: #fff;
      margin-bottom: 21rpx;
      .top{
        display: flex;
        align-items: center;
        font-size: 25rpx;
        font-weight: 400;
        color: #333333FF;
        line-height: 39rpx;
        .tips{
          width: 137rpx;
          height: 49rpx;
          background: $theme-oa-color;
          border-radius: 26rpx 26rpx 26rpx 26rpx;
          font-size: 25rpx;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 39rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 28rpx;
        }
        // .pass{
        //   background-color: #FF8C1A;
        // }
        // .no_pass{
        //   background-color: #F02828;
        // }
        // .ok{
        //   background-color: #47B347;
        // }
      }
      .bottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 160rpx;
        .left{
          flex: 1;
          text-align: center;
          font-size: 25rpx;
          font-weight: 400;
          color: #666666;
          line-height: 39rpx;
          .num{
            font-size: 39rpx;
            font-weight: 500;
            color: #F02828;
            line-height: 39rpx;
          }
        }
        .right{
          flex: 1;
          font-size: 25rpx;
          font-weight: 400;
          color: #666666;
          line-height: 39rpx;
        }
      }
    }
  }
</style>