水费缴费部分代码同步

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

@@ -11,7 +11,7 @@
 			<view class="total-box">
 				<view class="top-box">
 					<view class="total-title">累计缴费</view>
-					<view class="total-price">¥800.00</view>
+					<view class="total-price">¥{{ totalAmount }}</view>
 				</view>
 
 				<view class="chart-box">
@@ -51,7 +51,11 @@
 					<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>
+								<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>
 							<view class="bill-info">
 								<view class="name">{{ bill.name }}</view>
@@ -83,84 +87,97 @@
 		onPullDownRefresh
 	} from '@dcloudio/uni-app'
 
+	import {
+		getTopupRecordWithStat
+	} from '/pageSubPack/api/apiSub.js'
 	// 响应式数据
 	const statusBarHeight = ref(20)
-
-	const chartData = ref([{
-			month: '1月',
-			price: 250
-		},
-		{
-			month: '2月',
-			price: 130
-		},
-		{
-			month: '3月',
-			price: 220
-		},
-		{
-			month: '4月',
-			price: 250
-		},
-		{
-			month: '5月',
-			price: 100
-		},
-		{
-			month: '6月',
-			price: 130
-		}
-	])
-
-	const maxPrice = ref(250)
+	const pageNum = ref(1)
+	const pageSize = ref(10)
+	const totalAmount = ref('0.00')
+	const chartData = ref([])
+	const maxPrice = ref(100)
 	const barMaxHeight = ref(300)
 
-	const chart = ref({
-		months: ['1月', '2月', '3月', '4月', '5月', '6月'],
-		values: [100, 140, 230, 100, 130, 100]
-	})
+	const billList = ref([])
 
-	const billList = ref([{
-			id: 1,
-			month: 5,
-			name: '燃气费',
-			account: '123123123123',
-			amount: 25,
-			icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png"
-		},
-		{
-			id: 2,
-			month: 5,
-			name: '水费',
-			account: '123123123123',
-			amount: 25,
-			icon: "http://47.104.199.163:9090/images/propertyImgs/water.png"
-		},
-		{
-			id: 3,
-			month: 6,
-			name: '燃气费',
-			account: '123123123123',
-			amount: 30,
-			icon: "http://47.104.199.163:9090/images/propertyImgs/gas.png"
-		},
-		{
-			id: 4,
-			month: 6,
-			name: '水费',
-			account: '123123123123',
-			amount: 10,
-			icon: "http://47.104.199.163:9090/images/propertyImgs/water.png"
-		},
-		{
-			id: 5,
-			month: 6,
-			name: '电费',
-			account: '123123123123',
-			amount: 30,
-			icon: "http://47.104.199.163:9090/images/propertyImgs/electric.png"
+	// 图标映射
+	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'
+	}
+
+	// 获取缴费记录
+	const getRecords = async () => {
+		try {
+			const res = await getTopupRecordWithStat({
+				residentUserId: uni.getStorageSync('userId'),
+				pageNum: pageNum.value,
+				pageSize: pageSize.value
+			})
+			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 total = records.reduce((sum, item) => sum + (Number(item.rechargeAmount) || 0), 0)
+				totalAmount.value = total.toFixed(2)
+				// 更新图表数据（根据 records 计算最近6个月）
+				updateChartData()
+			}
+		} 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
+			}
+			monthTotal[monthKey] += bill.amount
+		})
+		// 取最近6个月（当前月往前）
+		const now = new Date()
+		const currentMonth = now.getMonth() + 1 // 1-12
+		const currentYear = now.getFullYear()
+		const months = []
+		for (let i = 0; i < 6; i++) {
+			let month = currentMonth - i
+			let year = currentYear
+			if (month <= 0) {
+				month += 12
+				year -= 1
+			}
+			months.push({
+				month,
+				year
+			})
+		}
+		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,
+			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(() => {
@@ -182,9 +199,10 @@
 	// 生命周期
 	onShow(() => {})
 	onMounted(() => {})
-	onReady(() => {
-		drawLineChart()
+	onLoad(() => {
+		getRecords()
 	})
+	onReady(() => {})
 
 	// 方法
 	const barHeight = (price) => {
@@ -192,81 +210,10 @@
 		return `${height}rpx`
 	}
 
-	const drawLineChart = () => {
-		// #ifdef MP-WEIXIN
-		const ctx = uni.createCanvasContext('chargeChart')
-		// #endif
-		// #ifndef MP-WEIXIN
-		const ctx = uni.createCanvasContext('chargeChart', this)
-		// #endif
-
-		const canvasPage = uni.getSystemInfoSync();
-		const w = canvasPage.windowWidth - 30;
-		const h = canvasPage.windowHeight * 0.3;
-		const padding = 40
-		const stepX = (w - 60) / (chart.value.months.length - 1)
-		const maxVal = 250
-
-		ctx.setFillStyle('#999')
-		ctx.setFontSize(12)
-		ctx.setTextAlign('center')
-
-		ctx.beginPath()
-		ctx.setStrokeStyle('#d8d8d8')
-		ctx.setLineWidth(1)
-		for (let i = 0; i <= 5; i++) {
-			let y = padding + (h - padding * 2) * (1 - i / 5)
-			ctx.moveTo(40, y)
-			ctx.lineTo(w - 20, y)
-			ctx.fillText(i * 50 + '元', 20, y + 4)
-		}
-		ctx.stroke()
-
-		chart.value.months.forEach((m, i) => {
-			let x = 40 + i * stepX
-			ctx.fillText(m, x, h - 20)
-		})
-
-		let points = []
-		chart.value.values.forEach((val, i) => {
-			let x = 40 + i * stepX
-			let y = padding + (h - padding * 2) * (1 - val / maxVal)
-			points.push({
-				x,
-				y
-			})
-		})
-
-		ctx.beginPath()
-		ctx.setStrokeStyle('#4080FF')
-		ctx.setLineWidth(2)
-		points.forEach((p, i) => {
-			if (i === 0) ctx.moveTo(p.x, p.y)
-			else ctx.lineTo(p.x, p.y)
-		})
-		ctx.stroke()
-
-		points.forEach((p, i) => {
-			ctx.beginPath()
-			ctx.arc(p.x, p.y, 3, 0, 2 * Math.PI)
-			ctx.setFillStyle('#fff')
-			ctx.fill()
-			ctx.setStrokeStyle('#4080FF')
-			ctx.setLineWidth(2)
-			ctx.stroke()
-
-			ctx.setFillStyle('#4080FF')
-			ctx.setFontSize(13)
-			ctx.fillText(chart.value.values[i] + '元', p.x, p.y - 10)
-		})
-
-		ctx.draw()
-	}
-
 	const goBack = () => {
 		uni.redirectTo({
 			url: '/pageSubPack/payment-list/paymentIndex'
-		})
+		});
 	}
 </script>
 
@@ -443,7 +390,7 @@
 	}
 
 	.chart-month {
-		font-size: 32rpx;
+		font-size: 26rpx;
 		color: #666;
 		margin-top: 24rpx;
 	}