dvcp_v2_wxcp_app/library/project/fd/AppAnswer/IntegralDetail.vue

<template>
  <div class="integralDetail">
    <div class="item" v-for="(item, index) in list" :key="index">
      <div class="left">
        <h2>{{ item.changeDesc }}</h2>
        <p>{{ item.createTime }}</p>
      </div>
      <span>+{{ item.changeScore }}</span>
    </div>
    <AiEmpty v-if="!list.length && isMore"></AiEmpty>
  </div>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    appName: '积分明细',
    data () {
      return {
        search: {
          current: 1,
          size: 20
        },
        isMore: false,
        list: []
      }
    },

    computed: {
      ...mapState(['user']),
    },

    mounted () {
      this.getList()
    },

    methods: {
      getList () {
        if (this.isMore) return
        this.$http.post(`/app/applearningquestion/scoreDetail`, null, {
          params: {
            ...this.search,
            sysUserId: this.user.id
          }
        }).then(res => {
          if (res.code == 0) {
            if (this.search.current > 1) {
              this.list = [...this.list, ...res.data.records]
            } else {
              this.list = res.data.records
            }

            uni.hideLoading()

            if (res.data.records.length < 20) {
              this.isMore = true

              return false
            }

            this.search.current = this.search.current + 1
          } else {
            uni.hideLoading()
          }
        }).catch(() => {
          uni.hideLoading()
        })
      }
    },

    onReachBottom () {
      this.current = this.current + 1
      this.getList()
    }
  }
</script>

<style lang="scss" scoped>
  .integralDetail {
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      border-bottom: 1px solid #eee;
      background: #fff;

      &:last-child {
        border-bottom: none;
      }

      h2 {
        line-height: 1;
        margin-bottom: 12px;
        font-size: 34px;
        font-weight: 500;
        font-size: #333;
      }

      p {
        font-size: 28px;
        color: #999;
      }

      span {
        font-size: 36px;
        color: red;
      }
    }
  }
</style>