修改生活缴费功能

This commit is contained in:
zhouyanli
2026-08-11 11:44:30 +08:00
parent 5f8f5fc73d
commit f793e16263
9 changed files with 950 additions and 437 deletions

View File

@@ -2,8 +2,8 @@
"name" : "花开物业",
"appid" : "__UNI__29C3D60",
"description" : "智慧社区居民端面向小区业主使用,支持注册、验证码、账号密码多种登录方式,提供密码找回功能,账号使用安全便捷。支持多小区切换,首页设有轮播 banner、社区公告集成远程开门、生活缴费、在线报修、访客邀请、社区活动常用服务。全服务板块统一涵盖门禁开门、线上缴费、报修申报、访客预约、投诉反馈、问卷调研、活动报名、社区公示、一键联系物业功能。个人中心可管理房屋、住户、车位、车辆信息支持更换手机号、修改密码、消息通知设置、版本更新及账号退出一站式满足业主居家生活、社区服务、房产车辆管理需求实现社区生活数字化、便捷化。",
"versionName" : "1.0.7",
"versionCode" : 120,
"versionName" : "1.0.9",
"versionCode" : 122,
"transformPx" : false,
"uniCloud" : {
"provider" : "aliyun",

View File

@@ -147,12 +147,16 @@ export const getTopUpSelectByResident = (data) => {
// Zy -------------
// 账单明细列表
export const getTopUpDetails = (data) => {
return post(`/api/topUp/billDetails/list`, data)
}
// Zy --------------
// 账单按月汇总
export const getTopUpDetailsByMonth = (data) => {
return post(`/api/topUp/billDetails/listByMonth`, data)
}

View File

@@ -73,10 +73,12 @@
const loading = ref(false)
const detail = ref(null)
let recordId = ''
let queryDate = ''
onLoad((options) => {
if (options.id) {
recordId = options.id
queryDate = options.date || ''
fetchDetail()
}
})
@@ -86,7 +88,7 @@
loading.value = true
detail.value = null
try {
const res = await inspectionDetails({ id: recordId })
const res = await inspectionDetails({ id: recordId, date: queryDate })
if (res.code === 200) {
detail.value = res.data
} else {

View File

@@ -158,7 +158,7 @@
// ---------- 跳转详情 ----------
const goToInspectionDetail = (item) => {
uni.navigateTo({
url: `/pageSubPack/inspection-revenue/inspection-details?id=${item.id}`
url: `/pageSubPack/inspection-revenue/inspection-details?id=${item.id}&date=${datetime.value}`
})
}
</script>

View File

@@ -290,9 +290,11 @@
uni.showLoading({ title: '退出中...', mask: true })
const clearAndGo = () => {
const uid = uni.getStorageSync('userId') || ''
uni.removeStorageSync('token')
uni.removeStorageSync('userId')
uni.removeStorageSync('currentVillageId')
uni.removeStorageSync('home_cache_' + uid)
uni.removeStorageSync('home_cache')
uni.hideLoading()
uni.hideToast()

View File

@@ -0,0 +1,447 @@
<template>
<view class="wrap">
<scroll-view class="page" scroll-y @scrolltolower="onLoadMore">
<view class="empty-state" v-if="!loading && billList.length === 0">
<text class="empty-text">暂无账单数据</text>
</view>
<up-collapse v-if="billList.length" :border="false">
<up-collapse-item
v-for="(item, index) in billList"
:key="index"
:name="String(index)"
>
<!-- 标题勾选框 + 月份 -->
<template #title>
<view class="collapse-header">
<view class="check-circle" :class="{ checked: item.selected }" @click.stop="toggleSelect(index)">
<text v-if="item.selected" class="check-icon"></text>
</view>
<text class="month-text">{{ item.month }}</text>
</view>
</template>
<!-- 右侧金额 -->
<template #value>
<text class="price-text">¥{{ item.totalAmount }}</text>
</template>
<!-- 展开内容每条明细 -->
<view class="collapse-body">
<view class="detail-row fee-row" v-for="(detail, di) in item.details" :key="di">
<text class="detail-label">{{ detail.name }}</text>
<text class="detail-value">¥{{ detail.amount }}</text>
</view>
<view class="detail-row meta-row" v-if="item.unitNo || item.date">
<text class="detail-label">{{ item.unitNo }}</text>
<text class="detail-value">{{ item.date }}</text>
</view>
<view class="detail-row meta-row">
<text class="detail-label">原金额¥{{ item.totalAmount }}</text>
<text class="detail-value">优惠¥{{ formatNum(item.discount) }}</text>
</view>
</view>
</up-collapse-item>
</up-collapse>
<!-- 加载状态 -->
<view class="load-more-status" v-if="loadingMore">
<text class="loading-text">加载中...</text>
</view>
<view class="load-more-status" v-else-if="!hasMore && billList.length >= pageSize">
<text class="no-more-text"> 没有更多了 </text>
</view>
</scroll-view>
<!-- 底部操作栏 -->
<view class="bottom-bar" v-if="billList.length">
<view class="select-all" @click="toggleSelectAll">
<view class="check-circle" :class="{ checked: isAllSelected }">
<text v-if="isAllSelected" class="check-icon"></text>
</view>
<text class="select-all-text">全选</text>
</view>
<view class="total-box">
<text class="total-label">合计</text>
<text class="total-price">¥{{ selectedTotal.toFixed(2) }}</text>
</view>
<button class="pay-btn" :disabled="!canPay" @click="handleBatchPay">立即缴费</button>
</view>
</view>
</template>
<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getTopUpDetailsByMonth } from '/pageSubPack/api/apiSub.js'
const loading = ref(false)
const billList = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
const hasMore = ref(true)
const loadingMore = ref(false)
// 从 paymentIndex 传来的数据中取 billResidentId
const cacheItem = uni.getStorageSync('arrearsPayment') || {}
const billResidentId = ref(cacheItem.billResidentId || cacheItem.id || '')
onLoad(() => {
fetchBills()
})
// 拉取按月汇总账单
const fetchBills = async (isLoadMore = false) => {
if (!billResidentId.value) return
if (isLoadMore) {
if (!hasMore.value || loadingMore.value) return
pageNum.value++
loadingMore.value = true
} else {
pageNum.value = 1
hasMore.value = true
loading.value = true
}
try {
const res = await getTopUpDetailsByMonth({
billResidentId: billResidentId.value,
villageId: uni.getStorageSync('currentVillageId') || '',
pageNum: pageNum.value,
pageSize: pageSize.value
})
const rows = res.rows || []
const typeNameMap = { '0': '物业管理服务费', '1': '车位管理费', '2': '生活垃圾处理费' }
const mapped = rows.map(r => {
const firstDetail = (r.details && r.details.length) ? r.details[0] : {}
const restDetails = (r.details || []).slice(1)
return {
month: r.month || '',
totalAmount: formatNum(r.totalAmount),
discount: 0,
selected: false,
periodDisplay: firstDetail.periodDisplay || '',
unitNo: cacheItem.unitNo || cacheItem.fullAddress || '',
date: r.month || '',
details: restDetails.map(d => ({
name: typeNameMap[d.type] || d.name || '缴费费用',
amount: formatNum(d.amount),
id: d.id,
payStatus: d.payStatus || '0'
})),
billIds: (r.details || []).map(d => d.id).filter(Boolean)
}
})
if (isLoadMore) {
billList.value = [...billList.value, ...mapped]
} else {
billList.value = mapped
}
total.value = res.total || 0
hasMore.value = billList.value.length < total.value
} catch (e) {
if (isLoadMore) pageNum.value--
console.error('获取账单失败', e)
} finally {
loading.value = false
loadingMore.value = false
}
}
const onLoadMore = () => {
fetchBills(true)
}
const formatNum = (val) => {
return (Number(val || 0)).toFixed(2)
}
const toggleSelect = (index) => {
const current = billList.value[index]
if (!current.selected) {
// 选中:检查前面所有项是否都已选中,不允许跳过
for (let i = 0; i < index; i++) {
if (!billList.value[i].selected) {
uni.showToast({ title: '请按顺序从第一个月开始选择', icon: 'none' })
return
}
}
billList.value[index].selected = true
} else {
// 取消选中:同时取消该项及后面所有已选中的
for (let i = index; i < billList.value.length; i++) {
billList.value[i].selected = false
}
}
}
const isAllSelected = computed(() =>
billList.value.length > 0 && billList.value.every(m => m.selected)
)
const toggleSelectAll = () => {
const val = !isAllSelected.value
billList.value.forEach(m => { m.selected = val })
}
const selectedTotal = computed(() =>
billList.value.filter(m => m.selected).reduce((sum, m) => sum + Number(m.totalAmount || 0), 0)
)
const canPay = computed(() => {
const selected = billList.value.filter(m => m.selected)
if (!selected.length) return false
// 必须从第一个开始且连续
return billList.value[0].selected && selected.length > 0
})
// 批量缴费
const handleBatchPay = () => {
const selected = billList.value.filter(m => m.selected)
if (!selected.length) return
const allIds = selected.flatMap(m => m.billIds)
const token = uni.getStorageSync('token') || ''
const userId = uni.getStorageSync('userId') || ''
const query = [
['acct', userId],
['orderType', '10'],
['billId', allIds.join(',')],
['deviceType', '3'],
['residentUserId', userId],
['token', token]
].map(([k, v]) => encodeURIComponent(k) + '=' + encodeURIComponent(v)).join('&')
// #ifdef APP-PLUS
uni.showLoading({ title: '加载中...' })
plus.share.getServices((services) => {
const wx = services.find(s => s.id === 'weixin')
uni.hideLoading()
if (!wx) return uni.showToast({ title: '未检测到微信客户端', icon: 'none' })
if (!wx.launchMiniProgram) return uni.showToast({ title: '当前微信版本太低,不支持拉起小程序', icon: 'none' })
wx.launchMiniProgram({
id: 'gh_a765aef0172c',
type: 1,
path: 'pages/arrearsPayment/arrearsPayment?' + query,
}, (res) => {
console.log('小程序回调:', JSON.stringify(res))
}, (err) => {
console.error('拉起失败:', JSON.stringify(err))
uni.showToast({ title: '拉起支付小程序失败', icon: 'none' })
})
})
// #endif
}
</script>
<style lang="scss">
page {
background-color: #f5f5f5;
}
</style>
<style scoped>
.wrap {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #f5f5f5;
}
.page {
flex: 1;
overflow-y: auto;
padding: 20rpx 30rpx;
box-sizing: border-box;
padding-bottom: 140rpx;
}
.empty-state {
display: flex;
align-items: center;
justify-content: center;
padding: 200rpx 0;
}
.empty-text {
font-size: 30rpx;
color: #ccc;
}
.load-more-status {
display: flex;
justify-content: center;
align-items: center;
padding: 20rpx 0;
}
.loading-text {
font-size: 26rpx;
color: #999;
}
.no-more-text {
font-size: 26rpx;
color: #ccc;
}
/* ---- 折叠面板 ---- */
::v-deep .u-collapse-item {
margin-bottom: 20rpx;
border-radius: 8rpx;
overflow: hidden;
background: #fff;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}
::v-deep .u-collapse-item__content {
background: #F5FAFF;
padding: 0;
}
::v-deep .u-cell {
padding: 20rpx 18rpx !important;
}
/* 标题区 */
.collapse-header {
display: flex;
align-items: center;
gap: 16rpx;
}
.check-circle {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
border: 3rpx solid #ddd;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.check-circle.checked {
background-color: #1677ff;
border-color: #1677ff;
}
.check-icon {
color: #fff;
font-size: 24rpx;
font-weight: bold;
line-height: 1;
}
.month-text {
font-size: 32rpx;
font-weight: 600;
color: #222;
}
/* 金额 */
.price-text {
font-size: 32rpx;
font-weight: 700;
color: #FF8F40;
}
/* 展开内容 */
.collapse-body {
padding: 20rpx 24rpx 30rpx;
margin: 0 24rpx;
background: #F5FAFF;
}
.detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14rpx 0;
}
.detail-label {
font-size: 28rpx;
}
.detail-value {
font-size: 28rpx;
}
/* 明细费用名 - 深色 */
.fee-row .detail-label,
.fee-row .detail-value {
color: #666666;
}
/* 日期/原金额/优惠 - 浅色 */
.meta-row .detail-label,
.meta-row .detail-value {
color: #999999;
}
/* ---- 底部操作栏 ---- */
.bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
padding: 20rpx 30rpx;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
background: #fff;
box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.06);
z-index: 10;
}
.select-all {
display: flex;
align-items: center;
gap: 10rpx;
flex-shrink: 0;
margin-right: 16rpx;
}
.select-all-text {
font-size: 26rpx;
color: #666;
}
.total-box {
flex: 1;
display: flex;
align-items: baseline;
justify-content: center;
}
.total-label {
font-size: 26rpx;
color: #666;
}
.total-price {
font-size: 36rpx;
font-weight: 700;
color: #FF8F40;
}
.pay-btn {
flex-shrink: 0;
width: 180rpx;
height: 72rpx;
line-height: 72rpx;
background-color: #1677ff;
color: #fff;
font-size: 28rpx;
font-weight: 500;
border-radius: 8rpx;
border: none;
padding: 0;
}
.pay-btn[disabled] {
background-color: #ccc;
opacity: 0.7;
}
</style>

View File

@@ -3,65 +3,86 @@
<view class="topbox">
<image class="titleImg" src="https://wuyeadmin.bugtc.com/images/propertyImgs/payTitle.png"></image>
<image class="payImg" src="https://wuyeadmin.bugtc.com/images/propertyImgs/payImg.png"></image>
<!-- 小区选择 -->
<view class="community-bar" @click="navigateToSelectHome">
<image src="https://wuyeadmin.bugtc.com/images/home/adress.png" class="location-icon"></image>
<text class="community-name">{{ currentCommunity }}</text>
<u-icon name="arrow-down-fill" size="14" color="#222222"></u-icon>
</view>
</view>
<scroll-view class="page" scroll-y="true">
<view class="container">
<!-- 已缴费/费列表 -->
<view class="bill-list" v-if="paymentList.length != 0">
<view class="bill-item" @click="goToBill(item)" v-for="item,index in paymentList" :key="index">
<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/water.png"
v-if="item.type=='水费'"></image>
<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png"
v-if="item.type=='电费'"></image>
<view class="bill-info">
<view class="bill-title">{{item.type}}
<view class="bill-status debt" v-if="item.balance<0">已欠费</view>
<text :class="item.balance<0 ? 'balance-debt' : 'balance-normal'">(余额{{item.balance|| 0.00}})</text>
</view>
<view class="bill-desc">{{item.villageName+item.buildingName+item.fullAddress}}</view>
</view>
<view class="arrow"></view>
</view>
</view>
<!-- 物业费/车位费/垃圾处理费列表 -->
<scroll-view class="details-scroll" scroll-y="true" @scrolltolower="onLoadMore" v-if="detailslist.length != 0">
<!-- /费列表 -->
<scroll-view class="details-scroll" scroll-y="true" @scrolltolower="onPayLoadMore">
<view class="bill-list">
<view class="bill-item" @click="goToBill(item)" v-for="item,index in detailslist" :key="index">
<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/property.png"
v-if="item.type=='0'"></image>
<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/parkingIcon.png"
v-if="item.type=='1'"></image>
<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/垃圾处理2x.png"
v-if="item.type=='2'"></image>
<view class="bill-info">
<view class="bill-title">{{switchStatus(item.type)}}
<view class="bill-status debt" v-if="item.payStatus === '0'">未缴纳</view>
<template v-if="paymentList.length != 0">
<view class="bill-item" @click="goToBill(item)" v-for="item,index in paymentList" :key="index">
<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/water.png"
v-if="item.type=='水费'"></image>
<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png"
v-if="item.type=='电费'"></image>
<view class="bill-info">
<view class="bill-title">{{item.type}}
<view class="bill-status debt" v-if="item.balance<0">已欠费</view>
<text :class="item.balance<0 ? 'balance-debt' : 'balance-normal'">(余额{{item.balance|| 0.00}})</text>
</view>
<view class="bill-desc">{{item.villageName+item.buildingName+item.fullAddress}}</view>
</view>
<view class="bill-desc">{{item.name}}</view>
<view class="arrow"></view>
</view>
<view class="arrow"></view>
</view>
<!-- 滚动加载状态 -->
<view class="load-more-status" v-if="loadingMore">
<text class="loading-text">加载中...</text>
</view>
<view class="load-more-status" v-else-if="!hasMore && detailslist.length >= pageSize">
<text class="no-more-text"> 没有更多了 </text>
<!-- 滚动加载状态 -->
<view class="load-more-status" v-if="payLoadingMore">
<text class="loading-text">加载中...</text>
</view>
<view class="load-more-status" v-else-if="!payHasMore && paymentList.length >= payPageSize">
<text class="no-more-text"> 没有更多了 </text>
</view>
</template>
<view class="empty-state" v-else>
<text class="empty-text">暂无数据</text>
</view>
</view>
</scroll-view>
<!-- 物业费/垃圾处理费列表 -->
<!-- 物业费/垃圾处理费列表 -->
<scroll-view class="details-scroll" scroll-y="true" @scrolltolower="onLoadMore">
<view class="bill-list">
<template v-if="detailslist.length != 0">
<view class="bill-item" :class="{ 'bill-paid': !item.amount }" @click="!item.amount ? null : goToBill(item)" v-for="item,index in detailslist" :key="index">
<image class="billIcon" src="https://wuyeadmin.bugtc.com/images/propertyImgs/property.png"></image>
<view class="bill-info">
<view class="bill-title">{{ item.name }}
<view class="bill-status debt" v-if="item.amount">未缴纳</view>
<view class="bill-status done" v-if="!item.amount">已完成</view>
<!-- <view class="bill-amount">({{item.amount}})</view> -->
</view>
<view class="bill-desc">{{ item.unitNo}}</view>
</view>
<view class="arrow"></view>
</view>
<!-- 滚动加载状态 -->
<view class="load-more-status" v-if="loadingMore">
<text class="loading-text">加载中...</text>
</view>
<view class="load-more-status" v-else-if="!hasMore && detailslist.length >= pageSize">
<text class="no-more-text"> 没有更多了 </text>
</view>
</template>
<view class="empty-state" v-else>
<text class="empty-text">暂无数据</text>
</view>
</view>
</scroll-view>
<!-- 新增缴费区域 -->
<view class="add-section">
<view class="section-header">
<text class="section-title">新增缴费</text>
<text class="record-link" @click="goToRecord">缴费记录</text>
</view>
<view class="grid-list">
<view class="grid-item" v-for="(item, index) in addList" :key="index" @click="goToAdd(item)">
<view class="icon-box" :class="item.iconClass">
<image class="iconStyle" :src="item.icon"></image>
@@ -72,15 +93,6 @@
</view>
</view>
<!-- 开启通知按钮 -->
<!-- v-if="subscribeAuth !== 'accepted'" -->
<!-- <view class="subscribe-btn" @click="requestSubscribeMessageClick">
<text class="subscribe-btn-text">开启缴费通知</text>
</view> -->
<!-- <button class="subscribe-btn" @tap="handleWaterElecSubscribe" open-type="subscribeMessage">
开启订单状态通知
</button> -->
<view style="width: 100%;height: 30rpx;"></view>
</view>
</scroll-view>
@@ -88,35 +100,27 @@
</template>
<script setup>
import { ref } from 'vue'
import { onShow, onLoad, onBackPress } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { onShow, onLoad, onBackPress, onUnload } from '@dcloudio/uni-app'
import { getTopUpDetails, getTopUpSelectByResident } from '/pageSubPack/api/apiSub.js'
import { getCurrentVillage } from '/pageSubPack/api/api.js'
import {
getTopUpSelectByResident,
getTopUpDetails,
} from '/pageSubPack/api/apiSub.js'
// 响应式数据
const detailslist = ref([])
const pageNum = ref(1)
const pageSize = ref(3)
const total = ref(0)
const hasMore = ref(true)
const loadingMore = ref(false)
const paymentList = ref([
// {
// id: 1,
// name: '物业费',
// status: '已欠费',
// address: '桂花园别墅2号楼2层',
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/property.png",
// },
// {
// id: 2,
// name: '暖气费',
// status: '',
// address: '山东省日照市东港区桂花园别墅2号楼2层',
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/heating.png",
// },
// 响应式数据
const detailslist = ref([])
const pageNum = ref(1)
const pageSize = ref(5)
const total = ref(0)
const hasMore = ref(true)
const loadingMore = ref(false)
const payPageNum = ref(1)
const payPageSize = ref(5)
const payTotal = ref(0)
const payHasMore = ref(true)
const payLoadingMore = ref(false)
// 小区选择
const currentCommunity = ref('请绑定房屋')
const paymentList = ref([
{
id: 3,
name: '电费',
@@ -127,12 +131,7 @@
])
const addList = ref([
// {
// name: "燃气",
// type: "gas",
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/gas.png",
// iconClass: "gas"
// },
{
name: "水表",
type: "water",
@@ -145,391 +144,443 @@
icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/electric.png",
iconClass: "electric"
},
// {
// name: "物业费",
// type: "property",
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/property.png",
// iconClass: "property"
// },
// {
// name: "车位费",
// type: "parking",
// icon: "https://wuyeadmin.bugtc.com/images/propertyImgs/parkingIcon.png",
// iconClass: "parking"
// }
])
onShow(() => {
// Zy --------------
getBillDetails()
// Zy --------------
// 不再自动请求订阅消息,改为用户点击触发
})
// 生命周期
onLoad(() => {
uni.hideTabBar({ animation: false });
getPayList()
})
// 页面返回拦截
onBackPress(() => {
const pages = getCurrentPages()
if (pages.length <= 1) {
uni.switchTab({ url: "/pages/serviceIndex/serviceIndex" })
return true
}
})
const getPayList = async () => {
// 防重复请求
try {
const res = await getTopUpSelectByResident({
residentUserId: uni.getStorageSync('userId')
})
const data = res.data
paymentList.value = data
} catch (err) {
uni.showToast({
title: err.msg || '网络异常',
icon: 'none'
})
// console.error('列表接口报错:', err)
} finally {
}
}
// 方法
const goToBill = (item) => {
uni.setStorageSync('arrearsPayment', item)
const type = String(item.type || '')
// 物业费、车位费、垃圾处理费走物业费缴纳页;水费、电费走欠费缴纳页
const isProperty = ['物业费', '车位费', '垃圾处理费', '垃圾费', '0', '1', '2'].includes(type)
if (isProperty) {
uni.navigateTo({
url: `/pageSubPack/payment-list/propertyFeePayment?amount=${item.amount || ''}`
})
// 获取当前小区
const getCurrentCommunityData = () => {
getCurrentVillage().then(res => {
if (res.code === 200 && res.data && res.data.villageId) {
currentCommunity.value = res.data.villageName || '未命名小区'
} else {
uni.navigateTo({
url: '/pageSubPack/payment-list/arrearsPayment'
})
currentCommunity.value = '请绑定房屋'
}
}).catch(() => {})
}
// 接收小区切换事件
const slelctHomeData = (data) => {
if (data.name) currentCommunity.value = data.name
if (data.villageId) {
uni.setStorageSync('currentVillageId', data.villageId)
}
getBillDetails()
getPayList()
}
// 跳转小区选择
const navigateToSelectHome = () => {
const cachedVillageId = uni.getStorageSync('currentVillageId')
if (!cachedVillageId || cachedVillageId === '0' || cachedVillageId === 0) {
uni.navigateTo({ url: '/pageSubPack/my/myHouseIndex' })
} else {
uni.navigateTo({ url: `/pageSubPack/notice-list/selectHome?villageId=${cachedVillageId}` })
}
}
const goToRecord = () => {
onShow(() => {
getCurrentCommunityData()
getBillDetails()
})
onLoad(() => {
uni.hideTabBar({ animation: false });
uni.$on('confirm', slelctHomeData)
getPayList()
})
onUnload(() => {
uni.$off('confirm', slelctHomeData)
})
// 页面返回拦截
onBackPress(() => {
const pages = getCurrentPages()
if (pages.length <= 1) {
uni.switchTab({ url: "/pages/serviceIndex/serviceIndex" })
return true
}
})
// 跳转账单
const goToBill = (item) => {
uni.setStorageSync('arrearsPayment', item)
// 水费、电费走欠费缴纳页
if (item.type === '水费' || item.type === '电费') {
uni.navigateTo({
url: '/pageSubPack/payment-list/paymentRecord'
url: '/pageSubPack/payment-list/arrearsPayment'
})
} else {
uni.navigateTo({
url: '/pageSubPack/payment-list/billPayment'
})
}
}
const goToAdd = (type) => {
uni.setStorageSync('addPaymentType', type.name)
if (type.name == '燃气' || type.name == '暖气') {
uni.navigateTo({
url: '/pageSubPack/payment-list/selectPaymentEntity'
})
} else if (type.name == '水表' || type.name == '电表') {
uni.navigateTo({
url: '/pageSubPack/payment-list/addHydropower'
})
}
// 跳转缴费记录
const goToRecord = () => {
uni.navigateTo({
url: '/pageSubPack/payment-list/paymentRecord'
})
}
// 新增缴费
const goToAdd = (type) => {
uni.setStorageSync('addPaymentType', type.name)
if (type.name == '燃气' || type.name == '暖气') {
uni.navigateTo({
url: '/pageSubPack/payment-list/selectPaymentEntity'
})
} else if (type.name == '水表' || type.name == '电表') {
uni.navigateTo({
url: '/pageSubPack/payment-list/addHydropower'
})
}
}
// 获取缴费列表
const getBillDetails = (isLoadMore = false) => {
// 获取物业费/车位费缴费列表
const getBillDetails = (isLoadMore = false) => {
if (isLoadMore) {
if (!hasMore.value || loadingMore.value) return
pageNum.value++
loadingMore.value = true
} else {
pageNum.value = 1
hasMore.value = true
}
getTopUpDetails({
userId: uni.getStorageSync('userId'),
villageId: uni.getStorageSync('currentVillageId'),
pageNum: pageNum.value,
pageSize: pageSize.value,
}).then(res => {
if (isLoadMore) {
if (!hasMore.value || loadingMore.value) return
pageNum.value++
loadingMore.value = true
detailslist.value = [...detailslist.value, ...(res.rows || [])]
loadingMore.value = false
} else {
pageNum.value = 1
hasMore.value = true
detailslist.value = res.rows || []
}
getTopUpDetails({
userId: uni.getStorageSync('userId'),
villageId: uni.getStorageSync('currentVillageId'),
pageNum: pageNum.value,
pageSize: pageSize.value,
}).then(res => {
if (isLoadMore) {
detailslist.value = [...detailslist.value, ...(res.rows || [])]
loadingMore.value = false
} else {
detailslist.value = res.rows || []
}
total.value = res.total || 0
hasMore.value = detailslist.value.length < total.value
}).catch(() => {
if (isLoadMore) {
pageNum.value--
loadingMore.value = false
}
total.value = res.total || 0
hasMore.value = detailslist.value.length < total.value
}).catch(() => {
if (isLoadMore) {
pageNum.value--
loadingMore.value = false
}
})
}
const onLoadMore = () => {
getBillDetails(true)
}
// 水电费列表
const getPayList = async (isLoadMore = false) => {
if (isLoadMore) {
if (!payHasMore.value || payLoadingMore.value) return
payPageNum.value++
payLoadingMore.value = true
} else {
payPageNum.value = 1
payHasMore.value = true
}
try {
const res = await getTopUpSelectByResident({
residentUserId: uni.getStorageSync('userId'),
pageNum: payPageNum.value,
pageSize: payPageSize.value,
villageId:uni.getStorageSync('currentVillageId')
})
const data = res.rows || res.data
if (isLoadMore) {
paymentList.value = [...paymentList.value, ...(data || [])]
payLoadingMore.value = false
} else {
paymentList.value = data || []
}
payTotal.value = res.total || 0
payHasMore.value = paymentList.value.length < payTotal.value
} catch (err) {
if (isLoadMore) {
payPageNum.value--
payLoadingMore.value = false
}
uni.showToast({
title: err.msg || '网络异常',
icon: 'none'
})
}
const onLoadMore = () => {
getBillDetails(true)
}
const switchStatus = (type) => {
const typeMap = {
'0': '物业费',
'1': '车位费',
'2': '垃圾处理费'
}
return typeMap[type] || type
}
}
const onPayLoadMore = () => {
getPayList(true)
}
</script>
<style lang="scss">
page {
background: linear-gradient(180deg, #dfedfd, #F6FAFF);
}
page {
background: linear-gradient(180deg, #dfedfd, #F6FAFF);
}
</style>
<style scoped>
.contentStyle {
display: flex;
flex-direction: column;
min-height: 100vh;
background: linear-gradient(180deg, #dfedfd, #F6FAFF);
overflow-x: hidden;
}
.contentStyle {
display: flex;
flex-direction: column;
min-height: 100vh;
background: linear-gradient(180deg, #dfedfd, #F6FAFF);
overflow-x: hidden;
}
.page {
flex: 1;
overflow-y: auto;
padding: 0px 40rpx;
box-sizing: border-box;
}
.page {
flex: 1;
overflow-y: auto;
padding: 0px 40rpx;
box-sizing: border-box;
}
.topbox {
height: 150rpx;
width: 100%;
position: relative;
}
.topbox {
height: 180rpx;
width: 100%;
position: relative;
}
.titleImg {
width: 262rpx;
height: 74rpx;
position: absolute;
left: 40rpx;
bottom: 20rpx;
}
.titleImg {
width: 262rpx;
height: 74rpx;
position: absolute;
left: 40rpx;
bottom: 60rpx;
}
.payImg {
width: 349.97rpx;
height: 313.57rpx;
position: absolute;
right: -80rpx;
bottom: -140rpx;
}
.payImg {
width: 349.97rpx;
height: 313.57rpx;
position: absolute;
right: -80rpx;
bottom: -140rpx;
}
.container {}
/* 小区选择栏 */
.community-bar {
position: absolute;
left: 40rpx;
bottom: 10rpx;
display: flex;
align-items: center;
}
.bill-list {
margin-bottom: 40rpx;
background-color: #fff;
padding: 30rpx;
border-radius: 10rpx;
}
.location-icon {
width: 48rpx;
height: 48rpx;
margin-right: 8rpx;
flex-shrink: 0;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100rpx 0;
color: #ccc;
}
.community-name {
font-size: 26rpx;
font-weight: 500;
color: #222;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 260rpx;
margin-right: 6rpx;
}
.empty-text {
font-size: 32rpx;
color: #999;
margin-top: 20rpx;
margin-bottom: 10rpx;
}
.container {}
.bill-item {
display: flex;
align-items: center;
background-color: #F6F9FE;
border-radius: 12rpx;
padding: 20rpx 20rpx 20rpx 0px;
margin-bottom: 20rpx;
}
.bill-list {
margin-bottom: 40rpx;
background-color: #fff;
padding: 30rpx;
border-radius: 10rpx;
}
.bill-item:last-child {
margin-bottom: 0rpx;
}
.bill-item {
display: flex;
align-items: center;
background-color: #F6F9FE;
border-radius: 12rpx;
padding: 20rpx 20rpx 20rpx 0px;
margin-bottom: 20rpx;
}
.bill-info {
width: calc(90% - 100rpx);
flex: 1;
}
.bill-item:last-child {
margin-bottom: 0rpx;
}
.billIcon {
width: 64rpx;
height: 64rpx;
margin: 20rpx;
}
.bill-item.bill-paid {
opacity: 0.6;
}
.bill-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
margin-bottom: 10rpx;
display: flex;
align-items: center;
}
.bill-info {
width: calc(90% - 100rpx);
flex: 1;
}
.bill-desc {
font-size: 28rpx;
font-weight: 600;
color: #999;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.billIcon {
width: 64rpx;
height: 64rpx;
margin: 20rpx;
}
.bill-status {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2rpx 16rpx;
border-radius: 30rpx;
font-size: 24rpx;
font-weight: 500;
color: #fff;
background-color: #E34D59;
margin-left: 10rpx;
line-height: 1.5;
}
.balance-normal {
font-size: 28rpx;
color: #333;
}
.balance-debt {
font-size: 28rpx;
color: #E34D59;
}
.bill-title {
font-size: 28rpx;
font-weight: 600;
color: #333;
margin-bottom: 10rpx;
display: flex;
align-items: center;
}
.arrow {
width: 12rpx;
height: 12rpx;
border-right: 4rpx solid #ccc;
border-bottom: 4rpx solid #ccc;
transform: rotate(-45deg);
}
.bill-desc {
font-size: 24rpx;
font-weight: 600;
color: #999;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.add-section {
background-color: #fff;
padding: 30rpx;
border-radius: 10rpx;
}
.bill-status {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2rpx 10rpx;
border-radius: 30rpx;
font-size: 14rpx;
font-weight: 500;
color: #fff;
margin-left: 10rpx;
line-height: 1.5;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
}
.bill-status.debt {
background-color: #E34D59;
}
.section-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
.bill-status.done {
background-color: #999;
}
.record-link {
font-size: 28rpx;
color: #1677ff;
}
.arrow {
width: 12rpx;
height: 12rpx;
border-right: 4rpx solid #ccc;
border-bottom: 4rpx solid #ccc;
transform: rotate(-45deg);
}
.grid-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
/* gap: 26rpx; */
}
.details-scroll {
max-height: 500rpx;
margin-bottom: 40rpx;
padding: 20rpx 0;
}
.grid-item {
width: calc(25% - 60rpx);
background-color: #F6F9FE;
border-radius: 12rpx;
padding: 20rpx;
margin-bottom: 20rpx;
margin-left: 20rpx;
display: flex;
align-items: center;
flex-direction: column;
}
/* 每行第 1 个 item 清除左边距,保证对齐 */
.grid-item:nth-child(4n+1) {
margin-left: 0;
}
.load-more-status {
display: flex;
justify-content: center;
align-items: center;
padding: 20rpx 0;
}
.icon-box {
width: 52rpx;
height: 52rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40rpx;
}
.loading-text {
font-size: 26rpx;
color: #999;
}
.iconStyle {
width: 100%;
height: 100%;
}
.no-more-text {
font-size: 26rpx;
color: #ccc;
}
.item-name {
font-size: 28rpx;
font-weight: 600;
color: #333;
}
.balance-normal {
font-size: 28rpx;
color: #333;
}
.subscribe-btn {
margin-top: 20rpx;
background-color: #1677ff;
padding: 24rpx;
border-radius: 10rpx;
text-align: center;
}
.balance-debt {
font-size: 28rpx;
color: #E34D59;
}
.subscribe-btn-text {
color: #fff;
font-size: 32rpx;
font-weight: 600;
}
.add-section {
background-color: #fff;
padding: 30rpx;
border-radius: 10rpx;
}
.details-scroll {
max-height: 500rpx;
margin-bottom: 40rpx;
padding: 20rpx 0;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
}
.load-more-status {
display: flex;
justify-content: center;
align-items: center;
padding: 20rpx 0;
}
.section-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
}
.loading-text {
font-size: 26rpx;
color: #999;
}
.record-link {
font-size: 28rpx;
color: #1677ff;
}
.no-more-text {
font-size: 26rpx;
color: #ccc;
}
</style>
.grid-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.grid-item {
width: calc(25% - 60rpx);
background-color: #F6F9FE;
border-radius: 12rpx;
padding: 20rpx;
margin-bottom: 20rpx;
margin-left: 20rpx;
display: flex;
align-items: center;
flex-direction: column;
}
.grid-item:nth-child(4n+1) {
margin-left: 0;
}
.icon-box {
width: 52rpx;
height: 52rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40rpx;
}
.iconStyle {
width: 100%;
height: 100%;
}
.item-name {
font-size: 28rpx;
font-weight: 600;
color: #333;
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80rpx 0;
}
.empty-text {
font-size: 28rpx;
color: #999;
}
</style>

View File

@@ -437,6 +437,12 @@
"navigationBarTitleText": "",
"navigationStyle": "custom"
}
},
{
"path": "billPayment",
"style": {
"navigationBarTitleText": "缴费账单"
}
}
]

View File

@@ -186,10 +186,10 @@
const dataLoaded = ref(false)
const pageReady = ref(false)
// ======= 首页数据缓存(冷启动秒开) =======
const HOME_CACHE_KEY = 'home_cache'
const getHomeCacheKey = () => 'home_cache_' + (uni.getStorageSync('userId') || '')
function loadHomeCache() {
try {
const raw = uni.getStorageSync(HOME_CACHE_KEY)
const raw = uni.getStorageSync(getHomeCacheKey())
if (!raw) return false
const c = JSON.parse(raw)
if (c.community && c.community !== '请绑定房屋') currentCommunity.value = c.community
@@ -208,7 +208,7 @@
}
function saveHomeCache() {
try {
uni.setStorageSync(HOME_CACHE_KEY, JSON.stringify({
uni.setStorageSync(getHomeCacheKey(), JSON.stringify({
community: currentCommunity.value,
villageId: currentVillageId.value,
bannerList: bannerList.value,
@@ -273,7 +273,7 @@
}
const getCurrentCommunityData = () => {
getCurrentVillage().then(res => {
return getCurrentVillage().then(res => {
if (res.code === 200 && res.data && res.data.villageId) {
currentCommunity.value = res.data.villageName || '未命名小区'
saveHomeCache()
@@ -329,7 +329,8 @@
console.error('重新加载用户信息失败', err)
})
}
getCurrentCommunityData()
// 先获取小区信息,确保 villageId 已更新,再请求依赖 villageId 的接口
await getCurrentCommunityData()
getNoticeData()
getNewActivityList()
getbannarData()
@@ -348,12 +349,13 @@
const resetPageData = () => {
currentCommunity.value = '请绑定房屋'
currentVillageId.value = ''
uni.removeStorageSync('currentVillageId')
activityList.value = []
bannerList.value = []
bannerRawData.value = []
noticeText.value = '暂无公告'
noticeId.value = ''
uni.removeStorageSync(HOME_CACHE_KEY)
uni.removeStorageSync(getHomeCacheKey())
}
onShow(() => {
@@ -395,15 +397,14 @@
})
const navigateToPage = () => {
const cachedVillageId = uni.getStorageSync('currentVillageId')
if (!cachedVillageId || cachedVillageId === '0' || cachedVillageId === 0) {
uni.navigateTo({ url: '/pageSubPack/my/myHouseIndex' })
} else {
const navigateToPage = () => {
const cachedVillageId = uni.getStorageSync('currentVillageId')
if (!cachedVillageId || cachedVillageId === '0' || cachedVillageId === 0) {
uni.navigateTo({ url: '/pageSubPack/my/myHouseIndex' })
} else {
uni.navigateTo({ url: `/pageSubPack/notice-list/selectHome?villageId=${cachedVillageId}` })
}
}
}
const serviceClick = (item) => {
if (!requireLogin()) return