shuzi/pages/user/team.vue

<template>
	<view class="content">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="" style="height: 20rpx;">
			
		</view>
		<view class="user-top flex">
			id: {{userInfo.uid}}<text style="margin-left: 20rpx;" class="clamp">昵称:{{userInfo.nickname}}</text>
		</view>
		<view class="yeji-wraper flex">
			<view class="yeji-item">
				<view class="yeji-val">
					{{wlgsbList.price || '0'}}
				</view>
				<view class="yeji-name">
					销售业绩
				</view>
			</view>
			<view class="yeji-item">
				<view class="yeji-val">
					{{wlgsbList.today_price || '0'}}
				</view>
				<view class="yeji-name">
					今日业绩
				</view>
			</view>
			<view class="yeji-item">
				<view class="yeji-val">
					{{wlgsbList.yesterday_price || '0'}}
				</view>
				<view class="yeji-name">
					昨日业绩
				</view>
			</view>
		</view>
		<view class="nav-wraper flex">
			<view class="nav-item" v-for="(nitem,nindex) in navList" :class="{'action':nindex == tabCurrentIndex}" @click="navClick(nindex)">
				{{nitem.text}}
			</view>
		</view>
		<template v-if="tabCurrentIndex == 0">
			<view class="wlg-sb flex" style="margin-top: 40rpx;" @click="navto('/pages/user/teamList?key=direct_push')">
				<view class="">
					服务直属消费者
				</view>
				<view class="">
					{{wlgsbList.direct_push_count || '0'}}
				</view>
			</view>
			<view class="wlg-sb flex" @click="navto('/pages/user/teamList?key=between')">
				<view class="">
					服务体系消费者
				</view>
				<view class="">
					{{wlgsbList.between_count || '0'}}
				</view>
			</view>
		</template>
		<template  v-if="tabCurrentIndex == 1">
			<view class="wlg-sb flex" style="margin-top: 40rpx;"  @click="navto('/pages/user/teamList?key=user_list')">
				<view class="">
					服务茶农
				</view>
				<view class="">
					{{wlgsbList.user_count || '0'}}
				</view>
			</view>
			<!-- <view class="wlg-sb flex">
				<view class="">
					服务体系茶农
				</view>
				<view class="">
					0
				</view>
			</view> -->
		</template>
	</view>
