zhapp/pages/tool/distributionOrders.vue

<template>
	<view class="page">
		<u-sticky zIndex="999">
			<!-- 筛选条件 -->
			<view class="headerFilter dis ">
				<view class="FilterItem dis a-c j-c " @click="dateShow=true">
					<text>{{info.signingTimeStart && info.signingTimeEnd? info.signingTimeStart +'-'+ info.signingTimeEnd : '全部'}}</text>
					<view class="tag"></view>
				</view>
				<view class="FilterItem dis a-c j-c  " @click="commissionLevelShow=true">
					{{info.level?info.level==1?'一级佣金':info.level==2?'二级佣金':'三级佣金':'佣金等级'}}
					<view class="tag"></view>
				</view>
				<view class="FilterItem dis a-c j-c  " @click="commissionStatusShow=true">
					{{info.auditStatus?info.auditStatus==0?'待结算':'已结算':"佣金状态"}}
					<view class="tag"></view>
				</view>
			</view>
			<!-- 统计数字 -->
			<view class="total dis a-c j-c ">
				<text>共有{{ordersList.orderCount}}笔订单，保费{{ordersList.premiumSum}}元，佣金{{ordersList.commissionSum}}元</text>
			</view>
		</u-sticky>
		<view class="content-list">
			<!-- 数据列表 -->
			<view class="item dis f-c mt-2" v-for="(item,index) in ordersList.distributionOrders" :key="index"
				v-if="ordersList.distributionOrders.length>0">
				<view class="above dis a-c j-s ">
					<view class="dis a-c">
						<image :src="`/static/image/tool/level${item.level}.png`" mode=""></image>
						<text class="license">{{item.licenseNo}}</text>
						<view class="status-tag dis a-c j-c">
							<text>{{item.auditStatus=='1'?'已结算':'未结算'}}</text>
						</view>
					</view>
					<text class="time">{{item.signingTime}}</text>
				</view>
				<view class="below mt-2 dis f-wrap">
					<view class="view">
						<text class="mr-3">保费</text>
						<text>{{item.premium}}</text>
					</view>
					<view class="view">
						<text class="mr-3">我的佣金</text>
						<text>{{item.commission}}</text>
					</view>
				</view>
			</view>

		</view>
		<!-- 日期组件 -->
		<uni-datePicker :show="dateShow" @close="dateShow=false" @customTime="customTime"
			@customMonth="customMonthchange"></uni-datePicker>
		<!-- 佣金等级 -->
		<uni-Popup :show="commissionLevelShow" @close='commissionLevelShow=false' headerTitle="佣金等级"
			:statusList="levelOptions" contentType="status" @statusConfirm='commissionLevelConfirm'>
		</uni-Popup>
		<!-- 佣金状态 -->
		<uni-Popup :show="commissionStatusShow" @close='commissionStatusShow=false' headerTitle="佣金状态"
			:statusList="statusOptions" contentType="status" @statusConfirm='commissionStatusConfirm'>
		</uni-Popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				dateShow: false, //日期组件
				commissionLevelShow: false, //佣金等级
				commissionStatusShow: false, //佣金状态
				statusOptions: [{
						label: '全部',
						value: '',
					},
					{
						label: '待结算',
						value: "0",
					},
					{
						label: '已结算',
						value: "1",
					}
				],
				levelOptions: [{
						label: '全部',
						value: '',
					},
					{
						label: '一级佣金',
						value: "1",
					},
					{
						label: '二级佣金',
						value: "2",
					},
					{
						label: '三级佣金',
						value: "3",
					},
				],
				ordersList: [],
				info: {
					signingTimeStart: "",
					signingTimeEnd: "",
					level: "", //等级
					auditStatus: "", //状态
				},
			}
		},
		onShow() {

		},
		onLoad(options) {
			console.log(options);
			this.info.level = options.level;
			this.distributorDetails();
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			commissionStatusConfirm(value) {
				this.info.auditStatus = value;
				this.distributorDetails();
				this.commissionStatusShow = false;
			},
			commissionLevelConfirm(value) {
				this.info.level = value;
				this.distributorDetails();
				this.commissionLevelShow = false;

			},
			//分销订单
			async distributorDetails() {
				let res = await this.$http.post('/sysDistributionSetting/getDistributionOrder', {
					userId: this.userInfo.sysUser.infoId,
					...this.info
				})
				if (res.code == 200) {
					this.ordersList = res.data;
				}
			},
			//日期月份回调
			customMonthchange(Month) {
				const currentMonth = this.getCurrentMonthRange(Month);
				this.info.signingTimeStart = currentMonth.start;
				this.info.signingTimeEnd = currentMonth.end;
				this.distributorDetails();
				this.dateShow = false;
			},
			//日期自定义时间回调
			customTime(start, end) {
				this.info.signingTimeStart = start;
				this.info.signingTimeEnd = end;
				this.distributorDetails();
				this.dateShow = false;
			},
			getCurrentMonthRange(time) {
				const today = new Date(time);
				const firstDay = new Date(today.getFullYear(), today.getMonth(), 1); // 本月第一天
				const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0); // 本月最后一天

				// 格式化为 YYYY-MM-DD
				const formatDate = (date) => {
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					return `${year}-${month}-${day}`;
				};

				return {
					start: formatDate(firstDay),
					end: formatDate(lastDay)
				};
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background: #f8f8f8;
		height: 100vh;
	}

	/* 头部下拉筛选 */
	.headerFilter {
		background: #fff;
		border-top: 1rpx solid #eee;
		padding: 12rpx 30rpx;
		box-sizing: border-box;

		.FilterItem {
			width: 25%;
			font-size: 26rpx;
			color: #666;
			line-height: 2;

			/* 三角形 */
			.tag {
				width: 0;
				height: 0;
				border: 4px solid;
				border-color: #666666;
				border-bottom: 0 solid transparent;
				border-right: 3px solid transparent;
				border-left: 3px solid transparent;
				margin-left: 4rpx;
			}

		}

		.FilterItem:first-child {
			width: 50%;
		}
	}

	.total {
		padding: 8rpx 56rpx;
		box-sizing: border-box;
		background: #FFFBD7;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-size: 30rpx;
		color: #333;
	}

	.content-list {
		padding: 0 30rpx;
		box-sizing: border-box;

		.item {
			padding: 30rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 10rpx;

			image {
				width: 40rpx;
				height: 36rpx;
			}

			.license {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				margin: 0 6rpx;
			}

			.status-tag {
				padding: 2rpx 10rpx;
				box-sizing: border-box;
				background: #FFF4E1;
				border-radius: 20rpx 20rpx 20rpx 0rpx;
				font-size: 20rpx;
				font-weight: bold;
				color: #FFAC26;
			}

			.time {
				font-size: 22rpx;
				color: #999;
			}

			.below {
				.view {
					width: 50%;

					text:first-child {
						font-size: 28rpx;
						color: #999;
					}

					text:last-child {
						font-size: 30rpx;
						color: #333;
					}
				}
			}
		}
	}
</style>