437 lines
9.9 KiB
Vue
437 lines
9.9 KiB
Vue
<template>
|
||
<view class="contentStyle" style="">
|
||
<!-- <view class="status-bar"></view>
|
||
<uni-nav-bar title="缴费记录" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||
</uni-nav-bar> -->
|
||
|
||
<view class="page">
|
||
<!-- 累计缴费 -->
|
||
<view class="total-box">
|
||
<view class="top-box">
|
||
<view class="total-title">累计缴费</view>
|
||
<view class="total-price">¥{{ totalAmount }}</view>
|
||
</view>
|
||
|
||
<view class="chart-box">
|
||
<view v-if="chartData.length === 0" class="empty-state">
|
||
<uni-icons type="info" size="30" color="#ccc"></uni-icons>
|
||
<text class="empty-text">
|
||
{{ '暂无数据'}}
|
||
</text>
|
||
</view>
|
||
<!-- 循环6个月柱状图 -->
|
||
<view class="chart-item" v-for="(item,index) in chartData" :key="index">
|
||
<!-- 柱子顶部金额文字 -->
|
||
<view class="chart-label">{{ item.price }}元</view>
|
||
<!-- 柱状图柱子 -->
|
||
<view class="chart-bar" :style="{ height: barHeight(item.price) }"></view>
|
||
<!-- 底部月份文字 -->
|
||
<view class="chart-month">{{ item.month }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<!-- 缴费明细（分页滚动） -->
|
||
<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="30" 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="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>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
onMounted,
|
||
computed
|
||
|
||
} from 'vue'
|
||
import {
|
||
onShow,
|
||
onReady,
|
||
onReachBottom,
|
||
onLoad,
|
||
onUnload,
|
||
onPullDownRefresh
|
||
} from '@dcloudio/uni-app'
|
||
|
||
import {
|
||
getTopupRecordWithStat
|
||
} from '/pageSubPack/api/apiSub.js'
|
||
// 响应式数据
|
||
const statusBarHeight = ref(20)
|
||
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 billList = ref([])
|
||
|
||
// 费用名称映射
|
||
// 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 iconMap = {
|
||
'电费': 'https://wuye.ckdzkj.com/images/propertyImgs/electric.png',
|
||
'水费': 'https://wuye.ckdzkj.com/images/propertyImgs/water.png',
|
||
'物业费': 'https://wuye.ckdzkj.com/images/propertyImgs/property.png',
|
||
'车位费': 'https://wuye.ckdzkj.com/images/propertyImgs/parking.png',
|
||
'垃圾处理费': 'https://wuye.ckdzkj.com/images/propertyImgs/garbage.png',
|
||
'充值': 'https://wuye.ckdzkj.com/images/propertyImgs/water.png',
|
||
'账单': 'https://wuye.ckdzkj.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,
|
||
pageSize: pageSize.value
|
||
})
|
||
if (res.code === 200) {
|
||
const records = res.data.records || []
|
||
// 转换记录格式
|
||
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
|
||
// 累计缴费金额
|
||
totalAmount.value = res.data.totalAmount || '0.00'
|
||
// 柱状图数据（使用API返回的monthlyStats）
|
||
updateChartData(res.data.monthlyStats || {})
|
||
}
|
||
} catch (err) {
|
||
console.error('获取缴费记录失败', err)
|
||
}
|
||
}
|
||
|
||
// 加载更多（触底分页）
|
||
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
|
||
}
|
||
}
|
||
})
|
||
|
||
// 取最近6个月（当前月往前）
|
||
const now = new Date()
|
||
const currentMonth = now.getMonth() + 1
|
||
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
|
||
}
|
||
const key = `${year}-${String(month).padStart(2, '0')}`
|
||
const data = statsMap[key]
|
||
months.push({
|
||
month,
|
||
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: 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(() => {
|
||
const map = {}
|
||
billList.value.forEach(bill => {
|
||
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[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
|
||
})
|
||
})
|
||
|
||
// 生命周期
|
||
onShow(() => {})
|
||
onMounted(() => {})
|
||
onLoad(() => {
|
||
getRecords()
|
||
})
|
||
onReady(() => {})
|
||
|
||
// 方法
|
||
const barHeight = (price) => {
|
||
const height = (price / maxPrice.value) * barMaxHeight.value
|
||
return `${height}rpx`
|
||
}
|
||
|
||
const goBack = () => {
|
||
uni.navigateBack();
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
// background: #f2f1f6;
|
||
}
|
||
</style>
|
||
|
||
<style scoped>
|
||
.contentStyle {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
|
||
}
|
||
|
||
.page {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0px 40rpx;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.list-scroll {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.total-box {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 100rpx 0;
|
||
color: #ccc;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 32rpx;
|
||
color: #999;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.top-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.total-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.total-price {
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
margin-top: 10rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.chart-canvas {
|
||
width: calc(100vw - 60rpx);
|
||
height: 30vh;
|
||
}
|
||
|
||
.list-wrapper {
|
||
padding: 10rpx 0rpx;
|
||
}
|
||
|
||
.month-group {
|
||
border-bottom: 2rpx solid #f2f2f2;
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
margin-bottom: 30rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.month-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.bill-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
padding-bottom: 30rpx;
|
||
border-bottom: 1px solid #ebebeb;
|
||
}
|
||
|
||
.bill-item:last-child {
|
||
border-bottom: none;
|
||
margin-bottom: 0rpx;
|
||
padding-bottom: 0rpx;
|
||
}
|
||
|
||
.bill-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #4080FF;
|
||
margin-right: 24rpx;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.iconStyle {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.bill-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.name {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.account {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.bill-price {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.status-bar {
|
||
width: 100vw;
|
||
height: 46px;
|
||
}
|
||
</style>
|
||
|
||
<style scoped>
|
||
.chart-box {
|
||
width: 100%;
|
||
height: 444rpx;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-around;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.chart-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
width: 120rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.chart-label {
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.chart-bar {
|
||
width: 40rpx;
|
||
background: #3388ff;
|
||
border-radius: 40rpx 40rpx 0 0;
|
||
}
|
||
|
||
.chart-month {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-top: 24rpx;
|
||
}
|
||
</style> |