partnerApp/pages/institutional/institution.vue

<template>
	<view class="" >
		<public-module></public-module>
		<u-tabs :list="list" :is-scroll="false" :current="source" @change="change"></u-tabs>
        <view class="body"   style="background: #F8FAFE;padding:12px">

			<view class=" dis a-c j-s">
                    <u-search v-model="pageRequest.deptName"  style ='borderRadius: 0px 0px 0px 0px"' @search="search" 
                        :height='68' bg-color="#fff"   :show-action="false" 
                        :input-style="{background:'transparent'}" placeholder-color="#ccc" 
                        :input-align="inputAlign"
                        :action-style="{background:'#fff'}" placeholder="请输入机构名称"></u-search>
                    <text style="margin-left:55px" class="button1">共 {{totalSize}}个</text> 
            </view>
			<view class="teamStatistics "  >
				<view class="statisticsTitle">
					<view >机构名称</view>
					<view >团队数量</view>
					<view >人员数量</view>
					<view >保费收入</view>
				</view>
				<block v-for="(item,index) in directLsit" :key="index">
					<view class="" style="padding: 0 10px;">
						<view class="statisticsContent " :class="index==teamTabIndex?'active':''">
							<view >{{item.deptName}}</view>
							<view >{{item.deptNum}}</view>
							<view >{{item.deptManNum}}</view>
							<view >{{item.sumpremium}}</view>
						</view>
					</view>
	
				</block>
				<u-loadmore style="margin-top: 5px;" v-if="directLsit.length!=0" :status="status" />
				<o-empty v-if="directLsit.length==0"  />
			
		</view>
    </view>

		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				teamTabIndex: 0,
				directLsit: [],
				inputAlign: 'left',
                source:0,
				totalPages:0,
                totalSize:0,
				status: 'loadmore',
				pageRequest: { //查询的默认条件
					pageNum: 1,
					pageSize: 20,
                    deptName:''
				},
                list: [{
					name: '直接机构'
				}, {
					name: '间接机构'
				}],
			}
		},
		async onLoad(params) {
			this.queryData()
		},
		methods:{
			search(e) {
				this.pageRequest.deptName=e
				this.queryData()
			},
            change(index) {
                this.pageRequest.deptName=''
				this.source = index;
				this.pageRequest.pageNum = 1;
          		this.pageRequest.pageSize = 2
				0;
			    this.queryData()
			},
			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,
                        source:this.source
				});
					if (res.code == '200') {
						this.directLsit = [...this.directLsit, ...res.data.content];
					    this.totalSize = res.data.totalSize;
					}
					if (this.pageRequest.pageNum >= this.totalPages) this.status = 'nomore';
					else this.status = 'loading';
				}, 1000)
			},
			onSelected(e) { //选择
				this.showDatePicker = false;
				if (e) {
					this.dateRange = e.value;
					this.queryData();
				}
			},
			async queryData() {
				let params = {
                    source:this.source,
					...this.pageRequest
				}
				let res = await this.$http.post('/agency/queryWorkroomPage', params);
				if (res.code == '200') {
					this.directLsit=res.data.content
					this.totalPages = res.data.totalPages;
					this.totalSize = res.data.totalSize;
                    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;
		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;
        text-align: center;
		line-height: 70upx;
		font-size: 26rpx;
		color: #232832;
        view{
            text-align: center;
		line-height: 70upx;
        }
	}
	
	.body .teamStatistics .statisticsTitle,
	.body .teamStatistics .statisticsContent {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	.body .teamStatistics .statisticsTitle>view,
	.body .teamStatistics .statisticsContent>view {
		width: 25%;
		text-align: center;
		font-size: 12px;
	}
	.statisticsDate {
		color: rgba(51,51,51,0.8);
		height: 34px;
		border-radius: 6px;
	}
	.teamStatistics .statisticsTitle {
		height: 70upx;
		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;
        view{
            text-align: center;
            line-height: 35px;
        }
        view:nth-child(1){
            background: #EBEFF8 ;
            line-height: 35px;
        }
        view:nth-child(2){
            background: #FEF0E1  ;
            color: #EF871C;
        }
        view:nth-child(3){
            background: #E6FAE3;
            color: #3AC716;
        }
        view:nth-child(4){
            background: #EEF0FD;
            color: #3640F0;
        }
	}
	
    .button1{
		background-color: #FEF0E1 ;
		color: #FE8F1C ;
		font-size: 11px;
		padding:5px 10px
	}
</style>