partnerApp/pages/statistics/statisticsDetail.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!-- 头部信息Start -->
		
		<view class="headers " :style="headerStyle">
			<view class="dis a-c j-start " style="padding: 0 15px;">
				<u-icon name="arrow-left"  size="40" @tap="back"></u-icon>
				<text  style="margin: auto;">统计</text>
				<!-- <view class="headers-right">
					<image @click="weChatService" src="/static/image/my/kefu.png" mode="">
					</image>
					<text>客服</text>
				</view> -->
			</view>
		</view>
		<view class="body-box"  >

			<view class="teamStatistics " v-if="directLsit.length>0">
				<view class="statisticsTitle">
					<view>姓名</view>
					<view>级别</view>
					<view>发展人数</view>
				</view>
				<block v-for="(item, index) in directLsit" :key="index">
					<view>
						<view class="statisticsContent ">
							<view>{{ item.userName }}</view>
							<view>{{chineseNumbers[item.level]}}级合伙人</view>
							<view>{{ item.deptManNum }}</view>
						</view>
					</view>
				</block>
				<!-- <o-empty v-if="directLsit.length==0"  /> -->

			</view>
			<o-empty v-else />
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			option: {},
			supportStaffUrl: '',
			headerStyle: {
				backgroundColor: 'transparent',
				backgroundImage: 'url("/static/beijing (2).png")',
				backgroundSize: 'cover',
				backgroundPosition: '',
				boxShadow: ''
				// 其他样式属性...
			},
			chineseNumbers:[ '零', '一', '二', '三', '四', '五', '六', '七', '八', '九'],
			directLsit: []
		}
	},
	
	onLoad(e) {
		let partnerIds= JSON.parse(decodeURIComponent(e.key));
		this.queryData(partnerIds)
	},

	methods: {
		back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
				
			},
		//点击跳转企业微信客服
		weChatService() {
			uni.share({
				provider: "weixin",
				openCustomerServiceChat: true,
				customerUrl: this.supportStaffUrl, //企业微信地址
				corpid: 'wwfe67d19509d43ec5', //企业id
				success: (res) => { },
				fail: (err) => { }
			});
		},
	
		async queryData(partnerIds) {
			
			let res = await this.$http.post('/APPPartner/getLevelPartnerInfo', partnerIds);
			if (res.code == '200') {
				this.directLsit = res.data
			}
		}
	}
}
</script>
<style lang="scss" scoped>
.headers {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999999;
		padding-top: 40px;
		    height: 85px;
		text{
			font-size: 18px;
			font-weight: bold;
		}
	}


.body-box {
	background: #ffffff;
	margin: 100px 15px 15px 15px
}

.statistics-title {
	font-size: 16px;
	color: #333333;
}

.statistics-title::before {
	content: " ";
	display: inline-block;
	width: 4px;
	height: 12px;
	background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
	border-radius: 5px 5px 5px 5px;
	margin-right: 4px;
	margin-top: 2px;
}

.search-data {
	color: #666666;
	border: 1px solid #EEEEEE;

	.active {
		color: #FFFFFF;
		background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
	}

	text {
		padding: 5px 6px;
		border-left: 1px solid #EEEEEE;
	}

	text:first-child {
		border-left: none
	}
}

.statistics-number {
	margin: 10px 10px 20px 10px;
	background: #FBFBFB;
	border-radius: 4px 4px 4px 4px;
	text-align: center;
	padding: 15px 0;
	overflow: hidden;

	view {
		width: 33.33%;
		float: left;

	}

	text {
		display: block;
	}

	text:first-child {
		font-size: 25px;
		color: #333333;
	}

	text:last-child {
		font-size: 13px;
		color: #999999;
	}
}

.statistics-type {
	text-align: center;

	text {
		display: inline-block;
		width: 80px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		font-size: 16px;
		color: #666666;
		background: #F4F4F4;
	}

	.selected {
		color: #FFFFFF;
		background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
	}

	// text:first-child{
	// 	color: #FFFFFF;
	// 	background: linear-gradient( 132deg, #2DD9FF 0%, #2D6DFF 100%);

	// }
}

.partner-type {
	margin: 10px;
	width: 97%;
	overflow: hidden;
	white-space: nowrap;

	text {
		display: inline-block;
		border-radius: 14px 14px 14px 14px;
		font-size: 14px;
		color: #666666;
		padding: 1px 10px;
		background: #F4F4F4;
		margin-right: 8px;
	}

	.selected {
		color: #FFFFFF;
		background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
	}
}

.teamStatistics {
	background: #FFFFFF;
	// box-shadow: 0px 4px 10px 0px #DAE3F4;
	// border-radius: 2px 2px 2px 2px;
	border: 1px solid #C8D8FF;
}

.statisticsContent {
	box-sizing: border-box;
	height: 70upx;
	text-align: center;
	line-height: 70upx;
	font-size: 26rpx;
	color: #666666;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;

	view {
		text-align: center;
		line-height: 70upx;
		width: 25%;
		font-size: 12px;
	}

	image {
		display: inline-block;
		width: 21px;
		height: 21px;
		vertical-align: middle;
	}
}

.statisticsTitle {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	height: 70upx;
	box-sizing: border-box;
	line-height: 70upx;
	font-size: 24rpx;
	color: #232832;
	background: linear-gradient(180deg, #DAE0EE 0%, #E9ECF4 100%);
	// border-radius: 6px 6px 0 0;

	view {
		text-align: center;
		line-height: 35px;
		color: #2D6DFF;
		width: 25%;
		font-size: 12px;
	}

}

.charts-box {
	width: 100%;
	height: 300px;
}
</style>