kxmall-ui/kxmall-app-ui/pages/user/promotion/CommissionDetails.vue

<template>
  <view class="commission-details">
    <!-- 头部背景 -->
    <view class="promoterHeader bg-color-red">
      <view class="headerCon acea-row row-between-wrapper">
        <view>
          <view class="name">佣金明细</view>
          <view class="money">
            ￥<text class="num">{{ commission }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="sign-record">
      <view class="list">
        <view class="item" v-for="(item, infoIndex) in info" :key="infoIndex">
          <view class="data">{{ item.createTime }}</view>
          <view class="listn">
            <view class="itemn acea-row row-between-wrapper">
              <view>
                <view class="name line1">{{ item.title }}</view>
                <view>{{ item.createTime }}</view>
              </view>
              <view class="num" v-if="item.pm == 1">+{{ item.number }}</view>
              <view class="num font-color-red" v-if="item.pm == 0">-{{ item.number }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CommissionDetails',
  data: function () {
    return {
      info: [],
      commission: 0,
      where: {
        page: 1,
        limit: 15,
      },
      loaded: false,
      loading: false,
    }
  },
  mounted: function () {
    this.getCommission()
    this.getIndex()
  },
  onReachBottom() {
    !this.loading && this.getIndex()
  },
  methods: {
    getIndex: function () {
      let that = this
      if (that.loaded || that.loading) return
      that.loading = true
      uni.showLoading({
        title: '加载中...'
      })
      this.$api.request('get', 'app/userBill/spread/commission/3', that.where).then(
          (res) => {
            uni.hideLoading()
            that.loading = false
            that.info.push.apply(that.info, res.rows)
            that.loaded = res.rows.length < that.where.limit
            that.loadTitle = that.loaded ? '人家是有底线的' : '上拉加载更多'
            that.where.page = that.where.page + 1
          },
          (err) => {
            uni.hideLoading()
            uni.showToast({
              title: err.msg || err.response.data.msg || err.response.data.message,
              icon: 'none',
              duration: 2000,
            })
          },
          300
      )
    },
    getCommission: function () {
      let that = this
      this.$api.request('get', 'app/userBill/commission').then(
          (res) => {
            that.commission = res.data.commissionCount
          },
          (err) => {
            uni.showToast({
              title: err.msg || err.response.data.msg || err.response.data.message,
              icon: 'none',
              duration: 2000,
            })
          }
      )
    },
  }
}
</script>

<style lang="less">
.commission-details {
  .promoterHeader {
    background-image: url('https://kxmalls.oss-cn-hangzhou.aliyuncs.com/bg/bg.png');
    background-repeat: no-repeat;
    background-size: 100% 80%;
    width: 100%;
    height: 300rpx;
    padding: 0 50rpx;
    box-sizing: border-box;
    color: #fff;

    .headerCon {
      padding: 50rpx 0;

      .name {
        font-size: 28rpx;
        opacity: 0.9;
        margin-bottom: 10rpx;
      }

      .money {
        font-size: 36rpx;
        font-weight: bold;
        line-height: 1.2;
        font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', sans-serif;
        text-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

        .num {
          font-size: 48rpx;
          font-family: 'GuildfordProBook 5';
        }
      }
    }
  }

  .sign-record {
    background-color: #fff;
    border-radius: 16rpx 16rpx 0 0;
    margin-top: -20rpx;
    padding: 0 30rpx;

    .item {
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f5f5f5;

      .data {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 20rpx;
      }

      .itemn {
        padding: 20rpx 0;

        .name {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 10rpx;
          width: 400rpx;
        }

        .num {
          font-size: 28rpx;
          font-weight: bold;
        }

        .font-color-red {
          color: #eb3729;
        }
      }
    }
  }
}

.acea-row {
  display: flex;
  flex-wrap: wrap;
}
</style>