zhishifufei_uniapp/pages/spread/commission.vue

<template>
  
  <BaseContainer class="commission-details">
    <NavBar title="佣金明细" fixed />
    <view class="header">
      <view>累计佣金(元)：{{ info.sum_spread }}</view>
      <view>
        <view :class="{ on: type == 0 }" @click="tab(0)">
          <view>一级推广佣金(元)</view>
          <view>{{ info.spread_one }}</view>
        </view>
        <view :class="{ on: type == 1 }" @click="tab(1)">
          <view>二级推广佣金(元)</view>
          <view>{{ info.spread_two }}</view>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="list" v-if="spreadList.length">
        <view v-for="item in spreadList" class="item" :key="item.id">
          <view>{{ item.time }}</view>
          <view class="list">
            <view v-for="cell in item.list" class="cell">
              <view>
                <view>{{ cell.mark }}</view>
                <view>{{ cell.add_time }}</view>
              </view>
              <view v-if="cell.pm == 1">+{{ cell.number }}</view>
              <view v-else>-{{ cell.number }}</view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="!spreadList.length && finished" class="empty">
        <image
          mode="widthFix"
          :src="getImgPath('/wap/first/zsff/images/empty.png')"
          alt="暂无数据"
        />
        <view>暂无数据</view>
      </view>
    </view>
  </BaseContainer>
</template>

<script>
import { getCommissionData, getSpreadCommissionList } from "@/api/spread";

export default {
  data() {
    return {
      info: {},
      type: 0,
      page: 1,
      limit: 16,
      spreadList: [],
      finished: false,
    };
  },
  onLoad() {
    this.getData();
    this.getRecords();
  },
  onReachBottom() {
    this.getRecords();
  },
  methods: {
    getData() {
      getCommissionData().then(({ data }) => {
        this.info = data.data;
      });
    },
    async getRecords() {
      if (this.finished) return;
      uni.showLoading({ mask: true });

      try {
        const { data } = await getSpreadCommissionList({
          type: this.type,
          page: this.page,
          limit: this.limit,
        });
        uni.hideLoading();
        const list = data.data;
        this.spreadList = this.spreadList.concat(list);
        this.finished = this.limit > list.length;
        this.page = data.page;
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err);
      }
    },
    tab(type) {
      if (type == this.type) return;
      this.type = type;
      this.spreadList = [];
      this.page = 1;
      this.finished = false;
      this.getRecords();
    },
  },
};
</script>
<style>
page {
  background: #f5f5f5;
}
</style>

<style scoped lang="scss">
/* 佣金明细 */
.commission-details .header {
  position: fixed;
  top: calc(88rpx + var(--safe-top));
  right: 0;
  left: 0;
  z-index: 10;
  padding: 0 30rpx 0;
  background: linear-gradient(180deg, #2c8eff 0%, #f5f5f5 100%);
}

.commission-details .header > view:first-child {
  padding: 69rpx 10rpx 30rpx;
  font-size: 32rpx;
  line-height: 45rpx;
  color: #ffffff;
}

.commission-details .header > view:last-child {
  display: flex;
  height: 140rpx;
  border-radius: 12rpx;
  background: #ffffff;
  font-size: 24rpx;
  line-height: 33rpx;
  text-align: center;
  color: #666666;
}

.commission-details .header > view > view {
  position: relative;

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: center;
  min-width: 0;
  cursor: pointer;
}

.commission-details .header > view > view::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  width: 1px;
  height: 60rpx;
  background: #eeeeee;

  transform: translateY(-50%);
}

.commission-details .header > view > view:first-child::before {
  display: none;
}

.commission-details .header > view > view > view:last-child {
  margin-top: 11rpx;
  font-weight: bold;
  font-size: 40rpx;
  line-height: 56rpx;
  color: #282828;
}

.commission-details .header > view > view.on > view:last-child {
  color: #2c8eff;
}

.main {
  padding-top: 500rpx;
}

.main .item > view {
  padding: 30rpx 30rpx 20rpx;
  font-size: 26rpx;
  line-height: 37rpx;
  color: #666666;
}

.main .item .list {
  padding-left: 30rpx;
  background: #ffffff;
}

.main .cell {
  display: flex;

  align-items: center;
  height: 120rpx;
  padding-right: 30rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #282828;
}

.main .cell > view:first-child {
  flex: 1;
  min-width: 0;
}

.main .cell > view > view:last-child {
  margin-top: 8rpx;
  font-size: 24rpx;
  line-height: 33rpx;
  color: #999999;
}

.main .cell > view:last-child {
  font-size: 34rpx;
  line-height: 48rpx;
  color: #ff6b00;
}

.main .empty {
  font-size: 28rpx;
  text-align: center;
  color: #cdcdcd;
}

.main .empty image {
  display: block;
  width: 414rpx;
  margin: 0 auto;
}
</style>