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

<template>
  <view class="promoter-order">
    <!-- 头部背景 -->
    <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">{{ count || '0' }}</text>
            <text>单</text>
          </view>
        </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.time }}</view>
          <view class="desc">本月累计推广订单：{{ item.count ? item.count : 0 }}单</view>
          <view class="listn" v-for="(val, indexn) in item.child" :key="indexn">
            <view class="itemn acea-row row-between-wrapper">
              <view class="user-info">
                <view class="pictxt acea-row row-between-wrapper">
                  <view class="pictrue">
                    <image :src="val.avatar" />
                  </view>
                  <text class="text line1">{{ val.nickname }}</text>
                </view>
                <view class="order-info">
                  <view>
                    <text class="name">订单号：</text>
                    {{ val.orderId }}
                  </view>
                  <view>
                    <text class="name">下单时间：</text>
                    {{ val.time }}
                  </view>
                </view>
              </view>
              <view class="num font-color-red">￥{{ val.number ? val.number : 0 }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "PromoterOrder",
  data: function() {
    return {
      list: [],
      where: {
        page: 1,
        limit: 15
      },
      loaded: false,
      loading: false,
      loadTitle: "",
      count: ""
    };
  },
  mounted: function() {
    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/order', 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);
            that.count = res.total;
          },
          err => {
            uni.hideLoading();
            uni.showToast({
              title: err.msg || err.response.data.msg|| err.response.data.message,
              icon: "none",
              duration: 2000
            });
          },
          300
      );
    }
  }
};
</script>

<style lang="less">
.promoter-order {
  .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: 10rpx;
        font-weight: bold;
      }

      .desc {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 20rpx;
      }

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

        .user-info {
          flex: 1;
          margin-right: 20rpx;

          .pictxt {
            margin-bottom: 15rpx;

            .pictrue {
              width: 60rpx;
              height: 60rpx;
              border-radius: 50%;
              overflow: hidden;
              margin-right: 15rpx;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .text {
              flex: 1;
              font-size: 28rpx;
              color: #333;
            }
          }

          .order-info {
            font-size: 24rpx;
            color: #999;
            padding-left: 75rpx;

            .name {
              color: #666;
            }
          }
        }

        .num {
          font-size: 28rpx;
          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>