partnerApp/pages/institutional/myEarnings.vue

<template>
	<view class="">
		<!-- 全局 loding -->
		<public-module></public-module>
		<!-- 头部 -->
		<view class="headers dis a-c j-start">
			<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"></view>
			</view>
		</view>
		<!-- 业绩 -->
		<view class="filterTime dis j-s a-c ">
			<view class=" dis a-c " @click="timeDropdownFilter">
				<text>{{pageQuery.startTime && pageQuery.endTime ? pageQuery.startTime + '-' + pageQuery.endTime : '时间筛选' }}</text>
				<text>▼</text>
			</view>
			<view class=" dis a-c " @click="statusFilterShow=true">
				<text>{{appStatus}}</text>
				<text>▼</text>
			</view>
		</view>
		<view class="performance dis a-c j-c ">
			共有 {{totalCount.numberOrders}}笔订单，保费{{totalCount.totalPremium}}元，佣金{{totalCount.commission}}元
		</view>
		<view class="body p-2" style="padding-top: 340rpx;">
			<view class="card mb-2" v-for="(item,index) in incomeList" :key="index">
				<!-- 权限锁定组件 -->
				<uni-permission-view position="fixed" :backimage="true"
					v-if="index==incomeList.length-1 && pageQuery.grade!='1' && parentStatus=='2'" direction="row"
					:sum="teamOverviewInfo.lockCommission" :days="teamOverviewInfo.zeroDays"
					:genericText="`完成任务，解锁“${gradeText}”，查看我的全部业绩`" cornerRadius="8rpx"
					:genericTextStyle="{fontSize:'26rpx'}" @requestUnlock="requestUnlock">
				</uni-permission-view>
				<!-- 权限锁定组件 -->
				<view class="card-title dis a-c j-s mb-2">
					<view class="dis a-c ">
						<view class="status " :class="item.appStatus==1?'blue':'red'" v-if="item.appStatus!=0">
							{{item.appStatus==1?'已冻结':'已失效'}}
						</view>
						<text class="name ml-1">{{item.carId}}</text>
					</view>
					<text>{{item.issuanceTime}}出单</text>
				</view>
				<view class="card-data dis a-c j-s " @click="earningsDetail(item.ordersNo)">
					<view class="view dis f-c a-c ">
						<text>{{item.agent}}</text>
						<text>代理人</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>
		<!-- 筛选组件 -->
		<uni-Popup :show="statusFilterShow" @close='statusFilterShow=false' headerTitle="筛选状态"
			:statusList="quickOptions" contentType="status" @statusConfirm="statusFilterConfirm">

		</uni-Popup>
		<u-loadmore v-if="incomeList.length!=0" :status="status" />
		<my-date-picker ref="datePicker" @confirmPickDate="confirmPickDate" />
	</view>
