partnerApp/pages/my/commission.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">
				<view class=" dis j-s search">
					<!-- <text>收入种类<i></i></text> -->
					<text style="margin-right: 10px;" @click="industryShow = true">{{industryData}}<i></i></text>
					<u-select mode="single-column" :list="industryoptions" v-model="industryShow" label-name="lable"
						value-name="value" @confirm="industryopConfirm($event)"></u-select>
					<text @click="$refs.datePicker.open()">自定义时间<i></i></text>
				</view>
			</view>
			<block>
				<view class="content">
					<view class="options" v-for="val in withdrawalData" :key="val" @click="view(val)">
						<view class="dis">
							<view class="left">
								<image v-if='val.industrySector==1' src="/static/image/my/qiche.png" mode=""></image>
								<image v-else src="/static/image/my/caixian.png" mode=""></image>
								{{val.licenseno}}
								<view class="type">{{val.industrySector==1?'(车险)':'(财险)'}}</view>
							</view>
							<view class="right">
								{{val.createTime}}
							</view>
							<!-- <view>
								<view style="line-height: 18px;">{{val.industrySector==1?'汽车-车险':'保险-财险'}}</view>
								<text style="font-size: 10px;color: #999999;">{{val.createTime}}</text>
							</view> -->
						</view>
						<view class="contribution">
							<view class="contribution_left">
								贡献合伙人
								<text v-if="val.profferLevel-userLevel==0">无</text>
								<text v-if="val.profferLevel-userLevel==1">一级合伙人</text>
								<text v-if="val.profferLevel-userLevel==2">二级合伙人</text>
								<text v-if="val.profferLevel-userLevel==3">三级合伙人</text>
								<text v-if="val.profferLevel-userLevel==4">四级合伙人</text>
							</view>
							<view class="contribution_right">
								{{val.extractFee}}
							</view>
						</view>
						<view class="dividend">
							<view class="dividend_left">
								分红合伙人
							</view>
							<view class="dividend_right">
								<view class="dividend_options" v-for="(item,index) in val.profferList" :key="index">
									<!-- <text v-if="item.source == 1">我的佣金</text>
									<text v-if="item.source == 2">一级合伙人</text>
									<text v-if="item.source == 3">二级合伙人</text>
									<text v-if="item.source == 4">三级合伙人</text>
									<text v-if="item.source == 5">四级合伙人</text> -->
									<text v-if="index ==0"> 我的佣金</text>
									<text v-if="item.source-userLevel ==1"> 一级合伙人</text>
									<text v-if="item.source-userLevel ==2"> 二级合伙人</text>
									<text v-if="item.source-userLevel ==3"> 三级合伙人</text>
									<text v-if="item.source-userLevel ==4"> 四级合伙人</text>
									<!-- <text v-if="index !==0&&item.source ==5"> 五级合伙人</text> -->
									{{item.extractFee}}元
								</view>
							</view>
						</view>
						<!-- <text>{{val.extractFee}}</text> -->
					</view>
				</view>
			</block>
			<u-loadmore style="margin-top: 5px;" v-if="withdrawalData.length!=0" :status="status" />
			<o-empty v-if="withdrawalData.length==0" />
		</view>
		<my-date-picker ref="datePicker" @confirmPickDate="confirmPickDate" />
	</view>
