partnerApp/pages/institutional/partner.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 style="margin: auto;">合伙人</text>
			</view>
		</view>
		
        <view class="body"   style="background: #F8FAFE;margin-top: 85px;">
			<view class="partner-head">
				<seach  @queryData="queryData" :partnerHierarchy="true" />
				<!-- <view class=" dis j-s" style="border: 1px solid #EEEEEE;padding: 10px;">
					<text>行业分类<i></i></text>
					<text>合伙人层级<i></i></text>
					<view class="search-data" >
						<text v-for="(val,index) in year" :key="index" :class="val.startShow? 'active' :''" @click="onSeachYear(index)">{{val.lable}}</text>
					</view>
				</view> -->
				<!-- <view class="sum-insurance dis j-c a-c">
					<view >
						<text>{{directLsit[Object.keys(directLsit)[0]].sumPremium}}</text>
						<text>总保费</text>
					</view>
					<view>
						<text>{{directLsit[Object.keys(directLsit)[0]].teamManNum}}</text>
						<text>成员总人数</text>
					</view>
					<view style="border-right:none">
						<text>{{directLsit[Object.keys(directLsit)[0]].extractFee}}</text>
						<text>总佣金</text>
					</view>
				</view> -->
			</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="dis j-s card-title">
						<view>
							<text>{{chineseNumbers[item.partnerType-1]}}级合伙人</text>
							<image v-if="item.partnerType==1"  style="display: inline-block; width: 45px;height:18px;vertical-align: sub;" src="/static/icon/级别 (5).png" mode=""></image>
							<image v-if="item.partnerType==2"  style="display: inline-block; width: 45px;height:18px;vertical-align: sub;" src="/static/icon/级别.png" mode=""></image>
							<image v-if="item.partnerType==3"  style="display: inline-block; width: 45px;height:18px;vertical-align: sub;" src="/static/icon/级别 (1).png" mode=""></image>
							<image v-if="item.partnerType==4"  style="display: inline-block; width: 45px;height:18px;vertical-align: sub;" src="/static/icon/级别 (2).png" mode=""></image>
						</view>
						<!-- <text>详情 
						<image style="display: inline-block; width: 9px;height:9px;vertical-align: -1px;" src="/static/icon/向右.png" mode=""></image></text> -->
					</view>
					<view class="card-con dis j-c a-c">
						<view >
							<text>{{item.teamManNum}}</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 class="card-footer dis">
						<text style="border-right: 1px solid #EEEEEE;" @click="partnerDetail(item)">
							<image  src="/static/icon/hehuoren.png" mode=""></image>
							合伙人（{{item.partnerNumber}}）
						</text>
						<text @click="closeInstitution(item)">
							<image  src="/static/icon/gongzuoshi.png" mode="" ></image>
							工作室（{{item.workNumber}}）
						</text>
					</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{
				chineseNumbers:[ '一', '二', '三', '四', '五', '六', '七', '八', '九'],
				headerStyle: {
					backgroundColor: 'transparent',
					backgroundImage: 'url("/static/背景 (1).png")',
					backgroundSize: 'cover',
					backgroundPosition: '',
					boxShadow: ''
					// 其他样式属性...
				},
				teamTabIndex: 0,
				directLsit: [],
                source:0,
				totalPages:0,
                totalSize:0,
				status: 'loadmore',
				pageRequest: { //查询的默认条件
					pageNum: 1,
					pageSize: 20,
                    userName:''
				},
			}
		},
		async onLoad(params) {
			this.queryData()

		},
		methods:{
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
				
			},
			partnerDetail(item){
				uni.navigateTo({
					url: "/pages/institutional/partnerDetail?key="+encodeURIComponent(JSON.stringify(item))
				})
			},
			closeInstitution(item){
				if(item.leaderIds.length>0){
					item.type=1
					uni.navigateTo({
						url: "/pages/institutional/institutionalTeam?key="+encodeURIComponent(JSON.stringify(item))
					})
				}
			},
			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  || '',
					partnerType:data&& data.partnerType  ||'',
					industrySector:data&& data.industrySector  ||'',
					// ...this.pageRequest
				}
				let res = await this.$http.post('/APPPartner/info', params);
				if (res.code == '200') {
					res.data.forEach(e=>{
						if(e.partnerType){
							e.level=e.partnerType-1
						}
					})
					this.directLsit=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 {
			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:10px 15px;
			text:first-child{
				font-weight: 600;
				font-size: 16px;
				color: #333333;
			}
			text:last-child{
				font-size: 12px;
				color: #666666;
			}
		}
		.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;
					}
				}
		}
		.card-footer{
			border-top: 1px solid #EEEEEE;
			line-height: 42px;
			image{
				display: inline-block; 
				width: 17px;
				height:17px;
				vertical-align: middle;
				margin-right: 8px;
			}
			text{
				width: 49%;
				text-align: center;
				line-height: 40px;
				font-size: 16px;
				color: #333333;
			}
		}
	}
</style>