partnerApp/pages/tools/team/team.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="body">
			<view class="statisticsDate d-flex">
				<view style="width: 180upx;flex-shrink: 0;">
					<picker style="padding: 0;" @change="bindPickerChange" :value="queryTimeTypeIndex"
						:range="queryTimeTypeArray">
						<view>{{queryTimeTypeArray[queryTimeTypeIndex]}}</view>
					</picker>
				</view>
				<view class="d-flex a-center j-center flex-1" @click="onShowDatePicker">
					{{dateRange[0].replace('/','-')}} -
					{{dateRange[1]}}
				</view>
				<view class="d-flex a-center j-center" style="width: 60upx;flex-shrink: 0;">
					<view class="icon iconfont icon-search-1-copy"></view>
				</view>
			</view>
			<view class="teamStatistics">
				<view class="statisticsTitle">
					<view class="d-flex a-center j-center">团队级别</view>
					<view class="d-flex a-center j-center">团队人数</view>
					<view class="d-flex a-center j-center">签单保费(元)</view>
					<view class="d-flex a-center j-center">出单人力</view>
				</view>
				<block v-for="(item,index) in arrdata" :key="index">
					<view class="statisticsContent">
						<view class="d-flex a-center j-center">{{item.name}}</view>
						<view class="d-flex a-center j-center">{{item.teamnum}}</view>
						<view class="d-flex a-center j-center">{{item.sumpremium.toFixed(2)}}</view>
						<view class="d-flex a-center j-center">{{item.usernum}}</view>
					</view>
				</block>
			</view>
			<swiper-tab :tabBars="arrdata" :tabIndex="teamTabIndex" @tabtap="teamTabtap"></swiper-tab>
			<view class="team_members">
				<view class="team_member d-flex" style="background-color: #CCCCCC;">
					<view class="d-flex a-center j-center flex-1">
						<view>团队成员</view>
					</view>
					<view class="d-flex a-center j-center flex-1">
						<view>核保笔数</view>
					</view>
					<view class="d-flex a-center j-center flex-1">
						<view>出单笔数</view>
					</view>
					<view class="d-flex a-center j-center flex-1">
						<view>签单保费</view>
					</view>
				</view>
				<view class="dis j-s a-c team_members-data" v-for="(item,index) in teamStaffList1" :key="index">
					<view class="dis j-c a-c">{{item.username}}</view>
					<view class="dis j-c a-c">{{item.ordernum}}</view>
					<view class="dis j-c a-c">{{item.policynum}}</view>
					<view class="dis j-c a-c">{{item.sumpremium}}</view>
				</view>
			</view>

		</view>
		<mx-date-picker :show="showDatePicker" type="range" :value="dateRange" :show-tips="true" @confirm="onSelected"
			@cancel="onSelected" />
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import MxDatePicker from "@/components/modules/tools/team/mx-datepicker/mx-datepicker.vue";
	import SwiperTab from "@/components/modules/tools/team/swiper-tab.vue";

	export default {
		components: {
			SwiperTab,
			MxDatePicker
		},
		data() {
			return {
				queryPeopleId: "",
				queryTimeTypeArray: ['本月查询', '本年查询', '自定义查询'],
				queryTimeTypeIndex: 0,
				dateRange: [new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-01', new Date()
					.getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
				],
				showDatePicker: false,
				teamTabIndex: 0,
				arrdata: [{
						teamlevel: 99,
						name: '总计',
						teamnum: 0, //人数
						sumpremium: 0, //签单保费
						usernum: 0 //出单人力
					},
					{
						teamlevel: 1,
						name: '一级团队',
						teamnum: 0, //人数
						sumpremium: 0, //签单保费
						usernum: 0 //出单人力
					},
					{
						teamlevel: 2,
						name: '二级团队',
						teamnum: 0, //人数
						sumpremium: 0, //签单保费
						usernum: 0 //出单人力
					},
					{
						teamlevel: 3,
						name: '三级团队',
						teamnum: 0, //人数
						sumpremium: 0, //签单保费
						usernum: 0 //出单人力
					},
					{
						teamlevel: 9,
						name: '临时团队',
						teamnum: 0, //人数
						sumpremium: 0, //签单保费
						usernum: 0 //出单人力
					}
				],
				teamStaff: {},
				teamStaffList: [],
				teamStaffList1: []
			}
		},
		async onLoad(params) {
			// this.queryPeopleId = params.id
			if ((!!params.id) && (!!params.name)) {
				this.queryPeopleId = params.id
				await this.queryData()
				uni.setNavigationBarTitle({
					title: params.name + "团队管理"
				});
			} else if (!!this.userInfo) {
				this.queryPeopleId = this.userInfo.sysUser.id
				await this.queryData()
				uni.setNavigationBarTitle({
					title: this.userInfo.sysUser.name + "团队管理"
				});
			} else {
				this.queryPeopleId = this.userInfo.sysUser.id
				await this.queryData()
			}

		},
		onShow() {},
		computed: {
			...mapState(['userInfo']),
			getHeight() {
				let height = uni.getSystemInfoSync().windowHeight - uni.upx2px(770);
				return `height: ${height}px;`;
			}
		},

		methods: {
			change(index) {
				console.log(index)
				this.current = index;
			},
			bindPickerChange: function(e) {
				this.queryTimeTypeIndex = e.target.value
				if (e.target.value == 0) {
					this.dateRange = [new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + '01',
						new Date()
						.getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
					];
					this.queryData();
				}
				if (e.target.value == 1) {
					this.dateRange = [new Date().getFullYear() + '-01-01', new Date().getFullYear() + '-12-31'];
					this.queryData();
				}
				if (e.target.value == 2) {
					this.showDatePicker = true;
				}
			},

			async queryData() {
				this.arrdata.map(val => {
					val.teamnum = 0
					val.sumpremium = 0
					val.usernum = 0
				})
				this.teamTabIndex = 0;
				var params = {
					"id": this.queryPeopleId,
					"mobile": "",
					"name": "",
					"enddate": this.dateRange[1],
					"startdate": this.dateRange[0]
				}
				let res = await this.$http.post('/esm/user/queryTeamPolicy', params);
				if (res.code == '200') {
					res.data.map(ele => {
						this.arrdata.map(val => {
							if (ele.teamlevel == val.teamlevel) {
								Object.assign(val, ele)
								this.arrdata[0].teamnum += ele.teamnum;
								this.arrdata[0].sumpremium += ele.sumpremium;
								this.arrdata[0].usernum += ele.usernum;
							}
							return val;
						})
					})
				}

				let res1 = await this.$http.post('/esm/user/queryUserPolicy', params);
				if (res1.code == '200') {
					this.teamStaffList = res1.data;
					this.teamStaffList1 = res1.data;
				}
			},

			onShowDatePicker() { //显示
				this.showDatePicker = true;
			},
			onSelected(e) { //选择
				this.showDatePicker = false;
				if (e) {
					this.dateRange = e.value;
					this.queryData();
				}
			},
			// 选择团队tap
			teamTabtap(index) {

				this.teamTabIndex = index;
				if (index == 0) {
					this.teamStaffList1 = this.teamStaffList;
				} else if (index == 1) {
					let DataList = this.teamStaffList.filter(val => {
						return val.teamlevel == 1
					})
					this.teamStaffList1 = DataList;
				} else if (index == 2) {
					let DataList = this.teamStaffList.filter(val => {
						return val.teamlevel == 2
					})
					this.teamStaffList1 = DataList;
				} else if (index == 3) {
					let DataList = this.teamStaffList.filter(val => {
						return val.teamlevel == 3
					})
					this.teamStaffList1 = DataList;
				} else if (index == 4) {
					let DataList = this.teamStaffList.filter(val => {
						return val.teamlevel == 9
					})
					this.teamStaffList1 = DataList;
				}
			},
			toTeamMember(index) {
				this.navigate({
					url: "/pages/tools/team/teamMember",
					success: (res) => {
						res.eventChannel.emit("acceptData", {
							item: this.teamStaffList[index]
						})
					}
				}, "navigateTo", true)
			}
		}
	}
