chuangte_bike_newxcx/page_shanghu/mingxi.vue

<template>
	<view class="pages">
		<u-navbar title="收支明细" :border-bottom="false" :background="bgc" back-icon-color="#000" title-color='#000'
			title-size='32' height='50'></u-navbar>
		<view class="list-wrap">
			<view class="list-item" v-for="(item, index) in wateringList" :key="index" @click="btndetail(item.id)">
				<view class="item-top">
					<view class="type">
						<u-icon name="clock" size="32rpx" color="#666"></u-icon>
						<text>{{item.createTime}}</text>
					</view>
					<view class="amount" :class="{'income': item.amount > 0, 'expense': item.amount < 0}">
						{{item.amount > 0 ? '+' : ''}}{{item.amount}}元
					</view>
				</view>
				<view class="item-bottom">
					<view class="label">收支类型：</view>
					<view class="value" v-if="item.bstType == 'WITHDRAW'">提现</view>
					<view class="value" v-if="item.bstType == 'SMS'">短信</view>
					<view class="value" v-if="item.bstType == 'ORDER'">骑行订单</view>
					<view class="balance">余额：{{item.afterBalance}}元</view>
				</view>
			</view>
		</view>
		
		<!-- 无数据展示 -->
		<view class="empty-state" v-if="showflag">
			<image src="https://api.ccttiot.com/smartmeter/img/static/uZFUpcz0YZZ4f4RjvGg2" mode="aspectFit"></image>
			<text>暂无更多收支记录...</text>
		</view>
		
		<!-- 加载完成提示 -->
		<view class="no-more" v-if="jlflag">
			-没有更多记录了-
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				obj: {},
				pagenum: 1,
				wateringList: [],
				pagesize: 10,
				isLoading: false,
				noMoreData: false,
				total: 0,
				showflag: false,
				jlflag: false
			}
		},
		onLoad(option) {
			this.getList(option.userId)
		},
		onShareAppMessage: function() {
			return {
				title: '创想物联',
				path: '/pages/shouye/index'
			}
		},
		onShareTimeline: function() {
			return {
				title: '创想物联',
				query: '',
				path: '/pages/shouye/index'
			}
		},
		methods: {
			getList(userId) {
				this.$u.get(`/bst/balanceLog/list?pageNum=${this.pagenum}&pageSize=${this.pagesize}&orderByColumn=createTime&isAsc=desc&userId=${userId}`).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
				}
			},
			btndetail(id) {
				uni.navigateTo({
					url: '/page_user/order_detail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		background-color: #F7FAFE;
		min-height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.list-wrap {
		padding: 0 20rpx;
	}

	.list-item {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);

		.item-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16rpx;

			.type {
				display: flex;
				align-items: center;
				color: #666;
				font-size: 28rpx;

				.u-icon {
					margin-right: 8rpx;
				}
			}

			.amount {
				font-size: 32rpx;
				font-weight: 600;

				&.income {
					color: seagreen;
				}

				&.expense {
					color: #FF4444;
				}
			}
		}

		.item-bottom {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #666;

			.label {
				margin-right: 8rpx;
			}

			.value {
				flex: 1;
				color: #333;
			}

			.balance {
				color: #333;
			}
		}
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 170rpx;

		image {
			width: 200rpx;
			height: 200rpx;
		}

		text {
			margin-top: 30rpx;
			font-size: 28rpx;
			color: #808080;
		}
	}

	.no-more {
		text-align: center;
		font-size: 28rpx;
		color: #FF4444;
		margin-top: 30rpx;
	}
</style>