kaiguan-zfb/page_user/shouzhi.vue

<template>
	<view class="pages">
		<u-navbar title="收支明细" :border-bottom="false" :background="bgc" back-icon-color="#fff" title-color='#fff' title-size='36'
			height='50'></u-navbar>

		
		<view class="cards" v-for="(item,index) in wateringList" :key="index" @click="btndetail(item.id)" @scrolltolower="onReachBottom">
			<view class="card_left">
				<view class="top">{{item.reason}}</view>
				<view class="bot">
					{{item.createTime}} 
				</view>
			</view>
			<view class="card_right">
				<!-- <view class="top" v-if="item.type == 1">{{item.suitTime}}
				<text v-if="item.timeUnit == 1">日</text>  <text v-if="item.timeUnit == 2">时</text> <text v-if="item.timeUnit == 3">分钟</text> <text v-if="item.timeUnit == 4">秒</text></view> -->
				<view class="bot">
					￥{{item.amount}}
				</view>
				
			</view>
		</view>
		<view v-if="jlflag" class="" style="font-size: 28rpx;color: red;margin-top: 30rpx;width: 100%;text-align: center;">-没有更多记录了-</view>
		<view class="" v-if="showflag" style="width: 100%;height: 200rpx;margin: auto;margin-top: 170rpx;text-align: center;">
			<image style="width: 200rpx;height: 200rpx;"
				src="https://api.ccttiot.com/smartmeter/img/static/uZFUpcz0YZZ4f4RjvGg2" mode=""></image>
			<view class="" style="font-size: 28rpx;color: #808080;margin-top: 30rpx;">暂无更多收支记录...</view>
		</view>
		
	</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#8883f0",
				},
				obj:{},
				pagenum: 1,
				wateringList: [],
				pagesize: 10, // 一页多少数据
				isLoading: false, // 是否正在加载数据  
				noMoreData: false, // 是否没有更多数据  
				total: 0,
				showflag: false,
				jlflag:false
			}
		},
		onLoad() {
			this.getList()
		},
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '创想物联',  
		      path: '/pages/shouye/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '创想物联',  
		      query: '',  
		      path: '/pages/shouye/index'  
		    }  
		  },
		methods: {
			// 请求收支列表
			getList(){
				this.$u.get(`/app/recordBalance/list?pageNum=${this.pagenum}&pageSize=${this.pagesize}`).then((res) => {
					if (res.code == 200) {
					   this.total = res.total
					   if (this.total > 0) {
					   	this.showflag = false
					   } else {
					   	this.showflag = true
					   }
					   if (res.rows.length > 0) {
					   	// 有数据，追加到列表  
					   	 this.wateringList =  this.wateringList.concat(res.rows)
					   	this.pagenum++
					   } else {
					   	// 没有更多数据  
					   	this.noMoreData = true
					   }
					   this.isLoading = false
					}
				});
			},
			onReachBottom() {
				let sum = this.total / this.pagesize
				if (this.pagenum-1 < sum) {
					this.getList() // 上拉加载更多  
				} else {
					this.jlflag = true
					// uni.showToast({
					// 	title: '没有更多收支明细记录了',
					// 	icon: 'none',
					// 	duration: 1000
					// });
				}
			},
			// 点击查询收支详情
			btndetail(id){
				uni.navigateTo({
					url:'/page_user/order_detail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-title{
		padding-bottom: 22rpx;
	}
	/deep/ .u-icon__icon{
		padding-bottom: 22rpx;
	}
	page {
		background-color: #F7FAFE;
	}

	.pages {
		width: 750rpx;
        padding-bottom: 200rpx;
		.tops {
			margin-top: 20rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;

			.tit {
				margin-left: 36rpx;
				font-size: 48rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				color: #262B37;
			}

			.more {
				margin-right: 36rpx;
				font-size: 28rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				color: #8883F0;
			}
		}

		.cards {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			width: 672rpx;
			height: 154rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
			margin: 18rpx auto;
			border-radius: 30rpx;
			.card_left {
				margin-left: 50rpx;

				.top {
					font-size: 26rpx;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					color: #262B37;
				}

				.bot {
					margin-top: 12rpx;
					font-size: 26rpx;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					color: #808080;
				}
			}

			.card_right {
				margin-right: 24rpx;
				text-align: right;

				.top {
					margin-top: 12rpx;
					font-size: 28rpx;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					color: #8883F0
				}

				.bot {
					margin-top: 12rpx;
					font-size: 26rpx;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					color: #808080;
				}
			}
		}
		.btn{
			margin-left: 116rpx;
			margin-top: 124rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 520rpx;
			height: 104rpx;
			background: #8883F0;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
			border-radius: 52rpx 52rpx 52rpx 52rpx;
			
			font-size: 32rpx;
			font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	
	}
</style>