</script>

<style>
	.body .statisticsDate {
		padding: 15upx 30upx;
		border-radius: 35upx;
		border: 1px solid #ddd;
		margin: 15upx 30upx;
		font-size: 28upx;
	}

	.body .teamStatistics {
		border-bottom: 15upx solid #ddd;
	}

	.body .teamStatistics .statisticsTitle {
		height: 70upx;
		padding: 0px 30upx;
		box-sizing: border-box;
		line-height: 70upx;
		font-size: 30upx;
		background: #ccc;
	}

	.body .teamStatistics .statisticsContent {
		padding: 0px 30upx;
		box-sizing: border-box;
		height: 70upx;
		line-height: 70upx;
		border-bottom: 1upx solid #ddd;
		font-size: 28upx;
	}

	.body .teamStatistics .statisticsTitle,
	.body .teamStatistics .statisticsContent {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.body .teamStatistics .statisticsTitle>view,
	.body .teamStatistics .statisticsContent>view {
		width: 200upx;
		text-align: center;
	}


	/* 横向滚动选项Start */
	.teamScrollView {
		border-bottom: 15upx solid #ccc;
	}

	/* 横向滚动选项Start */

	/* 团队成员列表Start */
	.team_members {}

	.team_members .team_member {
		min-height: 70upx;
		padding: 0px 30upx;
		box-sizing: border-box;
		line-height: 70upx;
		border-bottom: 1px solid #ddd;
	}

	/* .team_members .team_member:nth-of-type(1){
		background: #CCCCCC;
	} */
	.team_members .team_member>view {
		flex-wrap: nowrap;
	}

	.team_members-data {
		padding: 0 15px;
		border-bottom: 1px solid #ddd;
	}

	.team_members-data>view {
		width: 25%;
		padding: 4px;
	}

	/* 团队成员列表End */
</style>