kailin_mp/pages/recruitment/record.vue

<template>
  <view>
    <view class="record_box">
      <view class="to_bottom" v-if="!recordList.length"> -----还没有拉新奖励啦-----</view>
      <view class="record_list">
        <!-- Vue3 项目部分小程序端事件延迟或调用失败 在执行事件的元素上添加 data-eventsync="true" 属性以解决此问题 -->
        <view class="record_item" v-for="(item, index) in recordList" :key="index">
          <view class="item_info">
            <view class="pay_desc">{{ item.username }}注册</view>
            <view class="pay_time">{{ item.insert_time }}</view>
          </view>
          <view class="score">
            <view class="text_red" v-if="item.prize_type == 1">+{{ item.prize }}</view>
            <view class="text_red" v-if="item.prize_type == 2">赠送优惠券</view>
          </view>
        </view>
      </view>
    </view>
    <view class="to_bottom" v-if="isLast"> -----到底啦-----</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 列表
      recordList: [],
      // 请求参数
      requestParam: {
        page: 1,
      },
      // 是否最后一页
      isLast: false,
      // 是否请求中
      isReqing: false,
    };
  },
  onShow() {
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return;
    // 没有数据的话，或者请求中，不允许刷新
    if (this.isReqing) return;
    // 请求参数
    this.requestParam.page = 1;
    // 是否是最后一页
    this.isLast = false;
    // 设置请求中
    this.isReqing = true;
    // 请求
    this.$http.request('api/recruitment/get_record', this.requestParam).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == 'success') {
        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
        this.recordList = re.data.data;
      }
    });
  },
  onPullDownRefresh() {
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return uni.stopPullDownRefresh();
    // 如果请求中，不允许请求，
    if (this.isReqing) return uni.stopPullDownRefresh();
    // 初始化页码为1
    this.requestParam.page = 1;
    // 是否是最后一页
    this.isLast = false;
    // 设置请求中
    this.isReqing = true;
    // 请求列表
    this.$http.request('api/recruitment/get_record', this.requestParam).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == 'success') {
        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
        this.recordList = re.data.data;
      }
    });
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return;
    // 如果页码是0，避免第一页重复
    if (this.requestParam.page < 1) return;
    // 最后一页不再请求
    if (this.isLast) return;
    // 请求中，不再请求
    if (this.isReqing) return;
    // 增加一页
    this.requestParam.page = this.requestParam.page + 1;
    // 设置请求中
    this.isReqing = true;
    // 请求列表
    this.$http.request('api/recruitment/get_record', this.requestParam).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == 'success') {
        // 最后一页
        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
        // 追加数据
        this.recordList.push(...re.data.data);
      }
    });
  },
  methods: {},
};
</script>

<style lang="less">
.record_box {
  display: block;
  overflow: hidden;
  margin: 10rpx auto;
  .record_list {
    display: block;
    overflow: hidden;
    .record_item {
      display: block;
      height: 100rpx;
      margin: 10rpx auto;
      background: #ffffff;
      padding: 0rpx 35rpx;
      .item_info {
        float: left;
        height: 100rpx;
        .pay_desc {
          height: 60rpx;
          color: #666666;
          font-size: 28rpx;
          line-height: 60rpx;
        }
        .pay_time {
          color: #999999;
          height: 40rpx;
          font-size: 24rpx;
          line-height: 40rpx;
        }
      }
      .score {
        float: right;
        height: 100rpx;
        color: forestgreen;
        line-height: 100rpx;
        .text_red {
          color: #f89c33;
        }
      }
    }
  }
}
</style>