缴费记录对接数据、我的车位新增选择业主

property-uniapp-project/pageSubPack/payment-list/paymentRecord.vue

@@ -4,9 +4,7 @@
 		<uni-nav-bar title="缴费记录" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
 		</uni-nav-bar>
 
-		<!-- 表单区域 -->
-		<scroll-view class="page" scroll-y="true">
-
+		<view class="page">
 			<!-- 累计缴费 -->
 			<view class="total-box">
 				<view class="top-box">
@@ -34,40 +32,37 @@
 
 			</view>
 
-			<!-- 缴费明细 -->
-			<view class="list-wrapper">
-				<!-- 按月份分组渲染 -->
-				<view v-if="monthGroups.length === 0" class="empty-state">
-					<uni-icons type="info" size="60" color="#ccc"></uni-icons>
-					<text class="empty-text">
-						{{ '暂无数据'}}
-					</text>
-				</view>
-				<view class="month-group" v-for="(item, idx) in monthGroups" :key="idx">
-					<view class="month-title">
-						{{ item.month }}月 缴费 ¥{{ item.total }}元
+			<!-- 缴费明细（分页滚动） -->
+			<scroll-view class="list-scroll" scroll-y="true" @scrolltolower="loadMore">
+				<view class="list-wrapper">
+					<!-- 按月份分组渲染 -->
+					<view v-if="monthGroups.length === 0" class="empty-state">
+						<uni-icons type="info" size="60" color="#ccc"></uni-icons>
+						<text class="empty-text">
+							{{ '暂无数据'}}
+						</text>
 					</view>
+					<view class="month-group" v-for="(item, idx) in monthGroups" :key="idx">
+						<view class="month-title">
+							{{ item.year }}年{{ item.month }}月 缴费 ¥{{ item.total.toFixed(2) }}
+						</view>
 
-					<view class="item-list">
-						<view class="bill-item" v-for="bill in item.list" :key="bill.id">
-							<view class="bill-icon">
-								<image class="iconStyle" src="https://wuyeadmin.bugtc.com/images/propertyImgs/water.png"
-									v-if="bill.name=='物业费A'"></image>
-								<image class="iconStyle" src="https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png"
-									v-if="bill.name=='物业费B'"></image>
-				
+						<view class="item-list">
+							<view class="bill-item" v-for="bill in item.list" :key="bill.id">
+								<view class="bill-icon">
+									<image class="iconStyle" :src="bill.icon"></image>
+								</view>
+								<view class="bill-info">
+									<view class="name">{{ bill.name }}</view>
+									<view class="account">{{ bill.account }}</view>
+								</view>
+								<view class="bill-price">-{{ bill.amount.toFixed(2) }}</view>
 							</view>
-							<view class="bill-info">
-								<view class="name">{{ bill.name }}</view>
-								<view class="account">{{ bill.account }}</view>
-							</view>
-							<view class="bill-price">-{{ bill.amount }}</view>
 						</view>
 					</view>
 				</view>
-			</view>
-
-		</scroll-view>
+			</scroll-view>
+		</view>
 	</view>
 </template>
 
@@ -101,18 +96,33 @@
 
 	const billList = ref([])
 
