174 lines
3.5 KiB
Vue
174 lines
3.5 KiB
Vue
<template>
|
||
<view class="water-electric-page">
|
||
<!-- 页面标题栏 -->
|
||
<customNavbar title="水电费明细" />
|
||
<!-- 空状态 -->
|
||
<view v-if="records.length === 0" class="empty">
|
||
<image src="/static/empty.png" mode="aspectFit" />
|
||
<text>暂明细记录</text>
|
||
</view>
|
||
|
||
<!-- 列表部分 -->
|
||
<view v-else class="record-list">
|
||
<view
|
||
class="record-item"
|
||
v-for="(item, index) in records"
|
||
: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.feeType }}（{{ item.period }}）</text>
|
||
<text class="record-time">支付时间：{{ item.payTime }}</text>
|
||
</view>
|
||
|
||
<!-- 右侧金额 + 箭头 -->
|
||
<view class="record-right">
|
||
<view class="amount">
|
||
￥{{ item.amount.toFixed(2) }}
|
||
<u-icon name="arrow-right" size="20" color="#ccc"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
records: [
|
||
{
|
||
id: 1,
|
||
feeType: '电费',
|
||
period: '2024.08.01 - 2024.08.31',
|
||
payTime: '2024-09-05 12:21',
|
||
amount: 120.5
|
||
},
|
||
{
|
||
id: 2,
|
||
feeType: '水费',
|
||
period: '2024.08.01 - 2024.08.31',
|
||
payTime: '',
|
||
amount: 45.8
|
||
},
|
||
{
|
||
id: 3,
|
||
feeType: '电费',
|
||
period: '2024.09.01 - 2024.09.30',
|
||
payTime: '2024-10-03 15:12',
|
||
amount: 133.2
|
||
}
|
||
]
|
||
};
|
||
},
|
||
methods: {
|
||
toDetail(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/bill/waterElectricDetail?id=${item.id}`
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.water-electric-page {
|
||
padding: 120rpx 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>
|