mh/pages/me/record.vue

<template>
	<view class="coll">
		<view class="kxjl">
			<view class="kxjl-item flexs" v-for="(item, index) in recordList" :key="index">
				<view class="kxjl-bg"><image :src="item.image" mode="aspectFill"></image></view>
				<view class="kxjl-info">
					<view class="kxjl-name">{{ item.box_name }}</view>
					<view class="kxjl-money">{{ item.coin_amount }}金币</view>
					<view class="kxjl-time">时间：{{ item.time }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			page: 1, //分页
			pages: 0, //总页数
			recordList: [] //记录列表
		};
	},
	methods: {
		//获取开箱记录
		loadData() {
			this.$api.openRecord({ page: this.page, msg: '数据加载中' }).then(res => {
				uni.stopPullDownRefresh();
				if (res.code === 1) {
					(this.recordList = this.page == 1 ? res.data.data : [...this.recordList, ...res.data.data]), (this.pages = res.data.last_page);
				}
			});
		}
	},
	onLoad() {
		this.loadData();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.loadData();
	},
	onReachBottom() {
		if (this.page < this.pages) {
			this.page++;
			this.loadData();
		}
	}
};
</script>

<style lang="scss">
.kxjl {
	padding: 30rpx 30rpx 0 30rpx;
	.kxjl-item {
		padding: 30rpx;
		margin-bottom: 20rpx;
		background: #ffffff;
		border-radius: 20rpx;
		.kxjl-bg {
			image {
				width: 168rpx;
				height: 168rpx;
				border-radius: 10rpx;
			}
			margin-right: 20rpx;
		}
		.kxjl-name {
			font-size: 28rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.kxjl-money {
			color: #cf271b;
			font-size: 28rpx;
			margin: 15rpx 0;
		}
		.kxjl-time {
			color: #999999;
			font-size: 22rpx;
		}
	}
}
</style>