guangan-mp/pages/user/point.vue

<template>
	<view class="flex flex-column flex-1" style="height: 100vh;">
		<view class="flex logo">
			<view class="flex flex-1 flex-column center logo-title">
				<text class="text-center title title-huge">{{point}}</text>
				<text class="text-center title">当前积分</text>
			</view>
		</view>
		<scroll-view class="flex-1 list" :scroll-y="true" :refresher-enabled="true"
			:refresher-triggered="refresh" @refresherrefresh="refreshLog" @scrolltolower="getLog">
			<uni-list class="flex flex-column flex-1">
				<uni-list-item v-for="(item, index) in logList" :key="index">
					<template v-slot:body>
						<view class="flex flex-1 flex-column">
							<text style="font-size: 36rpx;">{{item.reason}}</text>
							<text style="font-size: 24rpx; color: gray;">{{item.create_at}}</text>
						</view>
					</template>
					<template v-slot:footer>
						<view class="flex align-center justify-center">
							<text>{{item.point>0?'+':''}}{{item.point}}</text>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
			<uni-load-more :status="more_status" @clickLoadMore="getLog"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
	import {
		TaAjax
	} from '@/common/ajax';
	import {
		friendlyDate
	} from '@/common/util';
	export default {
		computed: {
			more_status() {
				if (this.finish) {
					return 'no-more';
				} else if (this.loading) {
					return 'loading';
				} else {
					return 'more';
				}
			},
		},
		data() {
			return {
				point: 0,
				logList: [],
				loading: false,
				refresh: false,
				finish: false,
				curPage: 1,
			}
		},
		onLoad() {
			this.getPoint();
			this.getLog();
		},
		methods: {
			getPoint() {
				TaAjax.get('/points_mall/api.auth.UserPoint/myPoint').then((response) => {
					const data = response.data;
					this.point = data.point
				})
			},
			refreshLog() {
				this.refresh = true;
				this.curPage = 1;
				this.getPoint()
				this.getLog();
			},
			getLog() {
				if (this.refresh) {
					this.logList.length = 0
					this.finish = false;
				}
				if (this.finish) {
					return;
				}
				TaAjax.get('/points_mall/api.auth.UserPoint/myPointLog', {
					page: this.curPage
				}).then((response) => {
					const data = response.data;
					const data_list = data.data.map((item) => {
						item.create_at = friendlyDate(new Date(item.create_at.replace(/\-/g, '/'))
						.getTime())
						return item;
					})
					if (this.refresh) {
						this.logList.length = 0
					}
					this.logList = this.logList.concat(data_list)
					this.finish = data.page.total <= this.logList.length;
					this.curPage++;
				}).catch((e) => {
					console.warn(e)
					if (this.logList.length == 0) {
						this.finish = true;
					}
				}).finally(() => {
					this.refresh = false;
					this.loading = false;
				});
			},
		}
	}
</script>

<style lang="scss">
	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		background-color: $uni-color-primary;
		flex-direction: row;
		align-items: center;
	}

	.logo-title {
		height: 150upx;
		align-items: center;
		justify-content: space-around;
	}

	.title {
		color: white;
		font-size: 40rpx;
	}

	.title-huge {
		font-size: 72rpx;
		font-weight: bold;
	}
	
	.list {
		height: calc(100vh - 240rpx);
	}
</style>