partnerApp/pages/tools/team/team.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="headers " :style="headerStyle">
			<view class="dis a-c j-start ">
				<u-icon name="arrow-left" color="#fff" size="40" @tap="back"></u-icon>
				<text style="margin: auto;">{{pageTtile}}</text>
			</view>
		</view>
		<view class="" style="padding-top: 98px;">
			<view class="querystyle body">
				<view class="statisticsDate dis a-c ">
					<view style="width: 180upx;flex-shrink: 0;" class="dis a-c j-c">
						<picker style="padding: 0;margin-right: 5px;" @change="bindPickerChange"
							:value="queryTimeTypeIndex" :range="queryTimeTypeArray">
							<view>{{queryTimeTypeArray[queryTimeTypeIndex]}}</view>
						</picker>
						<u-icon name="arrow-down-fill" color="#fff" size="16"></u-icon>
					</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-start">团队级别</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-end">出单人力</view>
					</view>
					<block v-for="(item,index) in SummaryList" :key="index">
						<view class="" style="padding: 0 10px;">
							<view class="statisticsContent " :class="index==teamTabIndex?'active':''">
								<view class="dis a-c j-start">{{item.teamlevel}}</view>
								<view class="dis a-c j-c">{{item.teamnum}}</view>
								<view class="dis a-c j-c">{{item.sumpremium.toFixed(2)}}</view>
								<view class="dis a-c j-end">{{item.usernum}}</view>
							</view>
						</view>

					</block>
				</view>
			</view>
		</view>
		<view class="userdata">
			<u-tabs class="tabclass" :list="arrdata" :is-scroll="false" :current="teamTabIndex"
				@change="arrchange"></u-tabs>
			<view class="team_members">
				<view class="team_member d-flex">
					<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 class="d-flex a-center j-center flex-1">
						<view>签单保费</view>
					</view>
				</view>
				<view class="dataOver">
					<view v-if="teamTabIndex==0" class="dis j-s a-c team_members-data"
						v-for="(item,index) in userPolicyList1" :key="index"
						@click="toTeamMember('userPolicyList1',index)">
						<view class="dis j-start a-c">{{item.username}}</view>
						<view class="dis j-c a-c">{{item.bjpolicynum}}</view>
						<view class="dis j-c a-c">{{item.policynum}}</view>
						<view class="dis j-c a-c">{{item.ordernum}}</view>
						<view class="dis j-end a-c">{{item.sumpremium}}</view>
					</view>
					<view v-if="teamTabIndex==1" class="dis j-s a-c team_members-data"
						v-for="(item,index) in userPolicyList2" :key="index"
						@click="toTeamMember('userPolicyList2',index)">
						<view class="dis j-start a-c">{{item.username}}</view>
						<view class="dis j-c a-c">{{item.bjpolicynum}}</view>
						<view class="dis j-c a-c">{{item.policynum}}</view>
						<view class="dis j-c a-c">{{item.ordernum}}</view>
						<view class="dis j-end a-c">{{item.sumpremium}}</view>
					</view>
					<view v-if="teamTabIndex==2" class="dis j-s a-c team_members-data"
						v-for="(item,index) in userPolicyList3" :key="index"
						@click="toTeamMember('userPolicyList3',index)">
						<view class="dis j-start a-c">{{item.username}}</view>
						<view class="dis j-c a-c">{{item.bjpolicynum}}</view>
						<view class="dis j-c a-c">{{item.policynum}}</view>
						<view class="dis j-c a-c">{{item.ordernum}}</view>
						<view class="dis j-end a-c">{{item.sumpremium}}</view>
					</view>
					<view v-if="teamTabIndex==3" class="dis j-s a-c team_members-data"
						v-for="(item,index) in userPolicyList4" :key="index"
						@click="toTeamMember('userPolicyList4',index)">
						<view class="dis j-start a-c">{{item.username}}</view>
						<view class="dis j-c a-c">{{item.bjpolicynum}}</view>
						<view class="dis j-c a-c">{{item.policynum}}</view>
						<view class="dis j-c a-c">{{item.ordernum}}</view>
						<view class="dis j-end a-c">{{item.sumpremium}}</view>
					</view>
					<view v-if="teamTabIndex==4" class="dis j-s a-c team_members-data"
						v-for="(item,index) in userPolicyList5" :key="index"
						@click="toTeamMember('userPolicyList5',index)">
						<view class="dis j-start a-c">{{item.username}}</view>
						<view class="dis j-c a-c">{{item.bjpolicynum}}</view>
						<view class="dis j-c a-c">{{item.policynum}}</view>
						<view class="dis j-c a-c">{{item.ordernum}}</view>
						<view class="dis j-end a-c">{{item.sumpremium}}</view>
					</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 {
				headerStyle: {
					backgroundColor: '',
					backgroundImage: '',
					backgroundSize: '',
					backgroundPosition: '',
					boxShadow: ''
					// 其他样式属性...
				},
				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,
				SummaryList: [],
				userPolicyList1: [],
				userPolicyList2: [],
				userPolicyList3: [],
				userPolicyList4: [],
				userPolicyList5: [],
				arrdata: [{
						teamlevel: 0,
						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: 4,
						name: '三级',
						teamnum: 0, //人数
						sumpremium: 0, //签单保费
						usernum: 0 //出单人力
					},
					{
						teamlevel: 9,
						name: '临时',
						teamnum: 0, //人数
						sumpremium: 0, //签单保费
						usernum: 0 //出单人力
					}
				],
				teamStaff: {},
				teamStaffList: [],
				pageTtile: "",
			}
		},
		async onLoad(params) {
			this.pageTtile = this.userInfo.sysUser.name + "团队管理"
			// this.queryPeopleId = params.id
			if ((!!params.id) && (!!params.name)) {
				this.queryPeopleId = params.id;
				await this.queryData()
			} 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: {
			//页面返回按钮
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},
			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;
				}
			},
			arrchange(e) {
				this.teamTabIndex = e;
			},
			async queryData() {
				let params = {
					"enddate": this.dateRange[1],
					"startdate": this.dateRange[0]
				}
				let res = await this.$http.post('/esm/user/queryUserCount', params);
				if (res.code == '200') {
					this.SummaryList = res.data.hzList;
					this.userPolicyList1 = res.data.userPolicyList;
					this.userPolicyList2 = res.data.userPolicyList0;
					this.userPolicyList3 = res.data.userPolicyList1;
					this.userPolicyList4 = res.data.userPolicyList2;
					this.userPolicyList5 = res.data.userPolicyList3;
					this.SummaryList.map(ele => {
						this.arrdata.map(val => {
							if (ele.teamlevel.includes(val.name)) {
								val.teamnum = ele.teamnum;
							}
						})

					})
				}
			},

			onShowDatePicker() { //显示
				this.showDatePicker = true;
			},
			onSelected(e) { //选择
				this.showDatePicker = false;
				if (e) {
					this.dateRange = e.value;
					this.queryData();
				}
			},
			// 选择团队tap
			teamTabtap(index) {
				console.log(index)
				this.teamTabIndex = index;
			},
			toTeamMember(name, index) {
				this.navigate({
					url: "/pages/tools/team/teamMember",
					success: (res) => {
						res.eventChannel.emit("acceptData", {
							item: this[name][index]
						})
					}
				}, "navigateTo", true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.active {
		color: #FF5600 !important;
	}

	page {
		background-color: #F8FAFE;
		height: 100%;
	}

	.userdata {
		padding: 16px;
		margin-top: 75px;
	}

	.dataOver {
		max-height: calc(100vh - 480px);
		overflow-y: auto;
	}

	.tabclass {
		background-color: transparent !important;
	}

	.querystyle {
		width: 100%;
		height: 200px;
		background: #F8FAFE;
		background-image: url("/static/image/team/bg1.png");
		background-size: 100% 100%;
		padding: 0 16px;
	}

	.headers {
		position: fixed;
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 16px;
		padding-top: 50px;
		height: auto;
		background: #3D74FE;

		text {
			font-size: 18px;
			font-weight: bold;
			color: #fff;
		}
	}

	.body .statisticsDate {
		color: #fff;
		height: 34px;
		background: rgba(51, 94, 203, 0.5);
		border-radius: 6px;
	}

	.statisticsContent {
		border-bottom: 1upx solid #ddd;
	}

	.statisticsContent:last-child() {
		border: none,
	}

	.body .teamStatistics {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		border-radius: 6px;


	}

	.body .teamStatistics .statisticsTitle {
		height: 70upx;
		padding: 0px 30upx;
		margin-top: 10px;
		box-sizing: border-box;
		line-height: 70upx;
		font-size: 24rpx;
		background: #FFEFE6;
		border-radius: 6px 6px 0 0;
		color: #232832;
	}

	.body .teamStatistics .statisticsContent {
		box-sizing: border-box;
		height: 70upx;
		line-height: 70upx;
		font-size: 26rpx;
		color: #232832;


	}

	.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;
		font-size: 12px;
	}


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

	/* 横向滚动选项Start */

	/* 团队成员列表Start */
	.team_members {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		border-radius: 6px;
	}

	.team_members .team_member {
		min-height: 70upx;
		box-sizing: border-box;
		line-height: 70upx;
		width: 100%;
		height: 34px;
		background: #E7ECFD;
		border-radius: 6px 6px 0px 0px;
	}

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

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

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

	}


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