RentWeAppFront/pages-biz/wae/waeRecords.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>