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  @click="$refs.datePicker.open()">自定义时间<i></i></text>
			</view>
		</view>
			<block >
				<view class="withdrawal-flow" >
						<view class="withdrawal-card j-s dis" v-for="val in withdrawalData"  :key="val" @click="view(val)">
							<view class="dis" >
								<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>
								<view>
									<view style="line-height: 18px;">{{val.industrySector==1?'汽车-车险':'保险-财险'}}</view>
									<text style="font-size: 10px;color: #999999;">{{val.createTime}}</text>
								</view>
							</view>
							<text>{{val.extractFee}}</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>
		<my-date-picker   ref="datePicker"  @confirmPickDate="confirmPickDate" />
	</view>
</template>
<script>
	import myDatePicker from '../components/date-picker.vue';
	export default{
		components: {
		       myDatePicker
		   },
		data(){
			return{
				headerStyle: {
					backgroundColor: 'transparent',
					backgroundImage: 'url("/static/beijing (2).png")',
					backgroundSize: 'cover',
					backgroundPosition: '',
					boxShadow: ''
					// 其他样式属性...
				},
				directLsit: {},
                source:0,
				totalPages:0,
                totalSize:0,
				status: 'loadmore',
				pageRequest: { //查询的默认条件
					pageNum: 1,
					pageSize: 20,
				},
               withdrawalData:[]
			}
		},
		async onLoad(params) {
			this.queryData()

		},
		methods:{
			confirmPickDate(dateStr,dateStr1){
				if(dateStr){
					dateStr+=' 00:00:01'
				}
				if(dateStr1){
					dateStr1+=' 23:59:59'
				}
				this.queryData(dateStr ,dateStr1)
			},
			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:'2024-10-08 16:21:11',
						endTime:'2024-10-11 16:21:11',
						industrySector:'1',
						...this.pageRequest
				});
					if (res.code == '200') {
					this.totalSize = res.data.totalSize;
						this.directLsit = [...this.withdrawalData, ...res.data.content];
					}
					if (this.pageRequest.pageNum >= this.totalPages) this.status = 'nomore';
					else this.status = 'loading';
				}, 1000)
			},
			async queryData(beginTime='',endTime='') {
				let params = {
                    beginTime,
                    endTime,
					industrySector:'1',
					...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;
			}
		}
	}
</style>