sct/pagesT/money/BalanceDetail.vue

<template>
	<view :class="['qn-page-' + theme]">
		<view class="detail-ul">
			<view class="detail-li" v-for="(item, index) in detail_list" :key="index">
				<view class="ellipsis title">{{ item.purpose }}</view>
				<view class="time">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
				<view class="money">
					<text>{{ item.type === 4 ? '-' : '+' }}</text>
					<text>¥{{ item.money }}</text>
				</view>
			</view>
			<!-- 空白页 -->
			<Aempty text="暂无数据" src="https://onlineimg.qianniao.vip/list.png" v-if="detail_list.length === 0"></Aempty>
			<u-loadmore v-else :status="load_status" />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			load_status: 'nomore',
			page: 1,
			pageSize: 10,
			total: 0,
			detail_list: []
		};
	},
	computed: {
		userId() {
			return this.$store.state.userStatus.id;
		}
	},
	onLoad() {
		this.getAllMemberBalanceDetail();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.getAllMemberBalanceDetail();
	},
	onReachBottom() {
		if (this.total / this.pageSize > this.page) {
			this.page += 1;
			this.getAllMemberBalanceDetail();
		}
	},
	methods: {
		getAllMemberBalanceDetail() {
			this.load_status = 'loading';
			this.$u.api
				.getAllMemberBalanceDetail({
					page: this.page,
					pageSize: this.pageSize,
					customerId: this.userId
				})
				.then(res => {
					uni.stopPullDownRefresh();
					if (this.page === 1) {
						this.detail_list = res.data;
					} else {
						this.detail_list = this.detail_list.concat(res.data);
					}
					this.total = res.pageTotal;
					this.load_status = this.$_utils.loadStatus(this.page, this.pageSize, this.total);
				})
				.catch(res => {
					uni.stopPullDownRefresh();
					this.load_status = 'nomore';
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.detail-ul {
	.detail-li {
		width: 710rpx;
		margin: 20rpx auto;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		position: relative;
		.title {
			font-weight: bold;
			padding-bottom: 12rpx;
			-webkit-line-clamp: 2;
		}
		.time {
			font-size: 24rpx;
			color: #6c6c6c;
		}
		.money {
			font-weight: bold;
			font-family: DIN-Medium;
			position: absolute;
			right: 24rpx;
			top: 50%;
			transform: translateY(-50%);
			color: $price-color;
		}
	}
}
</style>