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]}} - {{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 teamTabBars" :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.personNum}}</view>
						<view class="d-flex a-center j-center">{{item.premium.toFixed(2)}}</view>
						<view class="d-flex a-center j-center">{{item.outSingle}}</view>
					</view>
				</block>
			</view>		
			
			<view class="teamScrollView">
				<swiper-tab :tabBars="teamTabBars" :tabIndex="teamTabIndex" @tabtap="teamTabtap"></swiper-tab>
			</view>
			
			<!-- <search  @search="search"></search> -->
			
			<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>
				
				<z-paging auto-show-back-to-top ref="paging" v-model="teamStaffList" :refresher-enabled="false"  :loading-more-enabled="false"  :mounted-auto-call-reload="false" :style="getHeight">
					<view class="team_member d-flex" v-for="(item,index) in teamStaffList" :key="index" @tap="toTeamMember(index)">
						<view class="d-flex a-center j-center flex-1">
							<view>{{item.sysUser.name}}</view>
						</view>
						<view class="d-flex a-center j-center flex-1" >
							<view>{{item.teamUserCountPriceVO?item.teamUserCountPriceVO.underwriting:0}}</view>
						</view>
						<view class="d-flex a-center j-center flex-1" >
							<view>{{item.teamUserCountPriceVO?item.teamUserCountPriceVO.issue:0}}</view>
						</view>
						<view class="d-flex a-center j-center flex-1">
							<template v-if="item.teamUserCountPriceVO && (item.teamUserCountPriceVO.billPrice>0)">
								<view class="main-text-color">{{item.teamUserCountPriceVO?(item.teamUserCountPriceVO.billPrice).toFixed(2):0}}</view>
							</template>
							<template v-else>
								<view>{{item.teamUserCountPriceVO?(item.teamUserCountPriceVO.billPrice).toFixed(2):'0.00'}}</view>
							</template>
							
						</view>
					</view>
				</z-paging>
				
				
				
				
				
			</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 search from "@/components/modules/orders/search.vue";
	import swiperTab from "@/components/modules/tools/team/swiper-tab.vue";
	import MxDatePicker from "@/components/modules/tools/team/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			search,
			swiperTab,
			MxDatePicker
		},
		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;`;
			}
		},
		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,
				teamTabBars:[
					{id: 1,name: '总计',personNum:'0',orderNum:'0',premium:0,outSingle:0},
					{id: 2,name: '一级团队',personNum:'0',orderNum:'0',premium:0,outSingle:0},
					{id: 3,name:'二级团队',personNum:'0',orderNum:'0',premium:0,outSingle:0},
					{id: 4,name: '三级团队',personNum:'0',orderNum:'0',premium:0,outSingle:0},
					{id: 5,name: '临时团队',personNum:'0',orderNum:'0',premium:0,outSingle:0}
				],
				teamStaff:{},
				teamStaffList:[]
			}
		},
		methods: {
			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(){
				console.log(this.userInfo)
				this.teamTabIndex = 0;
				var params={
				  "id": this.queryPeopleId,
				  "mobile": "",
				  "name": "",
				  "enddate": this.dateRange[1],
				  "startdate": this.dateRange[0]
				}
				let res = await this.$http.post('/esmUserInternal/queryTeamNum',params);
				this.teamTabBars[0].personNum=res.data[0].teamnum;
				this.teamTabBars[1].personNum=res.data[0].level1num;
				this.teamTabBars[2].personNum=res.data[0].level2num;
				this.teamTabBars[3].personNum=res.data[0].level3num;
				this.teamTabBars[4].personNum=res.data[0].tempnum;
				
				this.teamTabBars[0].premium=res.data[0].countPremium;
				this.teamTabBars[1].premium=res.data[0].list1Premium;
				this.teamTabBars[2].premium=res.data[0].list2Premium;
				this.teamTabBars[3].premium=res.data[0].list3Premium;
				this.teamTabBars[4].premium=0;
				
				this.teamTabBars[0].outSingle=res.data[0].countSingle;
				this.teamTabBars[1].outSingle=res.data[0].outSingle1;
				this.teamTabBars[2].outSingle=res.data[0].outSingle2;
				this.teamTabBars[3].outSingle=res.data[0].outSingle3;
				this.teamTabBars[4].outSingle=0;
				
				let res1 = await this.$http.post('/esmUserInternal/queryTeamUser',params);
				this.teamStaff=res1.data;
				var level1Team =this.teamStaff['level1'];
				var level2Team =this.teamStaff['level2'];
				var level3Team =this.teamStaff['level3'];
				var tempTeam =this.teamStaff['temp'];
				this.teamStaffList=level1Team.concat(level2Team).concat(level3Team).concat(tempTeam);
				this.$refs.paging.complete(this.teamStaffList);
			},
			
			onShowDatePicker(){//显示
				if(this.queryTimeTypeIndex == 2){
					this.showDatePicker = true;
				}
			},
			onSelected(e) {//选择
				this.showDatePicker = false;
				if(e) {
					this.dateRange = e.value; 
					this.queryData();
				}
			},
			// 选择团队tap
			teamTabtap(index){
				this.teamTabIndex=index;
				
				var level1Team =this.teamStaff['level1'];
				var level2Team =this.teamStaff['level2'];
				var level3Team =this.teamStaff['level3'];
				var tempTeam =this.teamStaff['temp'];
				if(index ==0){
					this.teamStaffList=level1Team.concat(level2Team).concat(level3Team).concat(tempTeam);
				}else if(index ==1){
					this.teamStaffList=level1Team;
				}else if(index ==2){
					this.teamStaffList=level2Team;
				}else if(index ==3){
					this.teamStaffList=level3Team;
				}else if(index ==4){
					this.teamStaffList=tempTeam;
				}
				this.$refs.paging.complete(this.teamStaffList);
			},
			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;
	}
	/* 团队成员列表End */
</style>