partnerApp/pages/institutional/partner.vue

<template>
	<view class="">
		<!-- 全局 loding -->
		<public-module></public-module>

		<!-- 头部 -->
		<view class="headers ">
			<!-- 头部身份切换 -->
			<view class="roleIdentity dis a-c j-s">
				<u-icon name="arrow-left" color="#333" size="38" @click="back"></u-icon>
				<view class="headers-activeTab">
					<u-tabs :list="tablist" :is-scroll="true" active-color="#333" inactive-color="#999"
						:current="current" :show-bar="false" @change="change" name="gradeName" height="50"
						:active-item-style="{fontSize:'36rpx'}" style="background: transparent;"></u-tabs>
				</view>
				<view class="right dis a-c">
					<image src="/static/home/customerService1.png" mode=""></image>
					<text>客服</text>
				</view>
			</view>
			<!-- 下拉筛选 -->
			<view class="filter dis a-c j-end">
				<view class="filterTime dis a-c " @click="timeDropdownFilter">
					<text>时间筛选</text>
					<text>▼</text>
				</view>
			</view>
			<!-- 数据统计 -->
			<view class="statistics dis a-c j-c " v-if="totalInfo">
				共有 {{totalInfo.numberOrders}} 笔订单，保费{{totalInfo.totalPremium}}元，佣金{{totalInfo.commission}}元
			</view>
		</view>
		<view class="body p-2" style="padding-top: 340rpx;">
			<view class="card mb-2" v-for="(item,index) in personlist.data.records" :key="index">
				<!-- 权限锁定组件 -->
				<uni-permission-view position="fixed" :backimage="true"
					v-if="personlist.parentStatus=='2' && index==personlist.data.records.length-1" direction="row"
					:genericText="`完成任务，解锁“${personlist.gradeName.slice(2)}”，查看所有下级成员`" cornerRadius="8rpx"
					:genericTextStyle="{fontSize:'26rpx'}">
				</uni-permission-view>
				<!-- 权限锁定组件 -->
				<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 " @click.stop="partnerDetail(item.id)">
					<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>{{numberFormat(item.premium || 0 )}}</text>
						<text>保费</text>
					</view>
					<view class="view dis f-c a-c ">
						<text>{{numberFormat(item.commission || 0 )}}</text>
						<text>我的佣金</text>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if=" personlist.data.records && personlist.data.records.length!=0" :status="status" />
		<my-date-picker ref="datePicker" @confirmPickDate="confirmPickDate" />
	</view>
</template>
<script>
	import myDatePicker from '../components/date-picker.vue';
	import QR from "@/common/wxqrcode.js"

	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {
			myDatePicker
		},
		computed: {
			...mapState(['userInfo', "userCheckInfo"]),
		},
		data() {
			return {
				//tab选项
				totalInfo: {}, //选中角色统计数据
				tablist: [], //动态tab
				personlist: [],
				current: 0,
				status: 'loadmore',
				pageQuery: {
					grade: "",
					startTime: "",
					endTime: "",
					pageNum: 1,
					pageSize: 5,
				}

			}
		},
		onReachBottom() {
			if (this.pageQuery.pageNum >= this.personlist.data.totalPages) return;
			this.status = 'loading';
			this.pageQuery.pageNum = ++this.pageQuery.pageNum;
			setTimeout(async () => {
				let res = await this.$http.post('/newAppPartner/selectByGradeList', this.pageQuery);
				if (res.code == '200') {
					this.personlist.data.records = [...this.personlist.data.records, ...res.data[this.current]
						.data.records
					];
				}
				if (this.pageQuery.pageNum >= this.personlist.data.totalPages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		},
		async onLoad(params) {
			this.pageQuery.grade = params.grade;
			if (params.startTime) {
				this.pageQuery.startTime = params.startTime;
				this.pageQuery.endTime = params.endTime;
			}
			await this.queryData(0);
			const index = this.tablist.findIndex(item => item.grade == params.grade);
			this.current = index; //获取对应身份的数据下标
			this.personlist = this.tablist[index]; //获取对应身份的数据列表
			console.log(this.personlist);
			this.totalInfo = this.tablist[index].total; //获取对应身份的数据统计
		},
		methods: {
			//下拉筛选
			timeDropdownFilter() {
				this.$refs.datePicker.open()
			},
			//日期选择事件
			confirmPickDate(startdate, enddate) {
				this.pageQuery.startTime = startdate;
				this.pageQuery.endTime = enddate;
				this.queryData();
			},
			//数据格式化
			numberFormat(value) {
				return (value).toLocaleString('en-US');
			},
			//选项卡切换
			change(index) {
				this.current = index;
				this.personlist = this.tablist[index]
				this.totalInfo = this.tablist[index].total;
				this.pageQuery.pageNum = 1;
				this.pageQuery.pageSize = 5;
				this.queryData(index);
			},
			//返回上一页
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});

			},
			//跳转详情页
			partnerDetail(id) {
				uni.navigateTo({
					url: "/pages/institutional/partnerDetail?id=" + id,
				})
			},
			//列表数据
			async queryData(grade) {
				let res = await this.$http.post('/newAppPartner/selectByGradeList', this.pageQuery);
				if (res.code == '200') {
					this.tablist = res.data; //选项卡
					this.tablist.map(val => {
						val.gradeName = "我是" + val.gradeName;
						return val;
					})
					this.personlist = res.data[grade]; //页面赋值第一条数据
					this.totalInfo = res.data[grade].total;
				}
			},

		}

	}
</script>

<style lang="scss" scoped>
	.headers {
		position: fixed;
		top: 0;
		left: 0;
		height: auto;
		width: 100%;
		z-index: 999;

		.roleIdentity {
			width: 100%;
			height: 176rpx;
			padding: 108rpx 30rpx 20rpx;
			box-sizing: border-box;
			background: linear-gradient(180deg, #D1EFFE 0%, #FFFFFF 100%);
			border-bottom: 1rpx solid #f2f2f2;

			.headers-activeTab {
				width: 80%;
				height: 50rpx;
			}

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

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

		//筛选
		.filter {
			width: 100%;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			background-color: #fff;

			.filterTime {
				text:first-child {
					font-size: 26rpx;
					color: #333;
				}

				text:last-child {
					font-size: 19rpx;
					color: #666;
					margin-left: 4rpx;
				}
			}

		}

		//统计
		.statistics {
			width: 100%;
			background: #EBF4FF;
			padding: 8rpx 57rpx;
			box-sizing: border-box;
			font-size: 30rpx;
			color: #2B67EF;
		}
	}










	//列表数据
	.card {
		position: relative;
		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;
			}
		}

	}

	.popup-code {
		text {
			display: block;
			border-bottom: 1px solid #EEEEEE;
			height: 50px;
			line-height: 50px;
			text-align: center;
			font-size: 16px;
			color: #666666;
		}
	}

	.ShowModalCode-style {
		text:first-of-type {
			display: block;
			font-weight: 600;
			font-size: 16px;
			color: #333333;
			border: 1px solid #EEEEEE;
			padding: 15px;
			text-align: center;
		}
	}

	.popup-code {
		text {
			display: block;
			border-bottom: 1px solid #EEEEEE;
			height: 50px;
			line-height: 50px;
			text-align: center;
			font-size: 16px;
			color: #666666;
		}
	}

	.ShowModalCode-con {
		padding: 30px;
		text-align: center;

		image {
			margin: 0 auto;
			margin-top: 15px;
		}
	}
</style>