partnerApp/pages/institutional/partnerDetail.vue

<template>
	<view class="">
		<public-module></public-module>
		<view class="headers dis a-c j-start">
			<u-icon name="arrow-left" color="#333" size="38" @click="back"></u-icon>
			<text style="margin: auto;">管理人详情</text>
		</view>
		<view class="homeBackground"></view>
		<view class="intro dis a-c ">
			<image src="/static/image/my/wuxingb.png" mode=""></image>
			<view class="dis f-c ml-3">
				<text class="title">{{referrerInfo.userName}}</text>
				<text>{{referrerInfo.mobile}}</text>
				<view class="dis a-c">
					<text>推荐人：{{referrerInfo.referrerName}}</text>
					<view class="level dis  a-c j-c ">
						{{referrerInfo.referrerGrade}}
					</view>
				</view>

			</view>
		</view>
		<view class="body p-2" style="padding-top: 400rpx;">
			<view class="card mb-2" v-for="(item,index) in userlist" :key="index">
				<view class="card-title dis a-c j-s mb-2">
					<view class="dis a-c ">
						<view class="avatar">
							<image src="/static/image/my/wuxingb.png" mode=""></image>
						</view>
						<text class="name ml-1">{{item.userName}}</text>
					</view>
					<text>{{item.createTime}} &nbsp;加入</text>
				</view>
				<view class="card-data dis a-c j-s ">
					<view class="view dis f-c a-c ">
						<text>{{item.number}}</text>
						<text>{{item.gradeName}}</text>
					</view>
					<view class="view dis f-c a-c ">
						<text>{{item.premium}}</text>
						<text>保费</text>
					</view>
					<view class="view dis f-c a-c ">
						<text>{{item.commission}}</text>
						<text>我的佣金</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				referrerInfo: {}, //个人信息
				userlist: [],
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.querydata();
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},
			async querydata() {
				let res = await this.$http.get('/newAppPartner/selectByIdList?id=' + this.id + '&startTime=' +
					this
					.startTime + '&endTime=' + this.endTime);
				if (res.code == '200') {
					this.referrerInfo = res.data.referrer;
					this.userlist = res.data.list;
				}
			},
			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)
			},

		}

	}
</script>

<style lang="scss" scoped>
	.headers {
		position: fixed;
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		z-index: 999999;
		padding: 30rpx;
		padding-top: 50px;

		text {
			font-size: 36rpx;
			font-weight: bold;
			color: #000;
		}



		.right {
			position: absolute;
			right: 30rpx;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 4rpx;
			}

			text {
				font-weight: 400;
				color: #000;
				font-size: 24rpx;
			}
		}
	}

	//头部背景
	.homeBackground {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 176rpx;
		background: linear-gradient(180deg, #D1EFFE 0%, #FFFFFF 100%);
		border-bottom: 1rpx solid #f2f2f2;
	}

	.intro {
		position: fixed;
		top: 176rpx;
		left: 0;
		z-index: 999;
		width: 100%;
		padding: 25rpx 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;

		image {
			width: 128rpx;
			height: 128rpx;

		}

		text {
			font-size: 28rpx;
			color: #666;
		}

		.title {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
		}

		.level {
			padding: 0 10rpx;
			box-sizing: border-box;
			font-size: 22rpx;
			color: #2D6DFF;
			border: 1rpx solid #2D6DFF;
			border-radius: 4rpx;
			margin-left: 20rpx;
			background: rgba(45, 109, 255, 0.1);
		}

	}

	//列表数据
	.card {
		background: #FFFFFF;
		border-radius: 10rpx;
		background-image: url("/static/card.png");
		background-size: 100% 100%;
		border-top: 1px solid;
		border-image: linear-gradient(270deg, rgba(45, 109, 255, 0), rgba(45, 109, 255, 1), rgba(45, 109, 255, 0)) 1 1;
		padding: 20rpx 30rpx 30rpx;

		.card-title {
			.avatar {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;

				image {
					width: 100%;
					height: 100%;
				}
			}

			>text {
				font-size: 24rpx;
				color: #666;
			}

			.name {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}
		}

		.card-data {
			.view {
				width: 33.33%;

				text:first-child {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
				}

				text:last-child {
					font-size: 24rpx;
					color: #999;
				}
			}

			.view:nth-child(2) {
				border-left: 1rpx solid #eee;
				border-right: 1rpx solid #eee;
			}
		}

	}
</style>