saas_manager/pages/commission/index.vue

<template>
  <view class="com-ward">
    <view class="com-ward-list">
      <view
        class="com-ward-list-item u-border-bottom"
        v-for="item in list"
        :key="item.id"
      >
        <view class="fl_b com-ward-list-item-top">
          <image src="../../static/image/icon_com.png" mode="" />
          <view class="title u-line-1"
            >活动名称一行展示，超出省略活动名称一行展示，超出省略...</view
          >
          <view class="money">+{{ item.diffNum }}</view>
        </view>
        <view class="com-ward-list-item-status">
          {{ item.createTime | formate("yyyy-mm-dd hh:mm") }}
        </view>
      </view>
    </view>
    <view class="nomore" v-if="total && list.length == tota">
      "已显示全部"
    </view>
    <view class="nomore" v-if="!total"> 暂无数据 </view>
  </view>
</template>

<script>
import { getCashList } from "@/utils/commission";
export default {
  name: "commission",

  data() {
    return {
      list: [],
      total: 0,
      param: {},
    };
  },
  onShow() {
    this.reset();
    this.getCashList();
  },
  onReachBottom() {
    if (this.list.length >= this.total) {
      return;
    }
    this.param.pageNum++;
    this.getCashList();
  },
  methods: {
    reset() {
      this.actList = [];
      this.param = {
        pageNum: 1,
        pageSize: 10,
      };
    },
    getCashList() {
      getCashList(this.param).then((res) => {
        this.list.push(...res.rows);
        this.total = res.total;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #ffffff;
  padding: 20rpx 40rpx 0;
}
.com-ward {
  .com-ward-list {
    .com-ward-list-item {
      margin-top: 40rpx;
      .com-ward-list-item-top {
        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 14rpx;
          padding-top: 4rpx;
        }
        .title {
          flex: 1;
          font-weight: bold;
          color: #24263d;
          font-size: 32rpx;
        }
        .money {
          width: 160rpx;
          color: #eb5757;
          font-size: 36rpx;
          font-weight: 500;
          text-align: right;
        }
      }
      .com-ward-list-item-status {
        margin: 24rpx 0 40rpx;
        color: #7e7d83;
        font-size: 28rpx;
        padding-left: 44rpx;
      }
    }
  }
}
</style>