partnerApp/pages/institutional/institutionalDetail.vue

<template>
	<view class="" >
		<public-module></public-module>
		 <view class="headers " :style="headerStyle">
			<view class="dis a-c j-start " style="padding: 0 15px;">
				<!-- <u-icon name="arrow-left"  size="40" @tap="back"></u-icon> -->
				<text  @tap="back">返回</text>
				<text style="margin: auto;">{{parentData.deptName}}</text>
				<text  @tap="backHome">首页</text>
			</view>
		</view>
		
        <view class="body"   style="background: #F8FAFE;margin-top: 85px;">
			<view class="partner-head">
				<seach  @queryData="queryData" :directLsit='parentData' />
			</view>
			<!-- <card :cardData='directLsit'></card> -->
			<block v-for="(item,index) in directLsit" :key="index">
				<view class="card" >
					<view style="padding: 10px 15px 0 10px">
					<view class="card-title">
						<text>{{item.userName}}</text>
					</view>
					<view class="card-con dis j-c a-c">
						<view >
							<text>{{item.leaderName || '无'}}</text>
							<text>推荐人</text>
						</view>
						<view>
							<text>{{item.sumPremium}}</text>
							<text>总保费</text>
						</view>
						<view style="border-right:none">
							<text>{{item.extractFee}}</text>
							<text>我的佣金</text>
						</view>
					</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>
</template>
<script>
	import myDatePicker from '../components/date-picker.vue';
	import seach from '../components/seach.vue';
	// import card from '../components/card.vue'
	export default{
		components:{myDatePicker,seach},
		data(){
			return{
				startShow:false,
				year:[{
					lable:'日',
					startShow:false
				},{
					lable:'月',
					startShow:false
				},{
					lable:'季',
					startShow:false
				},{
					lable:'年',
					startShow:false
				},{
					lable:'自定义',
					startShow:false
				}],
				chineseNumbers:[ '一', '二', '三', '四', '五', '六', '七', '八', '九'],
				headerStyle: {
					backgroundColor: 'transparent',
					backgroundImage: 'url("/static/beijing (2).png")',
					backgroundSize: 'cover',
					backgroundPosition: '',
					boxShadow: ''
					// 其他样式属性...
				},
				teamTabIndex: 0,
				directLsit: [],
                source:0,
				totalPages:0,
                totalSize:0,
				status: 'loadmore',
				pageRequest: { //查询的默认条件
					pageNum: 1,
					pageSize: 20,
                    userName:''
				},
				parentData:{}
			}
		},
		async onLoad(e) {
			this.parentData = JSON.parse(decodeURIComponent(e.key));
			this.queryData()

		},
		methods:{
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},
			backHome() {
			uni.switchTab({
					url: "/pages/index/index"
				})
			},
			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('/sysPartner/querySysPartnerAPPPage', {
						...this.pageRequest,
                        source:this.source
				});
					if (res.code == '200') {
					this.totalSize = res.data.totalSize;
						this.directLsit = [...this.directLsit, ...res.data.content];
					}
					if (this.pageRequest.pageNum >= this.totalPages) this.status = 'nomore';
					else this.status = 'loading';
				}, 1000)
			},
			
			async queryData(data) {
				let params = {
					beginTime:data&& data.beginTime || '',
					endTime:data&& data.endTime  || '',
					userIds:this.parentData.userIds,
					industrySector:data && data.industrySector  ||'',
					// ...this.pageRequest
				}
				let res = await this.$http.post('/APPPartner/getTeamUserInfo', params);
				if (res.code == '200') {
					this.directLsit=res.data.teamUserInfosVoList
					this.parentData= {...this.parentData,...res.data}
					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>
	
	.headers {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999999;
		padding-top: 40px;
		    height: 85px;
			text:nth-child(2){
			font-size: 18px;
			font-weight: bold;
		}
	}
	.partner-head{
		background: #FFFFFF;
		color: #333333;
		font-size: 14px;
		i{
			margin-left: 2px;
			display:inline-block;
			width: 0;
			height: 0;
			border: 4px solid;
			border-color: #666666;
			border-bottom: 4px solid transparent; 
			border-right: 4px solid transparent;
			border-left: 4px solid transparent;
		}
		.search-data{
			color: #666666;
			.active{
				color: #FFFFFF;
				background: linear-gradient( 132deg, #2DD9FF 0%, #2D6DFF 100%);
			}
			text{
				// width: 25px;
				// height: 25px;
				// text-align: center;
				padding: 5px 8px;
				border: 1px solid #EEEEEE;
			}
		}
	}
	.sum-insurance{
		padding: 10px 0;
		view{
			text-align: center;
			width: 33.33%;
			border-right: 1px solid #EEEEEE;
				text{
					display: block;
				}
				text:first-child{
					font-weight: 600;
					font-size: 18px;
					color: #333333;
				}
				text:last-child{
					font-size: 10px;
					color: #999999;
				}
			}
	}
	.card{
		background: #FFFFFF;
		border-radius: 5px 5px 5px 5px;
		margin: 10px;
		background-image: url("/static/card.png");
		background-size: 100% 100%;
		border-top: 1px solid;
		border-image: linear-gradient(270deg, rgba(45, 217, 255, 0), rgba(45, 217, 255, 1), rgba(45, 217, 255, 0)) 1 1;
		
		.card-title{
			padding:0 15px;
			text-align: center;
			text{
				font-weight: 600;
				font-size: 16px;
				color: #333333;
			}
		
		}
		.card-con{
			padding: 10px 0;
			view{
				text-align: center;
				width: 33.33%;
				border-right: 1px solid #EEEEEE;
					text{
						display: block;
					}
					text:first-child{
						font-weight: 600;
						font-size: 16px;
						color: #333333;
						line-height: 18px;
					}
					text:last-child{
						font-size: 10px;
						color: #999999;
					}
				}
		}
		
	}
</style>