RentWeAppFront/pages/bill/payHistory.vue

<template>
	<view class="pay-history-page">
		<customNavbar title="缴费记录" />

		<!-- 筛选栏 -->
		<view class="filter-bar">
			<!-- 年份筛选点击区域 -->
			<view class="year-filter" @click="toggleYearPicker">
				<text class="year-text">{{ currentYear }}年</text>
				<u-icon name="arrow-down" size="24" color="#666"></u-icon>
			</view>

			<!-- 自定义年份选择器弹窗 -->
			<u-popup v-model="showYearPicker" mode="bottom" border-radius="20rpx" :closeable="true">
				<view class="year-picker-popup">
					<!-- 弹窗标题 -->
					<view class="popup-header">
						<text class="popup-title">选择年份</text>
					</view>

					<!-- 年份列表 -->
					<view class="year-list">
						<view class="year-item" v-for="year in years" :key="year"
							:class="{ active: currentYear === year }" @click="selectYear(year)">
							{{ year }}年
						</view>
					</view>
				</view>
			</u-popup>
			<!-- 顶部tab切换 -->
			<view class="tab-bar">
				<view v-for="(tab, index) in tabs" :key="index"
					:class="['tab-item', activeTab === tab.value ? 'active' : '']" @click="activeTab = tab.value">
					{{ tab.label }}
				</view>
			</view>
		</view>

		<!-- 收支记录列表 -->
		<scroll-view scroll-y class="scroll-content">
			<view v-if="filteredRecords.length > 0" class="record-list">
				<view v-for="(item, index) in filteredRecords" :key="index" class="record-item" @click="goDetail(item)">
					<!-- 左侧信息 -->
					<view class="left">
						<view class="title">{{ item.feeName }}</view>
						<view class="sub">{{ item.timeLabel }}：{{ item.time || '—' }}</view>
					</view>

					<!-- 右侧金额 + 图标 -->
					<view class="right">
						<view class="amount" :class="item.type === 'income' ? 'income' : 'expense'">
							{{ item.type === 'income' ? '+' : '-' }}{{ item.amount.toFixed(2) }}
						</view>
						<u-icon name="arrow-right" size="32" color="#ccc"></u-icon>
					</view>
				</view>
			</view>

			<view v-else class="empty">
				<u-empty mode="list" text="暂无记录" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 'income', // 默认显示“收”
				tabs: [{
						label: '收入',
						value: 'income'
					},
					{
						label: '支出',
						value: 'expense'
					},
				],
				records: [{
						id: 1,
						type: 'income', // 收
						feeName: '第一期租金（2024.01.01 - 2024.03.31）',
						time: '2024-01-05',
						timeLabel: '收款时间',
						amount: 8500,
					},
					{
						id: 2,
						type: 'expense', // 支
						feeName: '押金缴纳',
						time: '2024-01-03',
						timeLabel: '支付时间',
						amount: 5000,
					},
					{
						id: 3,
						type: 'expense',
						feeName: '第二期租金（2024.04.01 - 2024.06.30）',
						time: '',
						timeLabel: '支付时间',
						amount: 8500,
					},
				],
				// 年份筛选相关
				currentYear: 2025,
				years: [2025, 2024, 2023, 2022, 2021],
				showYearPicker: false
			};
		},
		computed: {
			filteredRecords() {
				return this.records.filter((r) => r.type === this.activeTab);
			},
		},
		methods: {
			// 切换年份选择器显示
			toggleYearPicker() {
				this.showYearPicker = !this.showYearPicker;
			},
			// 选择年份
			selectYear(year) {
				this.currentYear = year;
				this.showYearPicker = false;
				// 重新加载数据
				// this.load();
			},
			statusText(status) {
				const map = {
					paid: '已支付 / 已收款',
					unpaid: '待支付',
					pending: '处理中',
				};
				return map[status] || '未知状态';
			},
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/bill/detail?id=${item.id}`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pay-history-page {
		background: #f8f8f8;
		min-height: 100vh;
		padding-top: 120rpx;
		.filter-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			padding: 24rpx 30rpx;
			margin: 20rpx;
			margin-bottom: 0;
			border-radius: 12rpx;
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
		}
		
		/* 年份筛选 */
		.year-filter {
			display: flex;
			align-items: center;
			gap: 8rpx;
			font-size: 32rpx;
			color: #333;
			cursor: pointer;
		}
		
		/* 支出/收入切换 */
		.tab-bar {
			display: flex;
			gap: 20rpx;
		}
		
		.tab-item {
			padding: 12rpx 32rpx;
			font-size: 28rpx;
			border-radius: 24rpx;
			color: #333;
			background-color: #f5f5f5;
			transition: all 0.2s ease;
		
			&.active {
				color: #fff;
				background: #ff3b30;
			}
		}
		
		/* 自定义年份选择器样式 */
		.year-picker-popup {
			background: #fff;
			padding: 30rpx 0;
		}
		
		.popup-header {
			text-align: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
		}
		
		.popup-title {
			font-size: 34rpx;
			font-weight: 600;
			color: #333;
		}
		
		.year-list {
			padding: 20rpx;
		}
		
		.year-item {
			font-size: 32rpx;
			color: #666;
			text-align: center;
			padding: 24rpx;
			border-radius: 12rpx;
			margin-bottom: 16rpx;
			background: #f5f5f5;
			transition: all 0.2s ease;
		
			&:last-child {
				margin-bottom: 0;
			}
		
			&.active {
				background: #ff3b30;
				color: #fff;
			}
		
			&:hover {
				background: #ff5252;
				color: #fff;
			}
		}

		.record-list {
			padding: 20rpx;

			.record-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #fff;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				padding: 20rpx;
				box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.03);

				.left {
					flex: 1;

					.title {
						font-size: 28rpx;
						font-weight:5600;
						color: #2D2B2C;
					}

					.sub {
						font-size: 24rpx;
						color: #86868C;
						margin-top: 18rpx;
					}

					.status {
						font-size: 28rpx;

						&.paid {
							color: #73B936;
						}

						&.unpaid {
							color: #F34038;
						}
					}
				}

				.right {
					display: flex;
					align-items: center;

					.amount {
						font-size: 28rpx;
						font-weight: 500;
						margin-right: 10rpx;

						&.income {
							color: #73B936;
						}

						&.expense {
							color: #F34038;
						}
					}
				}
			}
		}

		.empty {
			margin-top: 100rpx;
		}
	}
</style>