xc-app/pages/mine/point.vue

<template>
	<view class="order-page">
		<HeaderCom></HeaderCom>
		<view style="padding-top: 300rpx;" v-if="list.length === 0">
			<empty></empty>
		</view>
		<scroll-view class="scroll-list-view" scroll-y="true" scroll-with-animation @scrolltolower="scrolltolower" v-if="list.length > 0">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="shop">
					<image src="@/static/new/mine/record-box.png" mode="aspectFit" class="shop-icon"></image>
				</view>
				<view class="detail">
					<view class="header">
						<view class="name">{{typeObj[item.type]}}</view>
						<view class="point">
							<image src="@/static/an/point.gif" class="point-icon" mode="aspectFit"></image>{{item.points}}
						</view>
					</view>
					<view class="label">订单号：{{item.orderNo}}</view>
					<!-- <view class="label">使用类型：{{typeObj[item.type]}}</view> -->
					<view class="label">使用时间：{{formatDateTime(item.createdAt)}}</view>
				</view>
			</view>
			<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
		</scroll-view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/mine/point"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import { userPoint } from '@/API/user.js'
	import HeaderCom from '@/pages/components/header.vue'

	export default{
	mixins: [myMixins],
		data(){
			return{
				list:[],
				type:'',
				page:1,
				typeObj:{
					'BOX_RECOVERY':'盲盒回收',
					'MALL_PURCHASE':'商城购买',
					'MALL_ORDER_CANCEL':'商城订单取消',
					'GIFT':'系统赠送',
					'COUPON_PURCHASE':'优惠券购买',
					'PROMPT_PURCHASE':'提示卡购买',
					'SIGN_IN':'签到赠送',
					'TASK':'任务赠送',
					'TOP':'排行榜赠送',
					'ACTIVITY_TASK_CLEAR':'活动任务积分消除',
					ACTIVITY_TASK_REWARD:'活动任务奖励',
					ACTIVITY_TASK_AWARD:'任务赠送'
				},
				total:0
			}
		},
		components:{HeaderCom},
		onLoad(opation){
			this.getUserPoint()
		},
		methods:{
			formatDateTime(value) {
			      if (!value) return '';
			      const date = new Date(value);
			      const year = date.getFullYear();
			      const month = String(date.getMonth() + 1).padStart(2, '0');
			      const day = String(date.getDate()).padStart(2, '0');
			      const hours = String(date.getHours()).padStart(2, '0');
			      const minutes = String(date.getMinutes()).padStart(2, '0');
			      const seconds = String(date.getSeconds()).padStart(2, '0');
			      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			    },
			getUserPoint(){
				uni.showLoading()
				userPoint({page:this.page,size:10}).then(res => {
					uni.hideLoading()
					this.total = res.data.total
					if(this.page > 1){
						this.list = [...this.list,...res.data.content]
					}else{
						this.list = res.data.content
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			scrolltolower(){
				if(this.total == this.list.length){
					return
				}
				this.page += 1
				this.getUserPoint()
			},
		}
	}
</script>
<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.order-page{
		padding: 112rpx 32rpx 32rpx 32rpx;
		.scroll-list-view{
			height: calc(100vh - 176rpx);
			.list{
				display: flex;
				align-items: center;
				background-color: #fff;
				padding: 16rpx 16rpx 24rpx 16rpx;
				border-radius: 24rpx;
				margin-bottom: 24rpx;
				.shop{
					width: 160rpx;
					height: 160rpx;
					background-image: url('@/static/new/mine/record.png');
					background-repeat: no-repeat;
					background-size: 100%;
					padding-top: 28rpx;
					display: flex;
					justify-content: center;
					.shop-icon{
						width: 142rpx;
						height: 132rpx;
					}
				}
				.detail{
					margin-left: 32rpx;
					.header{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.name{
							width: 304rpx;
							font-weight: 500;
							font-size: 28rpx;
							color: #000000;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.point{
							display: flex;
							align-items: center;
							font-weight: 500;
							font-size: 32rpx;
							color: #000000;
							.point-icon{
								margin-right: 8rpx;
								width: 48rpx;
								height: 48rpx;
							}
						}
					}
					.label{
						margin-top: 8rpx;
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}
	}
</style>