zhibo/pages_user/user/userTuiMoneyList.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">{{brokeragePrice}}</text>
              <text>元</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="list">
      <view>
         <view class="item" v-for="(item,index) in list">
         	<view class="title">
         		<view class="label" >推广佣金</view>
         		<view class="price add" >{{item.billType==0?'-':'+'}}￥{{item.number.toFixed(2)}}</view>
         	</view>
         	<view class="time">{{item.createTime}}</view>
         </view>
      </view>
    </view>
    <Loading :loaded="loaded" :loading="loading"></Loading>
  </view>
</template>
<script>
	import {getTuiMoneyLogs,getTuiMoney} from '@/api/user'
	import Loading from "@/components/Loading";
  export default {
    name: "tuiList",
    components: {
      Loading
    },
    props: {},
    data: function () {
      return {
        brokeragePrice:0,
        page: {
          page: 1,
          pageSize: 10,
		  logsType:5
        },
        list: [],
        loaded: false,
        loading: false
      };
    },
    mounted: function () {
		this.getTuiMoneyLogs();
		this.getTuiMoney();
    },
    onReachBottom() {
		!this.loading && this.getTuiMoneyLogs();
    },
    methods: {
		getTuiMoneyLogs: function () {
		  let that = this;
		  if (that.loaded || that.loading) return;
		  that.loading = true;
		  getTuiMoneyLogs(this.page).then(
		    res => {
					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,
		        icon: "none",
		        duration: 2000
		      });
		    },
		    300
		  );
		},
		getTuiMoney: function () {
		  let that = this;
		  getTuiMoney().then(
		    res => {
					that.brokeragePrice=res.brokeragePrice;
		    },
		    err => {
		      uni.showToast({
		        title: err.msg,
		        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;
	}
	 
	 .item{
	 	background: #FFFFFF;
	 	padding: 30upx;
		border-bottom: 1px solid #eee;
	 	.title{
	 		display: flex;
	 		align-items: center;
	 		justify-content: space-between;
	 		.label{
	 			font-size: 30upx;
	 			font-family: PingFang SC;
	 			font-weight: 400;
	 			color: #0F1826;
	 		}
	 		.price{
	 			font-size: 30upx;
	 			font-family: PingFang SC;
	 			font-weight: bold;
	 			&.add{
	 				color: #00BBB9;
	 			}
	 			&.less{
	 				color: #FF0000;
	 			}
	 		}
	 	}
	 	.time{
	 		margin-top: 20upx;
	 		font-size: 24upx;
	 		font-family: PingFang SC;
	 		font-weight: 400;
	 		color: #6E7580;
	 	}
	 }
</style>