liveShop/pages/wallet/myWalletJ.vue

<template>
	<view class="content">
		<scroll-view class="list" scroll-y @scrolltolower="loadData">
			<!-- 空白页 -->
			<empty v-if="dataList.length === 0"></empty>
			<view class="item flex" v-for="(item,index) in dataList" :key="index">
				<view class="item-left">
					<view class="title">{{ item.title}}</view>
					<view class="time">{{ item.add_time }}</view>
					<view class="main">
						{{ item.mark }}元
					</view>
				</view>
				<view class="item-right">
					<view class="price">{{ item.number }}</view>
					<view class="dj">已解冻</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';	
import { getCommissionInfo} from '@/api/user.js';
export default {
	components: {
		empty,
		uniLoadMore,
	},
	data() {
		return {
			page: 1,
			limit: 10,
			loadingType: 'More',
			dataList: [],
		}
	},
	onShow() {
		this.loadData();
	},
	methods: {
		async loadData() {
			if (this.loadingType === 'loading') {
				return;
			}
			if (this.loadingType === 'noMore'){
				return;
			}
			this.loadingType = 'loading';
			getCommissionInfo({
				page: this.page,
				limit: this.limit
			},3)
			.then(({ data }) => {
				console.log('获取佣金明细',data);
				if (data.length > 0) {
				this.dataList = this.dataList.concat(data[0].list);
				console.log(this.dataList,"dataList");
				this.page++;
			}
			if (this.limit == data.length) {
				//判断是否还有数据， 有改为 more， 没有改为noMore
				this.loadingType = 'more';
				return;
			} else {
				//判断是否还有数据， 有改为 more， 没有改为noMore
				this.loadingType = 'noMore';
			}
			uni.hideLoading();
			this.$set(this.dataList, 'loaded', true);
			})
		}
	}
}
</script>

<style lang="scss">
page {
	height: 100%;
	background: #F8F6F6;
}
.list {
	width: 100%;
	margin-top: 20rpx;
	background: #FFFFFF;
	.item {
		padding: 38rpx 46rpx 27rpx 50rpx;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		.item-left {
			text-align: left;
			.title {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #666666;
			}
			.time {
				margin-top: 5rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #AEAEAE;
			}
			.main {
				margin-top: 5rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #AEAEAE;
			}
		}
		.item-right {
			text-align: right;
			.price {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FF0000;
			}
			.dj {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}
	}
}
</style>