</template>
<script>
	import myDatePicker from '../components/date-picker.vue';
	import seach from '../components/seach.vue';
	import QR from "@/common/wxqrcode.js"

	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {
			myDatePicker,
			seach
		},
		computed: {
			...mapState(['userInfo', "userCheckInfo"]),
			gradeText() {
				const gradeMap = {
					1: '创始人',
					2: '管理人',
					3: '合伙人',
					4: '工作室'
				}
				return gradeMap[this.pageQuery.grade] || ''
			},
			appStatus() {
				const gradeMap = {
					0: '正常',
					1: '已冻结',
					2: '已失效',
				}
				return gradeMap[this.pageQuery.appStatus] || '全部'
			}
		},
		data() {
			return {
				statusFilterShow: false, //筛选组件
				quickOptions: [{
						label: "全部",
						value: null,
					},
					{
						label: "正常",
						value: "0",
					},
					{
						label: "已冻结",
						value: "1",
					},
					{
						label: "已失效",
						value: "2",
					}
				], //快捷选项
				tablist: [],
				status: 'loadmore', //下拉状态
				parentStatus: "", //是否锁定
				totalCount: {}, //统计
				incomeList: [], //列表
				current: 0,
				dialogContent: '',
				ShowalertDialog: false,
				relativeLeavl: null,
				ShowModal: false,
				ShowModalCode: false,
				ShowModalCode1: false,
				ShowModalCodebusiness: false,
				chineseNumbers: ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'],
				teamTabIndex: 0,
				source: 0,
				totalPages: 0,
				totalSize: 0,
				pageRequest: { //查询的默认条件
					pageNum: 1,
					pageSize: 20,
					userName: ''
				},
				partnerImg: '',
				workImg: '',
				directLsitOne: {},
				directLsitTwo: {},
				directLsitThree: {},
				directLsitFour: {},
				userLevel: "",

				deptSource: 1,
				pageQuery: {
					grade: "",
					startTime: "",
					endTime: "",
					appStatus: "",
					pageNum: 1,
					pageSize: 10,
				},
				teamOverviewInfo: {},
			}
		},
		onReachBottom() {
			if (this.pageQuery.pageNum >= this.totalPages) return;
			this.status = 'loading';
			this.pageQuery.pageNum = ++this.pageQuery.pageNum;
			setTimeout(async () => {
				let res = await this.$http.post('/newAppPartner/myPerformance', this.pageQuery);
				if (res.code == '200') {
					this.incomeList = [...this.incomeList, ...res.data.data.records];
				}
				if (this.pageQuery.pageNum >= this.totalPages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		},
		async onLoad(params) {
			if (params) {
				let info = JSON.parse(params.info)
				console.log(info);
				if (info.appStatus) {
					this.pageQuery.appStatus = info.appStatus;
				}
				this.pageQuery.grade = info.grade
				this.teamOverviewInfo = info;
				await this.queryData()
				await this.GradeListMap();
				const index = this.tablist.findIndex(item => item.grade == info.grade);
				this.current = index; //获取对应身份的数据下标
			}


		},
		methods: {
			statusFilterConfirm(item) {
				this.pageQuery.appStatus = item.value;
				this.queryData();
				this.statusFilterShow = false;
			},
			async requestUnlock() {
				console.log(1);
				if (this.teamOverviewInfo.parentStatus == '2') {
					switch (this.teamOverviewInfo.upgradeStatus) {
						case 0:
							let params = {
								grade: Number(this.teamOverviewInfo.grade),
								lockingState: this.teamOverviewInfo.parentStatus,
								lockCommission: this.teamOverviewInfo.lockCommission,
								zeroDays: this.teamOverviewInfo.zeroDays,
								fallAmount: this.teamOverviewInfo.fallAmount,
							}
							uni.navigateTo({
								url: "/pages/my/upgradeTask?info=" + JSON.stringify(params),
							})
							break;
						case 1:
							let res = await this.$http.post('/partner/submitLiftingRecord', {
								grade: this.teamOverviewInfo.grade,
								upgradeType: '1'
							});
							if (res.code == '200') {
								uni.showToast({
									title: res.msg,
									icon: 'none',
								});
								this.queryData()
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
								});
							}
							break;
						case 2:
							uni.showToast({
								title: '申请中',
								icon: 'none',
							});
							break;
						default:
					}
				}
			},
			//下拉筛选
			timeDropdownFilter() {
				this.$refs.datePicker.open()
			},
			//日期选择事件
			confirmPickDate(startdate, enddate) {
				this.pageQuery.startTime = startdate;
				this.pageQuery.endTime = enddate;
				this.queryData();
			},
			change(index) {
				this.current = index;
				this.pageQuery.grade = this.tablist[index].grade;
				this.queryData();
				this.pageQuery.pageNum = 1;
				this.pageQuery.pageSize = 10;
			},
			dialogClose() {
				this.$refs.alertDialog.close()
			},
			styleChange(e) {
				this.deptSource = e.detail.value
			},
			dialogConfirm() {
				this.ShowModalCode = true
				this.$refs.alertDialog.close()
				this.partnerImg = QR.createQrCodeImg(this.$base.h5BaseUrl + "/#/pages/index/applypartner?level=" + this
					.level + '&userId=' + this.userInfo.sysUser.userId, {
						size: parseInt(200) //二维码大小  
					})
			},
			ShowModalCodeFun(level, relativeLeavl) {
				// 绝对等级：level  相对等级：relativeLeavl
				this.level = level
				this.relativeLeavl = relativeLeavl
				// this.ShowalertDialog=true
				this.dialogContent = `是否招募${this.chineseNumbers[relativeLeavl]}级合伙人?`
				this.$refs.alertDialog.open()
			},
			ShowModalCodeSumbit() {
				this.ShowModalCode1 = true
				this.workImg = QR.createQrCodeImg(this.$base.h5BaseUrl + "/#/pages/index/applystudio?deptSource=" + this
					.deptSource + '&userId=' + this.userInfo.sysUser.userId, {
						size: parseInt(200) //二维码大小  
					})
			},
			ShowModalCodeworkFun() {
				this.ShowModalCodebusiness = true
				this.deptSource = 1
			},
			// partnersAndStudios(level){
			// 	this.level=level
			// 	this.ShowModal = true
			// },
			// recruitment(level) {
			// 	this.level = level
			// 	this.ShowModalCodeFun(level)
			// },
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});

			},
			backHome() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			earningsDetail(ordersNo) {
				uni.navigateTo({
					url: "/pages/my/commissionDetail?ordersNo=" + ordersNo,
				})
			},
			closeInstitution(item, level) {
				if (item.leaderIds.length > 0) {
					item.level = level
					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 res = await this.$http.post('/newAppPartner/myPerformance', this.pageQuery);
				if (res.code == '200') {
					this.totalCount = res.data.total; //个人收益统计
					this.incomeList = res.data.data.records; //收益列表
					this.parentStatus = res.data.parentStatus;
					this.totalPages = res.data.data.totalPages;
				}
			},
			//等级列表
			async GradeListMap() {
				let res = await this.$http.get('/partner/getUserGradeListMap');
				if (res.code == 200) {
					this.tablist = res.data;
					this.tablist.map(val => {
						val.gradeName = "我是" + val.gradeName;
						return val;
					})
				}
			}

		}

	}
</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;
				}
			}
		}
	}

	//头部背景
	.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;
	}

	//时间筛选
	.filterTime {
		position: fixed;
		top: 176rpx;
		left: 0;
		width: 100%;
		z-index: 999;
		background: #fff;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

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

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

	//业绩
	.performance {
		position: fixed;
		top: 266rpx;
		left: 0;
		z-index: 999;
		width: 100%;
		height: 60rpx;
		background: #EBF4FF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-size: 30rpx;
		color: #2B67EF;
	}

	.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;
		}
	}

	.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 {
		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 {
			.status {
				padding: 2rpx 12rpx;
				box-sizing: border-box;
				border-radius: 2rpx 2rpx 2rpx 2rpx;
				font-size: 20rpx;
				font-weight: bold;

			}

			.blue {
				background: #EAF0FF;
				color: #2D6DFF;
			}

			.red {
				background: #FFECEC;
				color: #F74141;
			}

			>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>