gdy_app_8/src/attendance/view/AttendanceNew/Reword.vue

<template>
  <div class="AttendanceEvent">
    <van-nav-bar :title="headTie($route.query.type)" left-text="返回" left-arrow @click-left="$route_back" />
    <!-- 奖扣页面 -->
    <!-- <div class="headerWrapper">
      <img src="static/images/head_default.png" class="avatar" alt />
      <div class="info">
        <div class="name">范奎奎</div>
        <div class="dept">技术部</div>
      </div>
      <div class="detail">
        <div class="point">-20分</div>
        <div class="desc">迟到2次，共20分钟</div>
      </div>
    </div> -->
    <scroller :onInfinite="loadMore" ref="list_scroller" :refreshText="'下拉刷新'" :noDataText="'已经到底了'" :onRefresh="loadTop" class="scrollAll">
      <event-item :list="list"></event-item>
      <div style="padding-bottom: 1.5rem;"></div>
    </scroller>
  </div>
</template>

<script>
import EventItem from '@/attendance/components/EventItem';
export default {
  components: {
    EventItem
  },
  data() {
    return {
      list: [],
      page: 0,
      page_size: 10
    };
  },
  computed: {
    type() {
      return this.$route.query.type;
    }
  },
  methods: {
    headTie(type) {
      switch (type) {
        case 6:
          return '考勤奖分';
          break;
        case 7:
          return '考勤扣分';
          break;
        default:
          return '考勤';
      }
    },
    loadMore(done) {
      if (!this.enabledLoadpage2) {
        done();
        return false;
      }
      let self = this;
      self.page += 1;
      self.lodData();
    },

    loadTop(done) {
      let self = this;
      self.page = 0;
      self.enabledLoadpage2 = false;
      self.list = [];
      self.lodData();
    },

    lodData() {
      let self = this;
      self.loading = true;
      let params = {};
      params.page = this.page;
      params.page_size = this.page_size;
      params.type = this.type;
      this.$axiosKq('post', '/ad/statistics/employee/reward_deduction_event', params).then(res => {
        if (res.data.code == 1) {
          if (this.page == 0) {
            self.list = [];
          }
          self.list = self.list.concat(res.data.data.list);
        }
        setTimeout(function() {
          self.$refs.list_scroller.finishPullToRefresh();
        }, 500);
        if (res.data.data.list.length < 10) self.$refs.list_scroller.finishInfinite(res.data.data.list.length < 10);
        self.loading = false;
        self.$toast.clear();
        self.$nextTick(() => {
          self.enabledLoadpage2 = true;
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.AttendanceEvent {
  background-color: #f5f7fa;
  .headerWrapper {
    display: flex;
    align-items: center;
    background-color: #fff;
    margin-bottom: 0.24rem;
    .avatar {
      width: 0.84rem;
      height: 0.84rem;
      border-right: 0.42rem;
      margin: 0.18rem 0.14rem 0.18rem 0.32rem;
    }
    .info {
      .name {
        font-size: 0.32rem;
        color: rgba(48, 49, 51, 1);
        line-height: 0.44rem;
      }
      .dept {
        font-size: 0.28rem;
        color: rgba(144, 147, 153, 1);
        line-height: 0.4rem;
        margin-top: 0.04rem;
      }
    }
    .detail {
      margin: 0 0.32rem 0 auto;
      .point {
        font-size: 0.32rem;
        color: #f56c6c;
        line-height: 0.44rem;
        text-align: right;
      }
      .desc {
        font-size: 0.28rem;
        color: rgba(144, 147, 153, 1);
        line-height: 0.4rem;
        margin-top: 0.04rem;
      }
    }
  }
}
.scrollAll {
  position: relative !important;
  height: calc(100% - 0.96rem) !important;
}
</style>