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 = {
					"userid": this.queryPeopleId,
					"mobile": "",
					"name": "",
					"enddate": this.dateRange[1],
					"startdate": this.dateRange[0]
				}
				let res = await this.$http.post('/esm/user/queryTeamNum', params);
				console.log(res)
				this.teamTabBars[0].personNum = res.data[2].teamnum;
				this.teamTabBars[1].personNum = res.data[2].level1num;
				this.teamTabBars[2].personNum = res.data[2].level2num;
				this.teamTabBars[3].personNum = res.data[2].level3num;
				this.teamTabBars[4].personNum = res.data[2].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>