beiliyou_user_app/pages_user/user/userTuiOrderList.vue

<template>
  <view class="promoter-list"  >
    <view class="header">
      <view class="promoterHeader">
		<image class="bg" src="/static/images/transparent.png" />
        <view class="headerCon acea-row row-between-wrapper">
          <view>
            <view class="name">推广人订单</view>
            <view>
              <text class="num">{{total}}</text>
              <text>单</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="list">
      <view>
        <view class="item acea-row row-between-wrapper" v-for="(item, index) in list"
          :key="index">
          <view class="picTxt acea-row row-between-wrapper">
            <view class="pictrue">
              <image :src="item.avatar==null?'../../static/image/my_img.png':item.avatar" />
            </view>
            <view class="text">
              <view class="name line1">{{item.nickname}}</view>
              <view>下单时间：{{item.createTime}}</view>
            </view>
          </view>
          <view class="right">
            <view>实付金额：￥{{item.payPrice}}</view>
            <view v-if="item.billType==1">返佣金：+￥{{item.tuiPrice}}</view>
			<view  v-if="item.billType==0">退佣金：-￥{{item.tuiPrice}}</view>
          </view>
        </view>
      </view>
    </view>
    <Loading :loaded="loaded" :loading="loading"></Loading>
  </view>
</template>
<script>
import {getMyTuiOrderList} from '@/api/user'
import Loading from "@/components/Loading";
  export default {
    name: "tuiList",
    components: {
      Loading
    },
    props: {},
    data: function () {
      return {
        total:0,
        page: {
          page: 1,
          pageSize: 10
        },
        list: [],
        loaded: false,
        loading: false
      };
    },
    mounted: function () {
		this.getMyTuiOrderList();
    },
    onReachBottom() {
		!this.loading && this.getMyTuiOrderList();
    },
    methods: {
       getMyTuiOrderList: function () {
         let that = this;
         if (that.loaded || that.loading) return;
         that.loading = true;
         getMyTuiOrderList(this.page).then(
           res => {
       			that.list.push.apply(that.list, res.data.list);
       			that.loading = false;
       			that.loaded = !res.data.hasNextPage;
				this.total=res.data.total;
       			uni.hideLoading()
           },
           err => {
             uni.showToast({
               title: err.msg,
               icon: "none",
               duration: 2000
             });
           },
           300
         );
       },
    }
  };
</script>
<style lang="less">
	
	/*所有推广头部样式*/
	.promoterHeader {
	  width: 100%;
	  height: 2.2 * 100rpx;
	  background-color: #018C39;
	  position: relative;
	  .bg{
		  width: 100%;
		  height: 100%;
		  position: absolute;
		  top: 0;
		  left: 0;
	  }
	}
	
	.promoterHeader .headerCon {
	  height: 100%;
	  padding: 0 0.88 * 100rpx 0 0.55 * 100rpx;
	  font-size: 0.28 * 100rpx;
	  color: #fff;
	}
	
	.promoterHeader .headerCon .name {
	  margin-bottom: 0.02 * 100rpx;
	}
	
	.promoterHeader .headerCon .num {
	  font-size: 0.5 * 100rpx;
	}
	
	.promoterHeader .headerCon .iconfont {
	  font-size: 1.25 * 100rpx;
	}
	
	/*推广人列表*/
	.promoter-list .header {
	  padding-bottom: 0.12 * 100rpx;
	}
	
	.promoter-list .nav {
	  background-color: #fff;
	  height: 0.86 * 100rpx;
	  line-height: 0.86 * 100rpx;
	  font-size: 0.28 * 100rpx;
	  color: #282828;
	  border-bottom: 1px solid #eee;
	}
	
	.promoter-list .nav .item {
	  height: 100%;
	}
	
	.promoter-list .nav .item.on {
	  color: #eb3729;
	  border-bottom: 0.05 * 100rpx solid #eb3729;
	}
	
	.promoter-list .search {
	  margin-top: 0.12 * 100rpx;
	  box-sizing: border-box;
	  width: 100%;
	  background-color: #fff;
	  height: 0.86 * 100rpx;
	  padding: 0 0.3 * 100rpx;
	  
	}
	
	.promoter-list .search .input {
	  width: 6.3 * 100rpx;
	  height: 0.6 * 100rpx;
	  border-radius: 0.5 * 100rpx;
	  background-color: #f5f5f5;
	  text-align: center;
	  position: relative;
	}
	
	.promoter-list .search .input input {
	  height: 100%;
	  font-size: 0.26 * 100rpx;
	  width: 6.2 * 100rpx;
	  text-align: left;
	}
	
	.promoter-list .search .input input::placeholder {
	  color: #bbb;
	}
	
	.promoter-list .search .input .iconfont {
	  position: absolute;
	  right: 0.28 * 100rpx;
	  color: #999;
	  font-size: 0.28 * 100rpx;
	  top: 50%;
	  transform: translateY(-50%);
	}
	
	.promoter-list .search .iconfont {
	  font-size: 0.4 * 100rpx;
	  color: #515151;
	}
	
	.promoter-list .list .sortNav {
	  background-color: #fff;
	  height: 0.76 * 100rpx;
	  border-bottom: 1px solid #eee;
	  color: #333;
	  font-size: 0.28 * 100rpx;
	}
	
	.promoter-list .list .sortNav.on {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  z-index: 5;
	}
	
	.promoter-list .list .sortNav .sortItem {
	  text-align: center;
	  flex: 1;
	  -o-flex: 1;
	  -ms-flex: 1;
	}
	
	.promoter-list .list .sortNav .sortItem image {
	  width: 0.24 * 100rpx;
	  height: 0.24 * 100rpx;
	  margin-left: 0.06 * 100rpx;
	  vertical-align: -0.03 * 100rpx;
	}
	
	.promoter-list .list .sortList {
	  margin-top: 0.76 * 100rpx;
	}
	
	.promoter-list .list .item {
	  background-color: #fff;
	  border-bottom: 1px solid #eee;
	  height: 1.52 * 100rpx;
	  padding: 0 0.3 * 100rpx 0 0.2 * 100rpx;
	  font-size: 0.24 * 100rpx;
	  color: #666;
	}
	
	.promoter-list .list .item .picTxt {
	  width: 4.4 * 100rpx;
	}
	
	.promoter-list .list .item .picTxt .pictrue {
	  width: 1.06 * 100rpx;
	  height: 1.06 * 100rpx;
	  border-radius: 50%;
	}
	
	.promoter-list .list .item .picTxt .pictrue image {
	  width: 100%;
	  height: 100%;
	  border-radius: 50%;
	  border: 0.03 * 100rpx solid #fff;
	  box-shadow: 0 0 0.07 * 100rpx #aaa;
	  -moz-box-shadow: 0 0 0.07 * 100rpx #aaa;
	  -o-box-shadow: 0 0 0.07 * 100rpx #aaa;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	}
	
	.promoter-list .list .item .picTxt .text {
	  width: 3.04 * 100rpx;
	  font-size: 0.24 * 100rpx;
	  color: #666;
	}
	
	.promoter-list .list .item .picTxt .text .name {
	  font-size: 0.28 * 100rpx;
	  color: #333;
	  margin-bottom: 0.13 * 100rpx;
	}
	
	.promoter-list .list .item .right {
	  width: 2.4 * 100rpx;
	  text-align: right;
	  font-size: 0.22 * 100rpx;
	  color: #333;
	}
</style>