dxh/pages/user/integral.vue

<template>
	<view class="content">
		<empty v-if="list.length === 0"></empty>
		<view class="integral-box" v-for="(item, ind) in list" :key="ind">
			<view class="integral-left">
				<view class="integral-title">{{ item.mark }}</view>
				<view class="integral-time">{{ item.add_time }}</view>
			</view>
			<view class="integral-number">
				<text>{{ (item.pm == 0 ? '-' : '+') + item.number }}</text>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
import { integrallist } from '@/api/user.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
export default {
	components: {
		uniLoadMore,
		empty
	},
	data() {
		return {
			list: [
				{
					id:0,mark:'ffdffa',add_time:'2021-01-27',number:9
				}
			],
			page: 1,
			limit: 10,
			loadingType: 'more',
		}
	},
	onLoad() {
		this.loadData();
	},
	onReachBottom() {
		this.loadData();
	},
	methods: {
		loadData() {
			let obj = this;
			if (obj.loadingType === 'noMore') {
				//防止重复加载
				return;
			}
			// 修改当前对象状态为加载中
			obj.loadingType = 'loading';
			integrallist({
				page: obj.page,
				limit: obj.limit
			}).then(({data}) => {
				obj.list = obj.list.concat(data);
				obj.page++;
				if (obj.limit == data.length) {
					//判断是否还有数据， 有改为 more， 没有改为noMore
					obj.loadingType = 'more';
					return;
				} else {
					//判断是否还有数据， 有改为 more， 没有改为noMore
					obj.loadingType = 'noMore';
				}
			})
		}
	}
}
</script>

<style lang="scss">
.content {
	padding-top: 20rpx;
	.integral-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #EEEEEE;
		background: #FFFFFF;
		.integral-left {
			.integral-title {
				font-size: $font-base;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.integral-time {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
		.integral-number {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FF0000;
		}
	}
}
</style>