</template>
<script>
import { myspread, tuiguang } from '@/api/user.js';
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			// 头部图高度
			maxheight: '',
			tabCurrentIndex: 0,
			navList: [
				{
					state: 0,
					text: '消费者',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 1,
					text: '茶农',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				}
			],
			all: '',
			list: '',
			xsyj: '',
			jrye: '',
			zrye: ''
		};
	},
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
		...mapState(['wlgsbList']),
		getPhone() {
			let reg = /(\d{3})\d{4}(\d{4})/;
			this.navList.user_list.forEach(e => {
				return e.phone.replace(reg, '$1****$2');
				console.log(e.phone.replace(reg, '$1****$2'));
			});
		}
	},
	onLoad(options) {},
	onShow() {
		this.loadData();
	},
	methods: {
		...mapMutations(['setSbList']),
		navClick(index) {
			this.tabCurrentIndex = index
		},
		// 页面跳转
		navto(e) {
			uni.navigateTo({
				url: e
			});
		},
		//获取收入支出信息
		async loadData(source) {
			let obj = this
			tuiguang().then(res => {
				console.log(res, 'data');
				obj.setSbList(res.data)
			});
		},
		// 点击返回 我的页面
		toBack() {
			uni.switchTab({
				url: '/pages/user/user'
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f8f8f8;
	height: 100%;
}

// .info-box {
// 	width: 670rpx;
// 	height: 186rpx;
// 	background: #ffffff;
// 	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
// 	border-radius: 20rpx;
// 	margin: -100rpx auto 0;
// 	position: relative;
// 	z-index: 2;

// 	.info-item {
// 		width: 50%;
// 		display: flex;
// 		flex-direction: column;
// 		align-items: center;
// 		line-height: 1;

// 		.info-font {
// 			font-size: 30rpx;
// 			font-family: PingFang SC;
// 			font-weight: bold;
// 			color: #999999;
// 		}

// 		.info-num {
// 			margin-top: 30rpx;
// 			font-size: 30rpx;
// 			font-family: PingFang SC;
// 			font-weight: bold;
// 			color: #181818;
// 		}
// 	}

// 	.shu {
// 		width: 2rpx;
// 		height: 74rpx;
// 		background: #dcdfe6;
// 	}
// }

// .status_bar {
// 	height: var(--status-bar-height);
// 	width: 100%;
// 	background: #5dbc7c;
// }

// .content-money {
// 	position: relative;
// 	height: 480rpx;

// 	.content-bg {
// 		position: absolute;
// 		top: 0;
// 		left: 0;
// 		right: 0;
// 		width: 750rpx;
// 		height: 480rpx;

// 		image {
// 			width: 100%;
// 			height: 100%;
// 		}
// 	}

// 	.body-title {
// 		height: 80rpx;
// 		text-align: center;
// 		font-size: 35rpx;
// 		position: relative;

// 		.header {
// 			position: absolute;
// 			left: 0;
// 			top: 0;
// 			width: 100%;
// 			font-size: 36rpx;
// 			font-family: PingFang SC;
// 			font-weight: bold;
// 			color: #fffeff;
// 			height: 80rpx;
// 			font-size: 36rpx;
// 			font-weight: 700;
// 			z-index: 9;
// 			display: flex;
// 			justify-content: center;
// 			align-items: center;
// 		}

// 		.goback-box {
// 			position: absolute;
// 			left: 18rpx;
// 			top: 0;
// 			height: 80rpx;
// 			display: flex;
// 			align-items: center;
// 		}

// 		.goback {
// 			z-index: 100;
// 			width: 34rpx;
// 			height: 34rpx;
// 		}
// 	}
// }

// .money-box {
// 	position: relative;
// 	z-index: 2;
// 	padding-top: 90rpx;
// 	color: #ffffff;
// 	text-align: center;

// 	.money {
// 		font-size: 72rpx;
// 		font-family: PingFang SC;
// 		font-weight: bold;
// 		color: #ffffff;
// 	}

// 	.text {
// 		font-size: 30rpx;
// 	}
// }

// .order-item {
// 	padding: 20rpx 30rpx;
// 	line-height: 1.5;

// 	.title-box {
// 		width: 100%;

// 		.title-avatar {
// 			flex-shrink: 0;
// 			width: 100rpx;
// 			height: 100rpx;
// 			margin-right: 25rpx;
// 			border-radius: 100%;

// 			image {
// 				width: 100%;
// 				height: 100%;
// 				border-radius: 100%;
// 			}
// 		}

// 		.list_tpl {
// 			width: 85%;

// 			.title {
// 				display: flex;
// 				justify-content: flex-start;
// 				font-size: $font-lg;
// 				color: $font-color-base;
// 				overflow: hidden; //超出的文本隐藏
// 				text-overflow: ellipsis; //溢出用省略号显示
// 				white-space: nowrap;
// 				line-height: 1;
// 				text-align: center;

// 				.title-name {
// 					max-width: 40%;
// 				}

// 				.dl {
// 					margin-left: 10rpx;
// 					width: 93rpx;
// 					height: 32rpx;
// 					border-radius: 16rpx;

// 					image {
// 						width: 93rpx;
// 						height: 32rpx;
// 						border-radius: 16rpx;
// 					}
// 				}

// 				.class {
// 					display: inline-block;
// 					margin-left: 10rpx;
// 					padding: 6rpx;
// 					text-align: center;
// 					border: 1px solid #2e58ff;
// 					border-radius: 16rpx;
// 					font-size: 20rpx;
// 					font-family: PingFang SC;
// 					font-weight: 500;
// 					color: #2e58ff;
// 				}
// 			}

// 			.time {
// 				font-size: $font-base;
// 				color: $font-color-light;
// 			}
// 		}
// 	}

// 	.money {
// 		width: 50%;
// 		text-align: right;
// 		color: #db1935;
// 		font-size: $font-lg;
// 	}
// }

// .yeji {
// 	position: relative;
// 	margin: -72rpx auto 0;
// 	width: 690rpx;
// 	height: 143rpx;
// 	background: #ffffff;
// 	box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
// 	border-radius: 10rpx;
// 	display: flex;
// 	align-items: center;

// 	.yeji-a {
// 		width: 50%;
// 		display: flex;
// 		flex-direction: column;
// 		justify-content: center;
// 		align-items: center;

// 		.yeji-top {
// 			font-size: 28rpx;
// 			font-family: PingFang SC;
// 			font-weight: bold;
// 			color: #333333;
// 		}

// 		.yeji-buttom {
// 			font-size: 42rpx;
// 			font-family: PingFang SC;
// 			font-weight: bold;
// 			color: #333333;
// 		}
// 	}

// 	.border {
// 		width: 1rpx;
// 		height: 51rpx;
// 		background: #dddddd;
// 	}
// }

// .content-box {
// 	display: flex;
// 	justify-content: space-between;
// 	align-items: center;
// 	margin: 30rpx;

// 	.content-box-left {
// 		display: flex;

// 		.left-img {
// 			width: 100rpx;
// 			height: 100rpx;
// 			border-radius: 50%;
// 			overflow: hidden;
// 			image {
// 				width: 100%;
// 				height: 100%;
// 			}
// 		}

// 		.right-title {
// 			margin-left: 15rpx;
// 			display: flex;
// 			flex-direction: column;
// 			justify-content: space-around;

// 			.top {
// 				font-weight: 500;
// 				font-size: 30rpx;
// 			}

// 			.bottom {
// 				color: #999999;
// 			}
// 		}
// 	}

// 	.content-box-right {
// 		display: flex;
// 		flex-direction: column;
// 		width: 230rpx;
// 		color: #999999;
// 		.state {
// 			color: red;
// 		}
// 		span {
// 			color: red;
// 			font-size: 28rpx;
// 		}
// 	}
// }
.user-top {
	width: 680rpx;
	height: 80rpx;
	line-height: 80rpx;
	box-shadow: 0 0 10rpx rgba(0,0,0,0.2);
	margin: 20rpx auto;
	border-radius: 8rpx;
	padding: 0 30rpx;
	font-size: 32rpx;
	justify-content: flex-start;
}
.yeji-wraper {
	width: 590rpx;
	height: 134rpx;
	box-shadow: 0 0 10rpx rgba(0,0,0,0.2);
	margin:20rpx auto;
	border-radius: 10rpx;
	text-align: center;
	font-size: 28rpx;
	.yeji-item {
		width: 33%;
		.yeji-val {
			padding-bottom: 20rpx;
			font-weight: bold;
			
		}
	}
}
.nav-wraper {
	width: 630rpx;
	height: 80rpx;
	box-shadow: 0 0 10rpx rgba(0,0,0,0.2);
	margin: auto;
	border-radius: 15rpx;
	.nav-item {
		width: 50%;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
	}
	.action {
		background-color: #2b2d54;
		border-radius: 20rpx;
		color: #fff;
		font-weight: bold;
	}
}
.wlg-sb {
	width: 590rpx;
	height: 140rpx;
	box-shadow: 0 0 10rpx rgba(0,0,0,0.2);
	margin: 20rpx auto;
	border-radius: 10rpx;
	padding: 20rpx;
}
</style>