bnyer-cloud-tiktok/pages/userInfo/goldNum/goldNumLog.vue

<template>
  <view>
    <view class="content">
      <view>
		   <uni-list border-full v-for="(item, index) in goldNumLog" :key="index">
		    <uni-list-item :title="item.reason" :note="item.createTime" :rightText="item.goldNum">
		     </uni-list-item>
		   </uni-list>
		   <!-- 显示加载中或者全部加载完成 -->
		   <view>
		     <uni-load-more :status="loadStatus"></uni-load-more>
		   </view>
      </view>
    </view>
  </view>
</template>

<script>
import { queryGoldLogPage } from "@/api/paint.js";
export default {
  data() {
    return {
      goldNumLog: [],
      userInfo: {},
      pageSize: 10,
      pageNum: 1,
      loadStatus:'noMore',  //加载样式：more - 加载前样式，loading - 加载中样式，noMore - 没有数据样式
      isLoadMore:false,  //是否加载中
    };
  },
  created() {
  	if (!this.userInfo) {
  		uni.navigateBack()
  		uni.showToast({
  			title: '请先登录',
  			icon: 'none'
  		})
  	}
	this.userInfo = uni.getStorageSync('userInfo')
	this.queryGoldLogPage();
  },
  // 下拉刷新
 //  onPullDownRefresh() {
	// this.pageNum = 1;
	// this.goldNumLog = [];
	// this.queryGoldLogPage(); 
	// uni.stopPullDownRefresh();  
 //  },
  // 上划加载更多
  onReachBottom() {//上拉触底函数
    if(!this.isLoadMore) {  //此处判断，上锁，防止重复请求
      this.isLoadMore=true
      if (this.loadStatus === "more") {
        this.pageNum += 1  //每次上拉请求新的一页
        this.queryGoldLogPage();
      }
    }
  },
  methods: {
	  //获取画意值记录分页
	  async queryGoldLogPage() {
	  	let that = this;
	  	const data = {
	  		userId: that.userInfo.id,
	  		source: 1, //1代表抖音
			pageNum: that.pageNum,
			pageSize: that.pageSize
	  	}
	   const res = await queryGoldLogPage(data);
	   console.log('画意值记录===', res);
	   if (res && res.data.code === 200) {
	  	 that.goldNumLog.push(...res.data.rows)
		 if(res.data.rows.length < that.pageSize){  //判断接口返回数据量小于请求数据量，则表示此为最后一页
		   that.isLoadMore = true
		   that.loadStatus = 'noMore'
		 }else{
		   this.loadStatus = 'more';
		   that.isLoadMore = false
		 }
	   }
	   else {
	   	// uni.showModal({
	   	// 	content: '网络错误，请稍后再试~',
	   	// 	showCancel: false
	   	// });
		that.isLoadMore = false
		if(that.page > 1){
		  that.page -= 1
		}
	   }
	  },
  },
};
</script>

<style lang="scss">
page {
  height: 100vh;
  background-color: $uni-bg-color;
}
</style>
<style lang="scss" scoped>
.content {
  padding-top: 88rpx;
  width: 670rpx;
  margin: 0 auto;

  ::v-deep .uni-list {
    background: $uni-primary !important;
    margin-bottom: 20rpx;
    border-radius: 24rpx;
    overflow: hidden;
  }

  ::v-deep .uni-list-item {
    background: $uni-primary !important;
  }

  ::v-deep .uni-list--border-top {
    display: none !important;
  }
  ::v-deep .uni-list--border-bottom {
    display: none !important;
  }

  ::v-deep .uni-list-item__container {
    padding: 20rpx !important;
  }

  ::v-deep .uni-list-item__content-title {
    color: $uni-white !important;
  }

  ::v-deep .uni-list-item__content-note {
    color: $uni-white !important;
  }
  
  ::v-deep .uni-list-item__extra-text {
     color: $uni-white !important;
   }
 
}
</style>