uniAppXCX/pages/integralRecord/integralRecord.vue

<template>
  <view class="container">
    <view class="massage" v-for="(item, index) in list">
      <!-- <view class="time">
        {{ item.createTime }}
      </view> -->
      <view class="info">
        <view class="title row">
          <span>{{ item.eventDesc }}</span>
          <span>{{ item.inOut == 1 ? '+' : '-' }}{{ item.integral }}</span>
        </view>
        <view class="text row">
          <span>{{ item.createTime }}</span>
          <!-- <span>积分余额：{{ 5 }}</span> -->
        </view>
      </view>
    </view>
    <uni-load-more
      v-if="list.length > 0"
      :status="loadMore"
      @clickLoadMore="load"
      :contentText="contentText"
    ></uni-load-more>
    <noData v-else />
  </view>
</template>

<script>
import noData from '@/component/noData.vue'
import { integralListApi } from '@/api/integralRecord.js'
export default {
  components: {
    noData,
  },
  data() {
    return {
      value: 1,
      // more/loading/noMore
      loadMore: 'more',
      contentText: {
        contentdown: '点击加载更多',
      },
      params: {
        limit: 10,
        page: 1,
      },
      list: [],
    }
  },
  onShow() {
    this.getList()
  },
  methods: {
    load() {
      if (this.loadMore == 'more') {
        this.params.page += 1
        this.getList()
      }
    },
    getList() {
      this.loadMore = 'loading'
      integralListApi(this.params).then(res => {
        this.list.push(...res.data.list)
        // 判断是否还有更多数据
        let listNum = this.params.limit * this.params.page
        let total = res.data.total
        if (total > listNum) {
          this.loadMore = 'more'
        } else {
          this.loadMore = 'noMore'
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  height: 100vh;

  .massage {
    margin: 10rpx 20rpx;

    .time {
      font-size: 24rpx;
      padding: 12rpx 0;
      text-align: center;
    }

    .info {
      background: #fff;
      border-radius: 10rpx;
      padding: 20rpx;

      .row {
        display: flex;
        justify-content: space-between;
      }

      .title {
        font-size: 32rpx;
        // font-weight: 600;
        padding: 10rpx 0;
      }

      .text {
        font-size: 24rpx;
        color: #9999;
      }
    }
  }
}
</style>