FE-lab-xcx/pages_basics/views/pointsDetails/pointsDetails.vue

<!-- 积分明细 -->
<template>
	<view class="pointsDetails">
		<view class="top-text-box">
			<view class="img-box">
				<img class="img-view" :src="imagesUrl('commonality/icon_wd_jlf@1x.png')">
				<view class="img-text">{{maxNum}}</view>
			</view>
			<view class="text-box">积分可以在兑换机扫码兑换丰富礼品</view>
		</view>
		<view class="top-button-box">
			<view :class="checkIndex == 4?'check-button':''" @click="checkButton(4)">全部收支</view>
			<view :class="checkIndex == 1?'check-button':''" @click="checkButton(1)">已获取</view>
			<view :class="checkIndex == 2?'check-button':''" @click="checkButton(2)">已消耗</view>
		</view>
		<scroll-view scroll-y @scrolltolower="scrollGet" class="for-max-box">
			<view class="for-big-box" v-for="(item,index) in dataList" :key="index">
				<img class="left-img" :src="imagesUrl('commonality/icon_wd_jlf@1x.png')"/>
				<!-- <view class="center-box" v-if="item.data1 == 1">
					<view>{{item.changeInfo}}</view>
					<view>{{item.data3}}</view>
				</view> -->
				<view class="center-box-1">
					<view>{{item.changeInfo}}</view>
				</view>
				<view class="right-box">
					<view :class="item.scoreChange>0?'up-color':''">{{item.scoreChange>0?'+'+item.scoreChange:item.scoreChange}}</view>
					<view>{{item.createTime}}</view>
				</view>
			</view>
			<view class="get-data-null-p" v-if="getDataType">- 没有更多数据 -</view>
			<view class="get-data-null-p" v-if="!getDataType && textShowType">- 上划加载更多 -</view>
		</scroll-view>
	</view>
</template>

<script>
	import { creditMainGetUserReward } from '@/pages_basics/api/index.js'
	export default {
		data() {
			return {
				total: 0,
				dataList: [
					{
						data1:'1',
						data2:'礼品兑换消耗积分',
						data3:'(矿泉水)',
						data4:'-10',
						data5:'2026-03-06 15:29',
					},
					{
						data1:'2',
						data2:'完成课程学习获取积分',
						data3:'',
						data4:'+10',
						data5:'2026-03-06 15:29',
					},
				],
				getDataType: false,
				// 查询参数
				checkIndex:4,
				queryParams: {
					page: 1,
					pageSize: 10,
				},
				maxNum:0,
				textShowType:false,
			}
		},
		onLoad(option){
			console.log('option',option)
			this.$set(this,'maxNum',option.q?option.q:0);
			this.getList()
		},
		onShow(){

		},
		methods:{
			checkButton(type){
				if(this.checkIndex!=type){
					this.$set(this,'checkIndex',type);
					this.$set(this,'total',0);
					this.$set(this,'dataList',[]);
					this.$set(this,'getDataType',false);
					this.$set(this.queryParams,'page',1);
					this.getList();
				}
			},
			//滚动加载事件
			scrollGet() {
				let self = this;
				if (self.total / self.queryParams.pageSize <= self.queryParams.page) {
					this.$set(this, 'getDataType', true);
				} else {
					this.queryParams.page += 1;
					this.$nextTick(() => {
						this.getList();
					})
				}
			},
			//获取实验室列表
			async getList() {
				let self = this;
				let obj = JSON.parse(JSON.stringify(this.queryParams));
				if(this.checkIndex == 4){
					obj.bonusType = '';
				}else{
					obj.bonusType = this.checkIndex
				}
				const {
					data
				} = await creditMainGetUserReward(obj);
				if (data.code == 200) {
					if(self.queryParams.page == 1){
						this.dataList = data.data.records;
						this.total = data.data.total;
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					}else{
						this.dataList = [...this.dataList, ...data.data.records]
						this.total = data.data.total;
						if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
							this.$set(this, 'getDataType', true);
						}
					}
					this.$set(this,'textShowType',true);
				}
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.pointsDetails{
		height:100%;
		width:100%
		overflow: hidden;
		display: flex;
		flex-direction: column;
		.top-text-box{
			background-color: #fff;
			height:230rpx;
			.img-box{
				display: flex;
				margin: 40rpx 0 0 300rpx;
				.img-view{
					width:60rpx;
					height:56rpx;
				}
				.img-text{
					line-height:56rpx;
					height:56rpx;
					flex:1;
					font-size:46rpx;
					margin-left:20rpx;
				}
			}
			.text-box{
				background-color: #FDECD5;
				color:#333;
				text-align: center;
				font-size:28rpx;
				width:540rpx;
				height:60rpx;
				line-height:60rpx;
				border-radius:30rpx;
				margin: 30rpx auto 0
			}
		}
		.top-button-box{
			height:100rpx;
			display: flex;
			view{
				width: 180rpx;
				background-color: #D7D7D7;
				color:#333;
				text-align: center;
				height:60rpx;
				line-height:60rpx;
				margin:20rpx 0 0 20rpx;
				border-radius:10rpx;
			}
			.check-button{
				background-color:#06D0D0;
				color:#fff;
			}
		}
		
		.for-max-box {
			flex: 1;
			overflow-y scroll;
			.null-img {
				display block;
				width: 276rpx;
				height: 321rpx;
				position absolute;
				top: 200rpx;
				left: 274rpx;
			}
			.for-big-box:nth-child(1) {
				border-top: none;
			}
			.for-big-box{
				background: #fff;
				border-top:1rpx solid #dedede;
				display: flex;
				.left-img{
					width:30rpx;
					height:28rpx;
					margin:61rpx 30rpx 61rpx 40rpx;
				}
				.center-box{
					flex:1;
					padding: 40rpx 0;
					view{
						height:35rpx;
						line-height:35rpx;
						font-size:28rpx;
						font-weight:700;
					}
					view:nth-child(1){
						
					}
					view:nth-child(2){
						color:#A1988D;
					}
				}
				.center-box-1{
					flex:1;
					padding: 40rpx 0;
					view{
						height:70rpx;
						line-height:70rpx;
						font-size:28rpx;
						font-weight:700;
					}
				}
				.right-box{
					// width:250rpx;
					width:288rpx;
					view:nth-child(1){
						padding-right:30rpx;
						text-align: right;
						color:#666;
						line-height:60rpx;
						height:60rpx;
						margin-top:20rpx;
						font-weight:700;
					}
					view:nth-child(2){
						font-size:26rpx;
						color:#A1988D;
						line-height:60rpx;
						height:60rpx;
					}
					.up-color{
						color: #d9001d !important;;
					}
				}
			}
		}
		.get-data-null-p{
			text-align: center;
			height:80rpx;
			line-height:80rpx;
			color:#999;
		}
	}
</style>