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>{{gradeText}}</view>
							<view>{{ item.number }}</view>
						</view>
					</view>
				</block>
				<!-- <o-empty v-if="directLsit.length==0"  /> -->

			</view>
			<o-empty v-else />
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				option: {},
				supportStaffUrl: '',
				headerStyle: {
					backgroundColor: 'transparent',
					backgroundImage: 'url("/static/beijing (2).png")',
					backgroundSize: 'cover',
					backgroundPosition: '',
					boxShadow: ''
					// 其他样式属性...
				},
				chineseNumbers: ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'],
				directLsit: []
			}
		},

		onLoad(options) {
			this.queryData(options.id)
		},
		computed: {
			...mapState(['userInfo', "userCheckInfo"]),
			//匹配等级title
			gradeText() {
				const gradeMap = {
					1: '创始人',
					2: '管理人',
					3: '合伙人',
					4: '工作室'
				}
				return gradeMap[this.userInfo.sysUser.grade] || ''
			}
		},
		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.get('/newAppPartner/selectByIdList?id=' + partnerIds);
				if (res.code == '200') {
					this.directLsit = res.data.list
				}
			}
		}
	}
</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>