cyzh-SoundOfMusic-H5/pages/activityList/mine/pointsDetail.vue

<template>
	<view>
		<view class="bg-img flex justify-center align-center" style="background-image: url('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/5f263a5a6e7c4f2493e0325f28ab659a-bgimg.png');height: 310upx;">
			<view class="text-center" style="margin-top: 80upx;">
				<view style="font-size: 24upx;font-family: PingFang SC;font-weight: 400;color: #cfc8f9;">可用积分</view>
				<view style="font-size: 54upx;font-family: PingFang SC;font-weight: 800;color: #ffffff;">{{+usablePoints}}</view>
			</view>
		</view>
		<block v-for="(item, index) in pointsList" :key="index">
			<view class="flex justify-between align-center container">
				<view class="padding">
					<view class="type">{{item.note}}</view>
					<view class="time">{{item.createTime}}</view>
				</view>
				<view class="padding">
					<view class="points">{{item.pointsValue}} 积分</view>
				</view>
			</view>
		</block>
		<view style="height: 80rpx;" v-if="status">
			<u-divider bgColor="#f1f1f1;"  height="80">到底了</u-divider>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
				usablePoints: '',
				pointsList: [],
				current: 1,
				size: 30,
				status: false,
			}
		},
		onLoad(options) {
			this.userId = uni.getStorageSync("userId");
			this.getPointsDetail();
			this.getTotalPoints();
		},
		onReachBottom() {
			if (this.pointsList.length < this.current * this.size) {
				this.status = true;
			} else {
				this.current += 1;
				this.getPointsDetail();
			}
		},
		methods: {
			getTotalPoints() {
				this.$u.api.user.detail({id: this.userId}).then(res => {
					this.usablePoints = res.usablePoints;
				})
			},
			getPointsDetail() {
				this.$u.api.points.list({userId: this.userId, current: this.current, size: this.size}).then(res => {
					this.pointsList = [...this.pointsList,...res.records];
				})
			}
		}
	}
</script>

<style>
	.container {
		background-color: #FFFFFF;
		border-radius: 10upx;
		margin: 20upx;
	}
	.type {
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: bold;
		margin-bottom: 20upx;
		color: #111111;
	}
	.time {
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #9E9E9E;
	}
	.points {
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
	}
</style>