partnerApp/pages/institutional/detail.vue

<template>
	<view class="" >
		<public-module></public-module>
		<view class="headers ">
			<view class="dis a-c j-start ">
				<u-icon name="arrow-left"  size="40" @tap="back"></u-icon>
				<text style="margin: auto;">{{pageTtile}}</text>
			</view>
		</view>
		<view class="querystyle body" style="padding-top: 70px;">
			<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="#333" 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 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.userName}}</view>
							<view class="dis a-c j-c">{{item.quoteNum}}</view>
							<view class="dis a-c j-c">{{item.underwriteNum.toFixed(2)}}</view>
							<view class="dis a-c j-end">{{item.issueNum}}</view>
							<view class="dis a-c j-end">{{item.sumpremium}}</view>
						</view>
					</view>
	
				</block>
				<u-loadmore style="margin-top: 5px;" v-if="SummaryList.length!=0" :status="status" />
				<o-empty v-if="SummaryList.length==0" />
			</view>
			
		</view>
		

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

<script>
	import MxDatePicker from "@/components/modules/tools/team/mx-datepicker/mx-datepicker.vue";
	export default{
		data(){
			return{
				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: [],
				pageTtile: "",
				deptId:'',
				totalPages:0,
				status: 'loadmore',
				pageRequest: { //查询的默认条件
					pageNum: 1,
					pageSize: 20,
				},
			}
		},
		components: {
			MxDatePicker
		},
		async onLoad(params) {
			this.deptId=params.deptId
			this.pageRequest.startTime=params.startTime
			this.pageTtile=params.deptName
			this.queryData()
		},
		methods:{
			onReachBottom() {
				if (this.pageRequest.pageNum >= this.totalPages) return;
				this.status = 'loading';
				this.pageRequest.pageNum = ++this.pageRequest.pageNum;
				setTimeout(async () => {
					let res = await this.$http.post('/agency/queryTeamUser', {
						...this.pageRequest,
						"enddate": this.dateRange[1]+' 23:59:59',
						"beginTime": this.dateRange[0] +' 00:00:01',
						deptId:this.deptId
				});
					if (res.code == '200') {
						this.SummaryList = [...this.SummaryList, ...res.data.content];
					}
					if (this.pageRequest.pageNum >= this.totalPages) this.status = 'nomore';
					else this.status = 'loading';
				}, 1000)
			},
			//页面返回按钮
			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;
				}
			},
			onSelected(e) { //选择
				this.showDatePicker = false;
				if (e) {
					this.dateRange = e.value;
					this.queryData();
				}
			},
			async queryData() {
				let params = {
					"enddate": this.dateRange[1]+' 23:59:59',
					"beginTime": this.dateRange[0] +' 00:00:01',
					deptId:this.deptId,
					...this.pageRequest
				}
				let res = await this.$http.post('/agency/queryTeamUser', params);
				if (res.code == '200') {
					this.SummaryList=res.data.content
					this.totalPages = res.data.totalPages;
					if (this.pageRequest.pageNum >= res.data.totalPages) this.status = 'nomore';
					else this.status = 'loadmore';
				}
			},
			onShowDatePicker() { //显示
				this.showDatePicker = true;
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.teamStatistics {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 4px 10px 0px #DAE3F4;
		border-radius: 6px;
	
	
	}
	
	.body .teamStatistics .statisticsTitle {
		height: 70upx;
		padding: 0px 15upx;
		margin-top: 10px;
		box-sizing: border-box;
		
		line-height: 70upx;
		font-size: 24rpx;
		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;
	}
	.statisticsDate {
		color: rgba(51,51,51,0.8);
		height: 34px;
		background: rgba(255,255,255,0.4);
		border-radius: 6px;
	}
	.teamStatistics .statisticsTitle {
		height: 70upx;
		padding: 0px 30upx;
		margin-top: 10px;
		box-sizing: border-box;
		line-height: 70upx;
		font-size: 24rpx;
		background: linear-gradient( 180deg, #DAE0EE 0%, #E9ECF4 100%);
		border-radius: 6px 6px 0 0;
		color: #232832;
	}
	.headers {
		position: fixed;
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 16px;
		padding-top: 50px;
		height: auto;
		background: #E2E5FE;
		text {
			font-size: 18px;
			font-weight: bold;
		}
		
	}
	.querystyle {
		width: 100%;
		height: 200px;
		background: #F8FAFE;
		background: linear-gradient( 180deg, #E1E4FD 0%, rgba(248,250,254,0) 100%);
		padding: 0 16px;
	}
</style>