Client-Teapay/src/pages/accountDetails/topup.vue

<template>
  <view class="container">
    <!-- 明细列表 -->
    <view class="list" v-for="(item, index) in list" :key="index">
      <view class="list_head flex_r flex_ac flex_jb">
        <view class="head_name">充值</view>
        <view class="head_price">{{ item.amount }}</view>
        <!-- <view class="head_price">{{item.balance}}</view> -->
      </view>
      <view class="list_con flex_r flex_ac flex_jb">
        <view class="list_time">{{ item.create_time }}</view>
        <view class="list_balance">{{ item.remark }}</view>
      </view>
    </view>
    <!-- 明细列表-end -->
    <not-goods v-if="haveGoods" textStr="暂无充值信息"></not-goods>
  </view>
</template>
<script>
let page = 1;
let app = getApp();
var appEv = app.$vm.$options;
// let reqApi = new ReqApi();
// import { ReqApi } from "@/utils/reqTools.js";
import { get, post, u_post } from "@/request/api.js";
import notGoods from "@/components/not-goods/index.vue";
export default {
  components: {
    notGoods,
  },
  data() {
    return {
      haveGoods: false, // 是否有商品
      list: [], // 明细列表
      page: 1,
    };
  },
  onShow: function () {
    this.page = 1;
    this.loadData();
  },
  methods: {
    loadData: function () {
      let that = this;
      let data = {
        page: page,
        rows:20
      };
      uni.showLoading({ mask: true });
      post("/my/recharge", data).then((res) => {
        uni.hideLoading();
        if (res.code === 0) {
          if (res.data.data.data.length > 0) {
            this.list = this.list.concat(res.data.data.data);
          } else {
            if (this.page == 1) {
              this.haveGoods = true;
              this.page = -1;
            } else {
              this.page = -1;
              appEv.errTips("暂无更多");
            }
          }
        } else {
          if (page == 1) {
            this.haveGoods = true;
            this.page = -1;
          } else {
            this.page = -1;
            appEv.errTips("暂无更多");
          }
        }
      });
    },
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if (this.page != -1) {
      setTimeout(function () {
        ++this.page;
        this.loadData();
      }, 800);
    }
  },
};
</script>
<style lang="scss">
// 页面配置
.container {
  border-top: 16rpx solid #f4f4f4;
}

// 页面配置-end

// 明细列表
.list_con {
  width: 100%;
  overflow: hidden;
}

.list_head {
  width: 100%;
  overflow: hidden;
}

.list_time {
  font-size: 24rpx;
  color: #a1a1a1;
}

.list_balance {
  font-size: 24rpx;
  color: #a1a1a1;
}

.head_name {
  font-size: 30rpx;
  color: #212121;
  font-family: "SourceHanSansCN-Medium";
}

.head_price {
  font-size: 32rpx;
  color: #18bb87;
  font-family: "SourceHanSansCN-Medium";
}

.list {
  width: 100%;
  overflow: hidden;
  padding: 30rpx;
  box-sizing: border-box;
  border-bottom: 3rpx solid #f4f4f4;
}

// 明细列表-end
</style>