修改生活缴费功能
This commit is contained in:
zhouyanli
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user