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">{{ group_num || '0' }}</view>
				<view class="yeji-name">团队总人数</view>
			</view>
			<view class="yeji-item">
				<view class="yeji-val">{{ group_price || '0' }}</view>
				<view class="yeji-name">总销售额</view>
			</view>
			<view class="yeji-item">
				<view class="yeji-val">{{ group_award || '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?type=0')">
				<view class="">直推列表</view>
				<view class="">></view>
			</view>
			<view class="wlg-sb flex" @click="navto('/pages/user/teamList?type=1')">
				<view class="">间推列表</view>
				<view class="">></view>
			</view>
		</template>
	</view>
</template>
<script>
import { myspread } from '@/api/user.js';
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			// 头部图高度
			maxheight: '',
			tabCurrentIndex: 0,
			group_num: '',
			group_price: '',
			group_award: '',
			direct_push_count: '', //直推人数
			between_count: '', //间推人数
			list: ''
		};
	},
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
		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;
			myspread().then(res => {
				console.log(res, 'data');
				this.group_num = res.data.group_num;
				this.group_price = res.data.group_sells;
				this.group_award = res.data.group_vip_award;
			});
		},
		// 点击返回 我的页面
		toBack() {
			uni.switchTab({
				url: '/pages/user/user'
			});
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	background: #111111;
	min-height: 100%;
	height: auto;
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
}
.user-top {
	color: #fff;
	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;
	color: #fff;
	.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 {
	color: #fff;
	width: 590rpx;
	height: 140rpx;
	border: 1px solid #fff;
	margin: 20rpx auto;
	border-radius: 10rpx;
	padding: 20rpx;
}
</style>