building-materials-shop-uniapp-241014/pages_order/mine/runningWater.vue

<template>
	<view class="running-water">
		<navbar :title="title[status]" leftClick @leftClick="leftClick" 
		bgColor="#DC2828"
		color="#fff"
        />

		<view style="background-color: #DC2828;height: 150rpx;">

		</view>

		<view class="card-wrapper">
			<view class="card">
				<view class="card-section">
					<view class="amount-title">总佣金(元)</view>
					<view class="amount-value">¥ {{ info.lj_money }}</view>
					<!-- <view class="action-btn" @click="goWithdraw">提现</view> -->
				</view>
				<view class="card-divider"></view>
				<view class="card-section">
					<view class="amount-title">累计提现(元)</view>
					<view class="amount-value">¥ {{ info.lj_price }}</view>
				</view>
			</view>
		</view>

		<view class="date-filter">
			<text class="filter-title">金额明细</text>
			
			<view class="filter-actions">
				<view class="date-select" @click="openCalendar">
					<text class="date-text">{{queryParams.year || '全部'}} {{queryParams.month || ''}}</text>
					<uv-icon name="calendar" size="32rpx" color="#666"></uv-icon>
				</view>
				
				<view v-if="queryParams.year" class="reset-btn" @click="resetFilter">
					<uv-icon name="trash" size="28rpx" color="#999"></uv-icon>
				</view>
			</view>
		</view>

		<view class="tab-box">
			<view class="tab-box1" v-if="agentFlow.records.length>0 && agentFlow.total>0">
				<uv-cell center border :title="item.title" v-for="(item, index) in agentFlow.records" :key="item.id"
					:value="x[item.type] + item.money" :label="item.createTime" />
			</view>
			<view style="padding: 100rpx 0;" v-else>
				<uv-empty mode="history" textSize="28rpx" iconSize="100rpx" />
			</view>
		</view>

		<!-- 日历选择器 -->
		<uv-calendars 
			ref="calendar" 
			:insert="false" 
			mode="year-month" 
			color="#DC2828"
			@confirm="calendarConfirm"
		></uv-calendars>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					year: '',
					month: ''
				},
				title: ['余额记录', '提现记录', '佣金记录'],
				agentFlow: {
					total: 1,
					records: []
				},
				x: ['+', '-', '-', '+'],
				status: 0,
                info : {},
			}
		},
        onPullDownRefresh() {
            this.getAgentFlow()
        },
        onReachBottom() {
            this.loadMoreData()
        },
		onLoad(e) {
			this.status = e.status || 0;
			// 加载数据
			this.getAgentFlow();
            this.$store.commit('getUserInfo');
            this.getTeamInfo();
		},
		methods: {
            // 获取团队信息
            getTeamInfo() {
                this.$api('getTeamHeader', res => {
                    if (res.code == 200) {
                        this.info = res.result;
                    }
                })
            },
            loadMoreData(){
                if(this.queryParams.pageSize < this.total){
                    this.queryParams.pageSize += 10
                    this.getAgentFlow()
                }
            },
			leftClick() { //返回钱包
				uni.navigateBack(-1)
			},
			getAgentFlow() { //获取流水记录
				let type = this.status;
				const params = {
					type,
					pageNo: this.queryParams.pageNo,
					pageSize: this.queryParams.pageSize
				};
				
				// 只有当年份有值时才添加年份筛选
				if (this.queryParams.year) {
					// 提取数字部分
					const year = this.queryParams.year.replace('年', '');
					params.year = year;
					
					// 如果月份有值，添加月份筛选
					if (this.queryParams.month) {
						const month = this.queryParams.month.replace('月', '');
						params.month = month;
					}
				}
				
				this.$api('getLogList', params, res => {
					if (res.code == 200) {
						this.agentFlow = res.result;
					}
				})
			},
			goWithdraw() {
				// 跳转到提现页面
				uni.navigateTo({
					url: '/pages_order/mine/withdraw'
				});
			},
			// 日历选择器相关方法
			openCalendar() {
				this.$refs.calendar.open();
			},
			calendarConfirm(e) {
				// 判断是否有值
				if (e.year && e.month) {
					this.queryParams.year = e.year + '年';
					this.queryParams.month = e.month + '月';
				} else {
					// 重置为全部
					this.queryParams.year = '';
					this.queryParams.month = '';
				}
				
				// 重置页码
				this.queryParams.pageNo = 1;
				
				// 更新数据
				this.getAgentFlow();
			},
			// 重置筛选
			resetFilter() {
				this.queryParams.year = '';
				this.queryParams.month = '';
				this.queryParams.pageNo = 1;
				this.getAgentFlow();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.running-water {
		width: 750rpx;
		margin: 0 auto;
		min-height: 100vh;
		position: relative;
		background: #F5F5F5;
		
		.card-wrapper {
			position: relative;
			padding: 0 30rpx;
			margin-top: -90rpx;
			z-index: 10;
			
			.card {
				display: flex;
				background-color: #fff;
				border-radius: 20rpx;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
				overflow: hidden;
				
				.card-section {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 30rpx 0;
					
					.amount-title {
						font-size: 28rpx;
						color: #666;
						margin-bottom: 16rpx;
					}
					
					.amount-value {
						font-size: 42rpx;
						font-weight: bold;
						color: #DC2828;
						margin-bottom: 30rpx;
					}
					
					.action-btn {
						width: 160rpx;
						height: 70rpx;
						line-height: 70rpx;
						text-align: center;
						border: 1px solid #DC2828;
						color: #DC2828;
						font-size: 28rpx;
						border-radius: 35rpx;
					}
				}
				
				.card-divider {
					width: 1px;
					background-color: #eee;
				}
			}
		}
		
		.date-filter {
			display: flex;
			align-items: center;
			justify-content: space-between;
            margin: 0 20rpx;
			margin-top: 30rpx;
			padding: 30rpx;
			background-color: #fff;
            border-radius: 10rpx;
			
			.filter-title {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
			
			.filter-actions {
				display: flex;
				align-items: center;
			}
			
			.date-select {
				display: flex;
				align-items: center;
				padding: 12rpx 20rpx;
				border: 1px solid #ddd;
				border-radius: 8rpx;
				
				.date-text {
					margin-right: 10rpx;
					font-size: 26rpx;
					color: #333;
				}
			}
			
			.reset-btn {
				margin-left: 20rpx;
				padding: 12rpx;
			}
		}
		
		.tab-box {
			margin: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
		}
	}
</style>