quzhou/pages/fenxiao/yongjin.vue

<template>
	<view class="page">
		<view class="tabs">
			<view :class="activeIndex==item.id?'tabsItem active':'tabsItem'" @click="getItem(item)" v-for="item in tabList" :key="item.id">
				{{item.name}}
			</view>
		</view>
		<view class="totalContent">
			<view class="totalitem">
				<view class="price">
					<text>￥</text>
					<text class="num">{{info.total_commission_amount}}</text>
				</view>
				<view class="descText">
					佣金总数
				</view>
			</view>
			<view class="totalitem" style="border-left:1px solid #fff;">
				<view class="price">
					
					<text class="num">{{info.distribute_order_num}}</text>
				</view>
				<view class="descText">
					订单数
				</view>
			</view>
		</view>
		<view class="yongjinTitle">
			佣金明细
		</view>
		<!-- 佣金明细 -->
		<view class="record-list" v-show="tableData.length>0">
			<view class="list" v-for="(item,index) in tableData" :key="index">
				<image :src="baseUrl+item.avatar" mode="aspectFill" class="avatarPic"></image>
				<view class="outer">
					<view class="title-date">
						<view class="title">
							<text>{{item.nickname}}</text>
							
						</view>
						<view class="date">
							<text>{{item.jointime}}</text>
						</view>
					</view>
				
				</view>
				<view class="integral">
					<text  style="color: #22AA44;">{{item.total_commission_amount}}</text>
					
				</view>
			</view>
		</view>
		<view class="empty" v-show="tableData.length==0">
			<image src="../../static/image/mescroll-empty.png" mode="widthFix"></image>
			<view class="emptyText">
				暂无数据
			</view>
		</view>
		
	</view>
</template>

<script>
	import {getUserCommissionApi,getUserCommissionList} from '@/common/api.js'
	export default {
		data() {
			return {
				tabList:[
					
					{id:1,name:'已到账'},
					{id:0,name:'未到账'},
				],
				activeIndex:1,
				info:{
					distribute_order_num:0,
					total_commission_amount:0
				},
				page:1,
				limit:10,
				tableData:[],
				total:0,
			};
		},
		methods:{
			getInfo(){
				getUserCommissionApi({status:this.activeIndex}).then(res=>{
					this.info = Object.assign({},this.info,res.data)
				})
			},
			getList(val){
				let params={
					page:this.page,
					limit:this.limit,
					status:this.activeIndex
				}
				getUserCommissionList(params).then(res=>{
					if(val){
						this.tableData.push(...res.data.data)
					}else{
						this.tableData = res.data.data;
						this.total = res.data.total
					}
				})
			},
			getItem(item){
				this.page = 1;
				this.activeIndex = item.id;
				this.getInfo();
				this.getList()
			},
		},
		onReachBottom() {
			if(this.tableData.length<this.total){
				this.page++;
				this.getList('over')
			}
			
		},
		mounted(){
			this.getInfo()
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
.page{
	// position: absolute;
	// left: 0;
	// top: 0;
	// width: 100%;
	// height: 100%;
	// background-color: #FFFFFF;
	
}
.tabs{
	height: 80rpx;
	background-color: rgb(35, 96, 48);
	padding: 6rpx;
	border-radius: 5px;
	display: flex;
	margin:0 24rpx;
	
	.tabsItem{
		flex:1;
		text-align: center;
		line-height: 70rpx;
		font-size: 26rpx;
		color: #ffffff;
	}
	.active{
		background-color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		border-radius: 5px;
		color: rgb(35, 96, 48);
	}
}
.totalContent{
	
	height: 160rpx;
	background: url('../../static/image/total-bg.png');
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 6px;
	overflow: hidden;
	position: relative;
	// width:94%;
	// margin:20rpx auto 0 auto;
	display: flex;
	padding:40rpx 0;
	margin:20rpx 24rpx;
	.totalitem{
		flex:1;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.price{
			display: flex;
			align-items: center;
			justify-content: center;
			text{
				font-size: 30rpx;
				color:#fff;
			}
			.num{
				font-size: 48rpx;
			}
		}
		.descText{
			text-align: center;
			font-size: 28rpx;
			color:#fff;
		}
	}
}
.yongjinTitle{
	padding: 13px 0 4px 0;
	font-size: 30rpx;
	color: #9f751f;
	margin:0 24rpx;
}
.record-list{
	// width: 100%;
	background-color: #FFFFFF;
	padding:0 24rpx;
	margin:0 24rpx;
	border-radius: 10rpx;
	.list{
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		border-bottom: 2rpx solid #f6f6f6;
		.avatarPic{
			width:100rpx;
			height:100rpx;
			border-radius: 50%;
		}
		.outer{
			flex:1;
			margin-left:20rpx;
			padding:20rpx 0;
		}
		.title-date{
			height: 100%;
			.title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 50rpx;
				text{
					font-size: 28rpx;
					font-weight: bold;
					color: #236030;
				}
			}
			.date{
				display: flex;
				align-items: center;
				width: 100%;
				height: 60rpx;
				text{
					font-size: 24rpx;
					color: #959595;
				}
			}
		}
		.integral{
			display: flex;
			align-items: center;
			height: 100%;
			text{
				font-size: 36rpx;
				font-weight: bold;
				color: $base;
			}
		}
	}
}
.empty{
	text-align: center;
	image{
		width:50%;
		height:auto
	}
	.emptyText{
		text-align: center;
		margin-top:20rpx;
		color:#aaa;
	}
}

</style>