wangyuxin/huakai-project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

10/14

Browse Source
This commit is contained in:
Zy
2026-10-14 09:28:49 +08:00
parent ace7d969ac
commit 27d9fddccc
18 changed files with 4164 additions and 3890 deletions
Download Patch File Download Diff File Expand all files Collapse all files

653
huakai-app/pageSubPack/payment-list/paymentRecord.vue
View File

@@ -1,12 +1,8 @@
<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>
<!-- 表单区域 -->
<scroll-view class="page" scroll-y="true">
<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">
@@ -16,13 +12,13 @@
<view class="chart-box">
<view v-if="chartData.length === 0" class="empty-state">
<uni-icons type="info" size="60" color="#ccc"></uni-icons>
<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-item" v-for="(item, index) in chartData" :key="index">
<!-- 柱子顶部金额文字 -->
<view class="chart-label">{{ item.price }}元</view>
<!-- 柱状图柱子 -->
@@ -31,367 +27,402 @@
<view class="chart-month">{{ item.month }}</view>
</view>
</view>
</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="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.month }}月 缴费 ¥{{ item.total }}</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=='水表'"></image>
<image class="iconStyle" src="https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png"
v-if="bill.name=='电表'"></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 }}</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>
<script setup>
import {
ref,
onMounted,
computed
import { ref, onMounted, computed } from 'vue';
import { onShow, onReady, onReachBottom, onLoad, onUnload, onPullDownRefresh } from '@dcloudio/uni-app';
import { getTopupRecordWithStat } from '/pageSubPack/api/apiSub.js';
import { imgBaseUrl } from '../api/request.js';
} from 'vue'
import {
onShow,
onReady,
onReachBottom,
onLoad,
onUnload,
onPullDownRefresh
} from '@dcloudio/uni-app'
// 响应式数据
const statusBarHeight = ref(20);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const totalAmount = ref('0.00');
const chartData = ref([]);
const maxPrice = ref(100);
const barMaxHeight = ref(300);
const allInfo = ref(null);
const billList = ref([]);
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)
let isFirstLoading = true;
const billList = ref([])
// 图标映射
const iconMap = {
'水表': 'https://wuyeadmin.bugtc.com/images/propertyImgs/water.png',
'电表': '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 () => {
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 => ({
// 图标映射
const iconMap = {
电费: `${imgBaseUrl}/images/propertyImgs/electric.png`,
水费: `${imgBaseUrl}/images/propertyImgs/water.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,
queryType: 1
});
if (res.code === 200) {
isFirstLoading = false;
allInfo.value = res.data;
total.value = res.data.total;
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,
month: item.rechargeTime && item.rechargeTime.split('-')[1] ? parseInt(item.rechargeTime.split('-')[1], 10) : 1,
name: item.type == 1 ? '电表' : item.type == 2 ? '水表' : '',
account: item.deviceCode || '-',
amount: Number(item.rechargeAmount) || 0,
icon: iconMap[item.type == 1 ? '电表' : item.type == 2 ? '水表' : ''] || '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)
year: parts[0] ? parseInt(parts[0], 10) : new Date().getFullYear(),
month: parts[1] ? parseInt(parts[1], 10) : 1,
name,
account: item.deviceCode || '',
amount: 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);
}
};
// 更新图表数据（根据 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
})
// 加载更多（触底分页）
const loadMore = () => {
const allSize = pageNum.value * pageSize.value;
if (!isFirstLoading && total.value <= allSize) {
return;
}
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
};
}
chartData.value = months.map((m, i) => ({
});
// 取最近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: 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)
}
}))
.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 = {}
billList.value.forEach(bill => {
if (!map[bill.month]) {
map[bill.month] = {
month: bill.month,
total: 0,
list: []
}
}
map[bill.month].list.push(bill)
map[bill.month].total += bill.amount
})
return Object.values(map).sort((a, b) => 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.switchTab({
url: '/pages/paymentIndex/paymentIndex'
// 计算属性 —— 按年-月分组缴费明细
const monthGroups = computed(() => {
const map = {};
if (allInfo.value !== null) {
const list = Object.entries(allInfo.value.monthlyStats);
list.forEach(([yearmonth, moneyString]) => {
const money = moneyString.match(/([\d.]+)元/);
const month = yearmonth.split('-')[1];
map[yearmonth] = {
month: parseFloat(yearmonth.split('-')[1]),
year: yearmonth.split('-')[0],
total: money[1],
list: []
};
});
}
billList.value.forEach((item) => {
const key = `${item.year}-${String(item.month).padStart(2, '0')}`;
map[key].list.push(item);
});
// 按年月降序排列
return Object.values(map).sort((a, b) => {
if (a.year !== b.year) return b.year - a.year;
return b.month - a.month;
});
});
// 生命周期
onLoad(() => {
getRecords();
});
// 方法
const barHeight = (price) => {
const height = (price / maxPrice.value) * barMaxHeight.value;
return `${height}rpx`;
};
const goBack = () => {
uni.navigateBack();
};
</script>
<style lang="scss">
page {
// background: #f2f1f6;
}
page {
// background: #f2f1f6;
}
</style>
<style scoped>
.contentStyle {
display: flex;
flex-direction: column;
height: 100vh;
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
}
.contentStyle {
display: flex;
flex-direction: column;
height: 100vh;
background: linear-gradient(to left bottom, #e2efff 0%, #f9f9f9 50%);
}
.page {
flex: 1;
overflow-y: auto;
padding: 0px 40rpx;
box-sizing: border-box;
}
.page {
flex: 1;
display: flex;
flex-direction: column;
padding: 0px 40rpx;
box-sizing: border-box;
overflow: hidden;
}
.total-box {
margin-bottom: 30rpx;
}
.list-scroll {
flex: 1;
overflow-y: auto;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 0;
color: #ccc;
}
.total-box {
margin-bottom: 30rpx;
}
.empty-text {
font-size: 32rpx;
color: #999;
margin-top: 20rpx;
margin-bottom: 10rpx;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 0;
color: #ccc;
}
.top-box {
display: flex;
justify-content: space-between;
align-items: center;
}
.empty-text {
font-size: 32rpx;
color: #999;
margin-top: 20rpx;
margin-bottom: 10rpx;
}
.total-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
.top-box {
display: flex;
justify-content: space-between;
align-items: center;
}
.total-price {
font-size: 48rpx;
font-weight: bold;
margin-top: 10rpx;
margin-bottom: 20rpx;
}
.total-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
.chart-canvas {
width: calc(100vw - 60rpx);
height: 30vh;
}
.total-price {
font-size: 48rpx;
font-weight: bold;
margin-top: 10rpx;
margin-bottom: 20rpx;
}
.list-wrapper {
padding: 10rpx 0rpx;
}
.chart-canvas {
width: calc(100vw - 60rpx);
height: 30vh;
}
.month-group {
border-bottom: 2rpx solid #f2f2f2;
padding: 30rpx;
background-color: #fff;
margin-bottom: 30rpx;
border-radius: 10rpx;
}
.list-wrapper {
padding: 10rpx 0rpx;
}
.month-title {
font-size: 32rpx;
font-weight: 600;
margin-bottom: 30rpx;
}
.month-group {
border-bottom: 2rpx solid #f2f2f2;
padding: 30rpx;
background-color: #fff;
margin-bottom: 30rpx;
border-radius: 10rpx;
}
.bill-item {
display: flex;
align-items: center;
margin-bottom: 30rpx;
padding-bottom: 30rpx;
border-bottom: 1px solid #ebebeb;
}
.month-title {
font-size: 32rpx;
font-weight: 600;
margin-bottom: 30rpx;
}
.bill-item:last-child {
border-bottom: none;
margin-bottom: 0rpx;
padding-bottom: 0rpx;
}
.bill-item {
display: flex;
align-items: center;
margin-bottom: 30rpx;
padding-bottom: 30rpx;
border-bottom: 1px solid #ebebeb;
}
.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;
}
.bill-item:last-child {
border-bottom: none;
margin-bottom: 0rpx;
padding-bottom: 0rpx;
}
.iconStyle {
width: 100%;
height: 100%;
}
.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;
}
.bill-info {
flex: 1;
}
.iconStyle {
width: 100%;
height: 100%;
}
.name {
font-size: 28rpx;
color: #333;
font-weight: 600;
}
.bill-info {
flex: 1;
}
.account {
font-size: 24rpx;
color: #999;
margin-top: 8rpx;
}
.name {
font-size: 28rpx;
color: #333;
font-weight: 600;
}
.bill-price {
font-size: 32rpx;
color: #333;
}
.account {
font-size: 24rpx;
color: #999;
margin-top: 8rpx;
}
.status-bar {
width: 100vw;
height: 46px;
}
.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-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-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-label {
font-size: 32rpx;
color: #333;
margin-bottom: 20rpx;
}
.chart-bar {
width: 40rpx;
background: #3388ff;
border-radius: 40rpx 40rpx 0 0;
}
.chart-bar {
width: 40rpx;
background: #3388ff;
border-radius: 40rpx 40rpx 0 0;
}
.chart-month {
font-size: 26rpx;
color: #666;
margin-top: 24rpx;
}
</style>
.chart-month {
font-size: 26rpx;
color: #666;
margin-top: 24rpx;
}
</style>