RentWeAppFront/pages-biz/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="onTabClick(tab.value)">
					{{ tab.label }}
				</view>
			</view>
		</view>

		<!-- 收支记录列表 -->
		<scroll-view scroll-y class="scroll-content" @scrolltolower="loadMore">
			<view v-if="flowList.length > 0" class="record-list">
				<view v-for="(item, index) in flowList" :key="index" class="record-item" @click="goDetail(item)">
					<!-- 左侧信息 -->
					<view class="left">
						<view class="title">{{ item.itemName }}</view>
						<view class="sub">{{ item.payDate || item.inDate || '未知'}}</view>
					</view>

					<!-- 右侧金额 + 图标 -->
					<view class="right">
						<view class="amount" :class="item.inOutType === '支' ? 'income' : 'expense'">
							{{ item.inOutType === '支' ? '+' : '-' }}{{ formatMoney(item.itemAmount) }}
						</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 {
				pageNo: 1,
				pageSize:10,
				flowList: [],
				loadStatus: 'loadmore',
				activeTab: '收', // 默认显示“收”
				tabs: [{
						label: '收入',
						value: '支'
					},
					{
						label: '支出',
						value: '收'
					},
				],
				// 年份筛选相关
				currentYear: null,
				years: [],
				showYearPicker: false
			};
		},
		onLoad(options) {
			let year = new Date().getFullYear();
			this.currentYear = year;
			this.years = [];
			for (let i = 5; i >= 1; i--) {
				this.years.push(year - i);
			}
			this.fetchPayRecord();
		},
		onShow() {
			this.$checkToken(this.$getToken())
		},
		watch: {
			activeTab(newVal, oldVal) {
				if (newVal !== oldVal) {
						this.resetAndLoad()
				}
			}
		},
		computed: {
		},
		methods: {
			onTabClick(val) {
			  this.activeTab = val
			  this.resetAndLoad()
			},
			fetchPayRecord() {
				if (this.loadStatus !== 'loadmore') return;
				   this.loadStatus = 'loading';
				let url = '/bill/pageQueryPayRecord'
				this.$u.post(url, {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					year: this.currentYear,
					leType: this.activeTab
				},{
					WT:this.$getToken()
				}).then(res => {
					const rows = res.data.result || [];
					if (this.pageNo === 1) this.flowList = [];
					this.flowList = this.flowList.concat(rows);
					if (rows.length < this.pageSize) {
					  this.loadStatus = 'nomore';
					} else {
					  this.pageNo++;
					  this.loadStatus = 'loadmore';
					}
				}).catch(err => {
					console.log("获取账单记录失败：", err)
					this.loadStatus = 'loadmore';
				})
			},
			// 切换年份选择器显示
			toggleYearPicker() {
				this.showYearPicker = !this.showYearPicker;
			},
			// 选择年份
			selectYear(year) {
				this.currentYear = year;
				this.showYearPicker = false;
				this.resetAndLoad();
			},
			formatMoney(val) {
				if (!val && val !== 0) return '—';
				return '¥' + Number(val).toFixed(2);
			},
			resetAndLoad(){
				// 重新加载数据
				this.loadStatus = 'loadmore';
				this.pageNo = 1;
				this.fetchPayRecord();
			},
			loadMore() {
				// 只有在 loadStatus 为 'loadmore' 时才触发
				if (this.loadStatus !== 'loadmore') return;
				// 调用接口获取下一页
				this.fetchPayRecord();
			},
			goDetail(item) {
			
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pay-history-page {
		background: #f8f8f8;
		min-height: 100vh;
		padding-top: 175rpx;
		.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>