qianniaoMp/pagesT/NewPartner/commission_detail.vue

<template>
	<view class="MyGroup">
		<view class="top-view">
			<view class="grade-ul" v-if="tabData.length">
				<view class="grade-li" @click="tabChange(index)" :class="[tabIndex === index ? 'grade-on' : '']" v-for="(item, index) in tabData" :key="index">
					{{ item.title }}
					<view class="ibonfont ibonxiangshangjiantou top-jt-icon" v-if="tabIndex === index"></view>
				</view>
			</view>
		</view>

		<scroll-view @scrolltolower="scrollBootom" scroll-y="true" :style="style" class="group-ul">
			<view class="group-li" v-for="(item, index) in listData" :key="index">
				<view class="user-avator-view"><image class="user-avator" :src="item.avatar" mode="aspectFill"></image></view>
				<view class="user-info clearfix">
					<view class="user-info-left float_left">
						<view class="user-name ellipsis">{{ item.name }}</view>
						<view class="user-time">{{item.title}}:¥{{ item.commission || 0 }}</view>
					</view>
					<view class="user-info-right float_right">
						<view class="user-time" style="padding-top: 0;">{{ $_utils.formatDate(item.time) }}</view>
						<view class="user-time">{{item.type===1?"收益":"消费"}}:￥{{ item.calcMoney || 0 }}</view>
					</view>
				</view>
			</view>
			<u-loadmore margin-top="20" v-if="listData.length" :status="loading_status" />
		</scroll-view>

	</view>
</template>

<script>

export default {
	computed: {
		style() {
			const systemInfo = uni.getSystemInfoSync();
			return `height: calc(100vh - ${systemInfo.statusBarHeight + 171}px)`;

		},
	},
	data() {
		return {
			loading_status: 'loadmore',
			isLogin: false,
			tabData:[
				{type:0,title:"子级用户消费",code:"consume"},
				{type:1,title:"子级合伙人收益",code:"income"}
			],
			tabIndex:0,
			listData:[],
			page: 1,
			pageSize: 10,
			pageTotal: 0,
		};
	},
	onLoad(options) {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#fe582e'
		});
	},
	onShow() {
		this.getData();
	},
	methods: {
		getData(){
			var that = this;
			let post={page: this.page,pageSize: this.pageSize,code:this.tabData[this.tabIndex].code}
			this.load_status = 'loading';
			this.$u.api.getCommissionDetail(post).then(res=>{
				uni.stopPullDownRefresh();
				if (that.page === 1) {
					that.listData = res.data.data;
				} else {
					that.listData = that.listData.concat(res.data.data);
				}
				that.total = res.data.total;
				that.load_status = that.$_utils.loadStatus(that.page, that.pageSize, that.total);
			}).catch(err=>{
				uni.stopPullDownRefresh();
				that.load_status = 'nomore';
			})
		},
		scrollBootom() {
			if (this.pageTotal / this.pageSize > this.page) {
				this.page += 1;
				this.getData();
			}
		},
		tabChange(index) {
			this.tabIndex = index;
			this.page = 1;
			this.getData();
		}
	}
};
</script>

<style lang="scss">
.top-view {
	color: #ffffff;
	background-color: #fe582e;

	.num-ul {
		padding: 40upx 0;
		display: flex;
		.num-li {
			flex: 2;
			text-align: center;
			.num-li-tit {
				font-size: 24upx;
			}
			.num-li-num {
				font-size: 40upx;
				padding-top: 30upx;
			}
		}
		.num-li-line {
			width: 1upx;
			height: 56upx;
			background-color: #fff;
			opacity: 0.5;
			transform: translateY(70upx);
		}
	}
	.grade-ul {
		background-color: rgba($color: #ffffff, $alpha: 0.2);
		font-size: 28upx;
		display: flex;
		color: rgba($color: #ffffff, $alpha: 0.7);
		.grade-li {
			flex: 2;
			text-align: center;
			line-height: 90upx;
			position: relative;
			.top-jt-icon {
				position: absolute;
				bottom: -10upx;
				left: 50%;
				transform: translateX(-50%);
				display: block;
				height: 30upx;
				line-height: 30upx;
				font-size: 32upx;
				color: rgba($color: #ffffff, $alpha: 1);
			}
		}
		.grade-on {
			color: rgba($color: #ffffff, $alpha: 1);
			font-size: 32upx;
		}
	}
}
.total-view {
	line-height: 90upx;
	color: #3d404d;
	background-color: #fff1f0;
	font-size: 24upx;
	.total-left {
		.left-num {
			padding: 0 24upx;
			display: inline-block;
		}
		.line-num {
			display: inline-block;
			width: 2upx;
			height: 28upx;
			background-color: #fff;
		}
	}
}
.group-ul {
	.group-li {
		padding: 20upx;
		background-color: #fff;
		border-radius: 8upx;
		.user-avator-view {
			display: inline-block;
			padding-right: 20upx;
			.user-avator {
				display: block;
				width: 100upx;
				height: 100upx;
				border-radius: 100%;
			}
		}
		.user-info {
			border-bottom: 1upx solid #f4f4f4;
			width: 588upx;
			display: inline-block;
			padding-bottom: 20upx;
			.user-name{
				width: 310rpx;
				-webkit-line-clamp:1;
				height: 40rpx;
				line-height: 40rpx;
			}
			.user-time {
				color: #999;
				font-size: 24upx;
				padding-top: 10upx;
			}
			.user-info-right {
				text-align: right;
			}
		}
	}
}
</style>