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

<template>
  <view class="cash-record">
    <!-- 头部背景 -->
    <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 || '0.00' }}</text>
          </view>
        </view>
        <view class="iconfont icon-jinbi1"></view>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="sign-record">
      <view class="list">
        <view class="item" v-for="(item, listIndex) in list" :key="listIndex">
          <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 class="time">{{ item.createTime }}</view>
              </view>
              <view class="num font-color-red" v-if="item.pm === 0">-{{ item.number }}</view>
              <view class="num" v-else-if="item.pm === 1">+{{ item.number }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  name: "CashRecord",
  data: function() {
    return {
      list: [],
      commission: 0,
      where: {
        page: 1,
        limit: 15
      },
      loaded: false,
      loading: false,
      loadTitle: ""
    };
  },
  mounted: function() {
    this.getCommission();
    this.getIndex();
  },
  onReachBottom() {
    !this.loading && this.getIndex();
  },
  methods: {
    getIndex: function() {
      let that = this;
      if (that.loaded == true || that.loading == true) return;
      that.loading = true;
      uni.showLoading({
        title: '加载中...'
      })
      this.$api.request('get', 'app/userBill/spread/commission/4', that.where).then(
          res => {
            uni.hideLoading();
            that.loading = false;
            that.loaded = res.rows.length < that.where.limit;
            that.loadTitle = that.loaded ? "人家是有底线的" : "上拉加载更多";
            that.where.page = that.where.page + 1;
            that.list.push.apply(that.list, res.rows);
          },
          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">
.cash-record {
  .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';
        }
      }

      .iconfont {
        font-size: 60rpx;
        opacity: 0.8;
      }
    }
  }

  .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;
        font-weight: bold;
      }

      .itemn {
        padding: 20rpx 0;
        align-items: flex-start;

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

        .time {
          font-size: 24rpx;
          color: #999;
        }

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

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

.acea-row {
  display: flex;
  flex-wrap: wrap;
}
.row-between-wrapper {
  justify-content: space-between;
  align-items: center;
}
.line1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>