junzitang/pagesT/Distribution/MyGroup.vue

<template>
	<view class="MyGroup">
		<view class="top-view">
			<view class="num-ul">
				<view class="num-li">
					<view class="num-li-tit">{{ text_set.Offline || '下线' }}总数</view>
					<view class="num-li-num">{{ subTotal }}</view>
				</view>
				<view class="num-li-line"></view>
				<view class="num-li">
					<view class="num-li-tit">{{ text_set.name || '分销商名称' }}总数</view>
					<view class="num-li-num">{{ businessmanTotal }}</view>
				</view>
			</view>
			<view class="grade-ul" v-if="grade_list.length">
				<view class="grade-li" @click="tabChange(index)" :class="[level === index + 1 ? 'grade-on' : '']" v-for="(item, index) in grade_list" :key="index">
					{{ item.name }}
					<view class="ibonfont ibonxiangshangjiantou top-jt-icon" v-if="level === index + 1"></view>
				</view>
			</view>
		</view>
		<view class="total-view clearfix" v-if="grade_list.length">
			<view class="total-left float_left">
				<view class="left-num">总数:{{ pageTotal }}</view>
				<view class="line-num"></view>
				<view class="left-num">{{ text_set.name || '分销商名称' }}总数:{{ subBusinessmanTotal }}</view>
			</view>
		</view>
		<scroll-view @scrolltolower="scrollBootom" scroll-y="true" :style="style" class="group-ul">
			<view class="group-li" v-for="(item, index) in group_list" :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.totalMoney || 0 }}</view>
					</view>
					<view class="user-info-right float_right">
						<view class="user-time" style="padding-top: 0;">{{ $_utils.formatDate(item.createTime) }}</view>
						<view class="user-time">订单:{{ item.orderTotal }}</view>
					</view>
				</view>
			</view>
			<u-loadmore margin-top="20" v-if="group_list.length" :status="loading_status" />
		</scroll-view>

	</view>
</template>

<script>

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

		},
		location() {
			return this.$store.state.locationObj;
		}
	},
	data() {
		return {
			loading_status: 'loadmore',
			isLogin: false,
			grade_list: [],
			current: 0,
			myId: 0,
			group_list: [],
			page: 1,
			pageSize: 10,
			pageTotal: 0,
			level: 1,
			text_set: {},
			topTotal: 0,
			subTotal: 0,
			businessmanTotal: 0,
			subBusinessmanTotal: 0,
			distribution_set:{}
		};
	},
	onLoad(options) {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#fe582e'
		});
		this.text_set = this.$store.state.distributionTextSet;
		this.distribution_set = this.$store.state.distributionSet;
		this.myId = parseInt(options.id);
		if(this.distribution_set.level===2){
			this.grade_list = [
				{
					name: this.text_set.level_one || '一级'
				},
				{
					name: this.text_set.level_two || '二级'
				}
			];

		}else if(this.distribution_set.level===3){
			this.grade_list = [
				{
					name: this.text_set.level_one || '一级'
				},
				{
					name: this.text_set.level_two || '二级'
				},
				{
					name: this.text_set.level_three || '三级'
				}
			];
		}

	},
	onShow() {
		this.getAllSub();
	},
	methods: {
		// 查询分销商的下级
		async getAllSub() {
			this.loading_status = 'loading';
			this.$u.api.getAllSub({
				id: this.myId,
				level: this.level,
				page: this.page,
				pageSize: this.pageSize
			}).then(data=>{
				if (this.page === 1) {
					this.group_list = data.data;
				} else {
					this.group_list = this.group_list.concat(data.data);
				}
				this.pageTotal = data.pageTotal;
				this.topTotal = data.topTotal;
				this.subTotal = data.subTotal;
				this.businessmanTotal = data.businessmanTotal;
				this.subBusinessmanTotal = data.subBusinessmanTotal;
				this.loading_status =  this.$_utils.loadStatus(this.page, this.pageSize, this.pageTotal);
			});
		},
		scrollBootom() {
			if (this.pageTotal / this.pageSize > this.page) {
				this.page += 1;
				this.getAllSub();
			}
		},
		tabChange(index) {
			this.current = index;
			this.level = index + 1;
			this.page = 1;
			this.getAllSub();
		}
	}
};
</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>