-	// 图标映射
-	const iconMap = {
-		'物业费A': 'https://wuyeadmin.bugtc.com/images/propertyImgs/water.png',
-		'物业费B': 'https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png',
-		'物业费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/property.png',
-		'暖气费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/heating.png',
-		'燃气费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/gas.png'
+	// 费用名称映射
+	// topup（水电表充值）：type 1=电费, 2=水费
+	// bill（物业账单）：type 0=物业费, 1=车位费, 2=垃圾处理费
+	const getNameByType = (item) => {
+		if (item.recordType === 'topup') {
+			return item.type == '1' ? '电费' : item.type == '2' ? '水费' : '充值'
+		} else if (item.recordType === 'bill') {
+			return item.type == '0' ? '物业费' : item.type == '1' ? '车位费' : item.type == '2' ? '垃圾处理费' : '账单'
+		}
+		return ''
 	}
 
-	// 获取缴费记录
-	const getRecords = async () => {
+	// 图标映射
+	const iconMap = {
+		'电费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png',
+		'水费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/water.png',
+		'物业费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/property.png',
+		'车位费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/parking.png',
+		'垃圾处理费': 'https://wuyeadmin.bugtc.com/images/propertyImgs/garbage.png',
+		'充值': 'https://wuyeadmin.bugtc.com/images/propertyImgs/water.png',
+		'账单': 'https://wuyeadmin.bugtc.com/images/propertyImgs/property.png'
+	}
+
+	// 获取缴费记录（loadMore=true 时分页追加）
+	const getRecords = async (loadMore = false) => {
 		try {
+			if (!loadMore) pageNum.value = 1
 			const res = await getTopupRecordWithStat({
 				residentUserId: uni.getStorageSync('userId'),
 				pageNum: pageNum.value,
@@ -121,39 +131,57 @@
 			if (res.code === 200) {
 				const records = res.data.records || []
 				// 转换记录格式
-				billList.value = records.map(item => ({
-					id: item.id,
-					month: item.rechargeTime && item.rechargeTime.split('-')[1] ? parseInt(item.rechargeTime.split('-')[1], 10) : 1,
-					name: item.type == 1 ? '物业费B' : item.type == 2 ? '物业费A' : '',
-					account: item.deviceCode || '-',
-					amount: Number(item.rechargeAmount) || 0,
-					icon: iconMap[item.type == 1 ? '物业费B' : item.type == 2 ? '物业费A' : ''] || 'https://wuyeadmin.bugtc.com/images/propertyImgs/water.png'
-				}))
+				const mappedList = records.map(item => {
+					const payDate = item.payTime ? item.payTime.split(' ')[0] : ''
+					const parts = payDate.split('-')
+					const name = getNameByType(item)
+					return {
+						id: item.id,
+						year: parts[0] ? parseInt(parts[0], 10) : new Date().getFullYear(),
+						month: parts[1] ? parseInt(parts[1], 10) : 1,
+						name,
+						account: item.deviceCode || '',
+						amount: Number(item.amount) || 0,
+						recordType: item.recordType || '',
+						icon: iconMap[name] || iconMap['账单']
+					}
+				})
+				billList.value = loadMore ? [...billList.value, ...mappedList] : mappedList
 				// 累计缴费金额
-				const total = records.reduce((sum, item) => sum + (Number(item.rechargeAmount) || 0), 0)
-				totalAmount.value = total.toFixed(2)
-				// 更新图表数据（根据 records 计算最近6个月）
-				updateChartData()
+				totalAmount.value = res.data.totalAmount || '0.00'
+				// 柱状图数据（使用API返回的monthlyStats）
+				updateChartData(res.data.monthlyStats || {})
 			}
 		} catch (err) {
 			console.error('获取缴费记录失败', err)
 		}
 	}
 
-	// 更新图表数据（根据 records 计算最近6个月）
-	const updateChartData = () => {
-		// 按月份汇总金额
-		const monthTotal = {}
-		billList.value.forEach(bill => {
-			const monthKey = bill.month
-			if (!monthTotal[monthKey]) {
-				monthTotal[monthKey] = 0
+	// 加载更多（触底分页）
+	const loadMore = () => {
+		pageNum.value++
+		getRecords(true)
+	}
+
+	// 更新图表数据（使用API返回的monthlyStats）
+	// monthlyStats格式: { "2026-04": "04月 30.00元", "2026-05": "05月 25.00元", ... }
+	const updateChartData = (monthlyStats) => {
+		const statsMap = {}
+		Object.entries(monthlyStats).forEach(([key, value]) => {
+			const priceMatch = value.match(/([\d.]+)元/)
+			if (priceMatch && key.includes('-')) {
+				const [y, m] = key.split('-')
+				statsMap[key] = {
+					year: parseInt(y, 10),
+					month: parseInt(m, 10),
+					price: parseFloat(priceMatch[1]) || 0
+				}
 			}
-			monthTotal[monthKey] += bill.amount
 		})
+
 		// 取最近6个月（当前月往前）
 		const now = new Date()
-		const currentMonth = now.getMonth() + 1 // 1-12
+		const currentMonth = now.getMonth() + 1
 		const currentYear = now.getFullYear()
 		const months = []
 		for (let i = 0; i < 6; i++) {
@@ -163,37 +191,46 @@
 				month += 12
 				year -= 1
 			}
+			const key = `${year}-${String(month).padStart(2, '0')}`
+			const data = statsMap[key]
 			months.push({
 				month,
-				year
+				year,
+				price: data ? data.price : 0
 			})
 		}
 		chartData.value = months.map((m, i) => ({
 			month: (m.year + '').slice(-2) + '年' + m.month + '月',
 			year: m.year,
 			sortMonth: m.year * 12 + m.month,
-			price: monthTotal[m.month] || 0,
+			price: m.price,
 			index: i
 		})).sort((a, b) => a.sortMonth - b.sortMonth)
 		const prices = chartData.value.map(c => c.price)
 		maxPrice.value = Math.max(...prices, 100)
 	}
 
-	// 计算属性 —— 月份分组
+	// 计算属性 —— 按年-月分组缴费明细
 	const monthGroups = computed(() => {
-		let map = {}
+		const map = {}
 		billList.value.forEach(bill => {
-			if (!map[bill.month]) {
-				map[bill.month] = {
+			const key = `${bill.year}-${String(bill.month).padStart(2, '0')}`
+			if (!map[key]) {
+				map[key] = {
 					month: bill.month,
+					year: bill.year,
 					total: 0,
 					list: []
 				}
 			}
-			map[bill.month].list.push(bill)
-			map[bill.month].total += bill.amount
+			map[key].list.push(bill)
+			map[key].total += bill.amount
+		})
+		// 按年月降序排列
+		return Object.values(map).sort((a, b) => {
+			if (a.year !== b.year) return b.year - a.year
+			return b.month - a.month
 		})
-		return Object.values(map).sort((a, b) => b.month - a.month)
 	})
 
 	// 生命周期
@@ -233,9 +270,16 @@
 
 	.page {
 		flex: 1;
-		overflow-y: auto;
+		display: flex;
+		flex-direction: column;
 		padding: 0px 40rpx;
 		box-sizing: border-box;
+		overflow: hidden;
+	}
+
+	.list-scroll {
+		flex: 1;
+		overflow-y: auto;
 	}
 
 	.total-box {