qianniaoMp/pagesT/NewPartner/balance_detail.vue

<template>
	<view :class="['qn-page-' + theme]">
		<view class="detail-ul">
			<view class="detail-li" v-for="(item, index) in listData" :key="index">
				<view class="ellipsis title">{{ item.title }}</view>
				<view class="time">{{ $u.timeFormat(item.time, 'yyyy-mm-dd hh:MM:ss') }}</view>
				<view class="money">
					<text>{{ item.type === 1 ? '+' : '' }}{{ item.type === -1 ? '-' : '' }}</text>
					<text>¥{{ item.money }}</text>
				</view>
			</view>
			<!-- 空白页 -->
			<Aempty text="暂无数据" src="https://onlineimg.qianniao.vip/list.png" v-if="listData.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,
			listData: []
		};
	},
	computed: {
		userId() {
			return this.$store.state.userStatus.id;
		}
	},
	onLoad() {
		this.getData();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.getData();
	},
	onReachBottom() {
		if (this.total / this.pageSize > this.page) {
			this.page += 1;
			this.getData();
		}
	},
	methods: {
		getData(){
			var that = this;
			let post={page: this.page,pageSize: this.pageSize}
			this.load_status = 'loading';
			this.$u.api.getCommissionBalanceDetail(post).then(res=>{
				uni.stopPullDownRefresh();
				if (that.page === 1) {
					that.listData = res.data.data;
				} else {
					that.listData = that.listData.concat(res.data.data);
				}
				that.total = res.data.total;
				that.load_status = that.$_utils.loadStatus(that.page, that.pageSize, that.total);
			}).catch(err=>{
				uni.stopPullDownRefresh();
				that.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>