gdy_app_8/src/view/course/deal/limitRecord.vue

<template>
  <div class="page">
    <van-nav-bar
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>
    <div class="recordContent">
      <scroller
        ref="recordScroller"
        :list="recordList"
        noDataText="没有更多..."
        :on-infinite='getMoreList'
      >
        <div class="recordList">
          <div
            class="recordLi"
            v-for="(item, index) in recordList"
            :key="index"
          >
            <div class="flex-name-num">
              <p>{{ item.subjectName }}</p>
              <span :style="{color:Number(item.amount)>0?'#26A2FF':'red'}">{{Number(item.amount)>0?`+${item.amount}`:item.amount}}</span
              >
            </div>
            <p>{{ item.content }}</p>
            <span>{{ item.createTime }}</span>
          </div>
        </div>
        <noData :list="recordList" />
      </scroller>
    </div>
  </div>
</template>

<script>
import {getCourseRecordList} from '../api'
export default {
  name: "limitRecord",
  components: {},
  props: [],
  data() {
    return {
      noDate:false,
      title: "名额变动明细",
      page:{
        cur:1,
        size:10,
        total:0
      },
      recordList: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 返回
    onClickLeft() {
      this.$router.go(-1);
    },
    //获取记录列表
    getList(done){
      let data = {
        page:this.page.cur,
        pageSize:this.page.size
      }
      getCourseRecordList(data).then(res=>{
        this.recordList = this.recordList.concat(res.list)
        this.page.cur = res.current
        this.page.total = res.total
        if (res.pages == this.page.cur) {
          if (done) done(true);
          this.noDate = true;
        } else {
          if (done) done();
          this.page.cur++; //下拉一次页数+1
          this.noDate = false;
        }
      })
    },
    // 触底加载
    getMoreList(done){
      console.log("到底了")
      if (!this.noDate) {
          setTimeout(() => {
            this.getList(done);
          }, 300);
        } else {
          this.$refs.recordScroller.finishInfinite(true);
        }
    },
  },
  computed: {}
};
</script>
<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
}
img{
  display: block;
}
.page {
  background: #F3F2EE;
  background: linear-gradient(90deg, #F3F2EE, #E7EFF9);
  .recordContent {
    height: calc(100vh - 0.92rem);
    position: relative;
    .recordList {
      // border-top: 0.02rem solid #999;
      // border-bottom: 1px solid #999;
      .recordLi {
        background: #fff;
        padding: 0 0.2rem;
        overflow: hidden;
        &:not(:nth-last-child(1)) {
          border-bottom: 1px solid #efefef;
        }
        .flex-name-num {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 0.1rem;
          & > p {
            font-size: 0.32rem;
            color: #000;
            line-height: 1.5;
          }
          & > span {
            font-size: 0.32rem;
            color: #000;
            line-height: 2;
            margin-left: .1rem;
          }
        }
        & > p {
          font-size: 0.28rem;
          color: #666;
          line-height: 1;
        }
        & > span {
          font-size: 0.28rem;
          color: #666;
          line-height: 1;
          display: block;
          margin-top: 0.2rem;
          margin-bottom: 0.1rem;
        }
      }
    }
  }
}
</style>