</template>
<script>
	import {
		mapState,
	} from "vuex"
	import myDatePicker from '../components/date-picker.vue';
	export default {
		components: {
			myDatePicker
		},
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				userLevel: 0,
				headerStyle: {
					backgroundColor: 'transparent',
					backgroundImage: 'url("/static/beijing (2).png")',
					backgroundSize: 'cover',
					backgroundPosition: '',
					boxShadow: ''
					// 其他样式属性...
				},
				source: 0,
				totalPages: 0,
				totalSize: 0,
				status: 'loadmore',
				pageRequest: { //查询的默认条件
					pageNum: 1,
					pageSize: 20,
				},
				withdrawalData: [],
				industryData: '全部行业',
				industryShow: false,
				industrySector: '0',
				industryoptions: [{
					lable: '全部行业',
					value: '0'
				}, {
					lable: '汽车服务',
					value: '1'
				}, {
					lable: '保险',
					value: '2'
				}],
				beginTime:'',
				endTime:'' 
			}
		},
		async onLoad(params) {
			this.queryData()
			this.userLevel = this.userInfo.sysUser.level
		},
		methods: {
			// 收入种类筛选
			industryopConfirm(e) {
				this.industryData = e[0].label
				this.industrySector = e[0].value
				this.queryData()
			},
			confirmPickDate(dateStr, dateStr1) {
				if (dateStr) {	
					dateStr += ' 00:00:01'
				}
				if (dateStr1) {
					dateStr1 += ' 23:59:59'
				}
				this.beginTime=dateStr
				this.endTime=dateStr1
				this.queryData()
			},
			view(item) {	
				uni.navigateTo({
					url: "/pages/my/commissionDetail?key=" + encodeURIComponent(JSON.stringify(item))
				})
			},	
			back() {
				uni.navigateBack({
					delta: 1, // 返回的页面数，如果是1表示返回上一页
					success: function() {}
				});
			},
			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('/APPPartner/getCommissionInfo', {
						beginTime:this.beginTime,
						endTime:this.endTime,
						industrySector: this.industrySector,
						...this.pageRequest
					});
					if (res.code == '200') {
						this.totalPages = res.data.totalPages;
						this.totalSize = res.data.totalSize;
						this.withdrawalData = [...this.withdrawalData, ...res.data.content];
					}
					if (this.pageRequest.pageNum >= this.totalPages) this.status = 'nomore';
					else this.status = 'loading';
				}, 1000)
			},
			async queryData() {	
				let params = {
					beginTime:this.beginTime,
					endTime:this.endTime,
					// industrySector: '1',
					...this.pageRequest,
					industrySector: this.industrySector
					// ...this.pageRequest
				}
				let res = await this.$http.post('/APPPartner/getCommissionInfo', params);
				if (res.code == '200') {
					this.withdrawalData = res.data.content
					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;
		}
	}

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

	.withdrawal-flow {
		margin: 8px 16px;
		overflow: hidden;
		background: #FFFFFF;
		border-radius: 5px 5px 5px 5px;
		font-size: 16px;
		color: #333333;

		.withdrawal-card {
			border-bottom: 1px solid #EEEEEE;
			padding: 15px 0;
			margin: 0 15px;

			image {
				display: inline-block;
				width: 33px;
				height: 33px;
				margin-right: 10px;
			}
		}
	}

	.partner-head {
		background: #FFFFFF;
		color: #333333;
		font-size: 14px;

		.search-data {
			color: #666666;

			text {
				padding: 5px 8px;
				border: 1px solid #EEEEEE;
			}
		}

		.search {
			border: 1px solid #EEEEEE;
			padding: 10px;

			text {
				width: 49%;
				text-align: center;
			}

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

	.content {
		padding: 20rpx 30rpx;
		background: #F7F7F7;

		.options {
			width: 100%;
			box-sizing: border-box;
			background: #FFFFFF;
			margin: 0 auto 14rpx;
			border-radius: 8px 8px 8px 8px;
			border-left: 1px solid #2D6DFF;
			padding: 20rpx;

			.dis {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					// width: 100%;
					display: flex;
					align-items: center;
					font-weight: 500;
					font-size: 32rpx;

					.type {
						font-weight: 500;
						font-size: 32rpx;
						margin-left: 20rpx;
					}

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}

				}

				.right {
					font-size: 18rpx;
					color: #999999;
				}
			}

			.contribution {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 14rpx;

				.contribution_left {
					// width: 22%;
					font-size: 24rpx;
					color: #999999;

					text {
						color: #333333;
						margin-left: 20rpx;
					}

				}

				.contribution_right {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;

				}
			}

			.dividend {
				width: 100%;
				display: flex;	
			

				.dividend_left {
					width: 120rpx;
						font-size: 24rpx;
					margin-right: 20rpx;
					color: #999999;
				}

				.dividend_right {
					flex: 1;
					display: flex;
					flex-wrap: wrap;
					.dividend_options{
					font-size: 24rpx;
					margin-right: 24rpx;
					}
				}
			}
		}
	}
</style>