zhibo/pages_user/user/userTuiList.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 class="search acea-row row-between-wrapper">
        <form @submit.prevent="submitForm">
          <view class="input">
            <input placeholder="搜索会员名称" v-model="screen.keyword" />
            <text class="iconfont icon-guanbi" @click="screen.keyword=''"></text>
          </view>
        </form>
        <view class="iconfont icon-sousuo2"></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/images/detault_head.jpg':item.avatar" />
            </view>
            <view class="text">
              <view class="name line1">{{item.nickname}}</view>
              <view>注册时间: {{item.createTime}}</view>
			  <view>创收: {{item.tuiMoney.toFixed(2)}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <Loading :loaded="loaded" :loading="loading"></Loading>
  </view>
</template>
<script>
	
  import {getMyTuiList} from "@/api/user.js";
  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.getMyTuiList();
    },
	onReachBottom() {
	  !this.loading && this.getMyTuiList();
	},
    methods: {
      submitForm: function () {
        this.page.pageNum = 1;
        this.loaded = false;
        this.loading = false;
        this.list = [];
        this.getMyTuiList();
      },
      getMyTuiList: function () {
        let that = this;
        if (that.loaded || that.loading) return;
        that.loading = true;
        getMyTuiList(this.page).then(
          res => {
			that.total=res.data.total;
			that.list.push.apply(that.list, res.data.list);
			that.loading = false;
			that.loaded = !res.data.hasNextPage;
			that.page.page = that.page.page + 1;
			uni.hideLoading()
          },
          err => {
            uni.showToast({
              title: err.msg || err.response.data.msg || err.response.data.message,
              icon: "none",
              duration: 2000
            });
          },
          300
        );
      },
    }
  };
</script>
<style lang="less">
	
	/*所有推广头部样式*/
	.promoterHeader {
	  width: 100%;
	  height: 2.2 * 100rpx;
	  background-color: #2BC7B9;
	  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;
	  background-repeat: no-repeat;
	  background-size: 100% 100%;
	}
	
	.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{
		width: 100%;
	}
	/*推广人列表*/
	.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 {
	   display: flex;
	   align-items: center;
	   justify-content: flex-start;
	}
	
	.promoter-list .list .item .picTxt .pictrue {
	  width: 100rpx;
	  height: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 {
	  margin-left: 30rpx;
	  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>