mirror of
http://36.133.248.69:3088/admin/RentWeAppFront.git
synced 2026-03-07 17:32:25 +08:00
196 lines
4.0 KiB
Vue
196 lines
4.0 KiB
Vue
<template>
|
||
<view class="water-electric-page">
|
||
<!-- 页面标题栏 -->
|
||
<customNavbar title="水电费明细" />
|
||
<!-- 空状态 -->
|
||
|
||
|
||
<!-- 列表部分 -->
|
||
<!-- 收支记录列表 -->
|
||
<scroll-view scroll-y class="scroll-content" @scrolltolower="loadMore">
|
||
<view v-if="flowList.length > 0" class="record-list">
|
||
<view
|
||
class="record-item"
|
||
v-for="(item, index) in flowList"
|
||
:key="index"
|
||
@click="toDetail(item)"
|
||
>
|
||
<!-- <view class="record-icon">
|
||
<image src="/static/icon/水费.png" class="icon-1" v-if="item.feeType=='水费'"></image>
|
||
<image src="/static/icon/电费.png" class="icon-2" v-else></image>
|
||
</view> -->
|
||
<!-- 左侧信息 -->
|
||
<view class="record-left">
|
||
<text class="record-title">{{ item.itemName }}</text>
|
||
<text class="record-time">支付时间：{{ item.payDate }}</text>
|
||
</view>
|
||
<!-- 右侧金额 + 箭头 -->
|
||
<view class="record-right">
|
||
<view class="amount">
|
||
￥{{ item.itemAmount.toFixed(2) }}
|
||
<u-icon name="arrow-right" size="20" color="#ccc"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="records.length === 0" class="empty">
|
||
<image src="/static/empty.png" mode="aspectFit" />
|
||
<text>暂明细记录</text>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
pageNo: 1,
|
||
pageSize:10,
|
||
flowList: [],
|
||
loadStatus: 'loadmore'
|
||
};
|
||
},
|
||
onShow() {
|
||
this.$checkToken(this.$getToken())
|
||
},
|
||
onLoad() {
|
||
this.fetchDataList();
|
||
},
|
||
methods: {
|
||
fetchDataList(){
|
||
if (this.loadStatus !== 'loadmore') return;
|
||
this.loadStatus = 'loading';
|
||
let url = '/bill/pageQueryPayRecord'
|
||
this.$u.post(url, {
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize,
|
||
recordType:'wae'
|
||
},{
|
||
WT: this.$getToken()
|
||
}).then(res => {
|
||
const rows = res.data.result || [];
|
||
console.log(rows)
|
||
if (this.pageNo === 1) this.flowList = [];
|
||
this.flowList = this.flowList.concat(rows);
|
||
if (rows.length < this.pageSize) {
|
||
this.loadStatus = 'nomore';
|
||
} else {
|
||
this.pageNo++;
|
||
this.loadStatus = 'loadmore';
|
||
}
|
||
}).catch(err => {
|
||
console.log("获取水电费账单缴费记录失败：", err)
|
||
this.loadStatus = 'loadmore';
|
||
})
|
||
},
|
||
loadMore() {
|
||
// 只有在 loadStatus 为 'loadmore' 时才触发
|
||
if (this.loadStatus !== 'loadmore') return;
|
||
// 调用接口获取下一页
|
||
this.fetchDataList();
|
||
},
|
||
toDetail(item) {
|
||
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.water-electric-page {
|
||
padding: 175rpx 20rpx 20rpx 20rpx;
|
||
|
||
.header {
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
text-align: center;
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.record-list {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.record-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 20rpx;
|
||
padding: 24rpx 30rpx;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||
|
||
.record-icon{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.icon-1{
|
||
width: 33rpx;
|
||
height: 47rpx;
|
||
}
|
||
|
||
.icon-2{
|
||
width: 35rpx;
|
||
height: 57rpx;
|
||
}
|
||
}
|
||
|
||
.record-left {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10rpx;
|
||
|
||
.record-title {
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
color: #2D2B2C;
|
||
}
|
||
|
||
.record-time {
|
||
font-size: 24rpx;
|
||
color: #86868C;
|
||
}
|
||
}
|
||
|
||
.record-right {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
font-weight: 400;
|
||
color: #222222;
|
||
|
||
.amount {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty {
|
||
margin-top: 200rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: #aaa;
|
||
font-size: 28rpx;
|
||
|
||
image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|