FE-lab-xcx/pages_safetyEducationExamination/views/exam/scoresList.vue

<template>
	<view class="scoreList">
		<scroll-view scroll-y class="scroll-content" @scrolltolower="onScrollToLower">
			<view
				v-for="(item, index) in scoreList"
				:key="index"
				class="score-card"
				@click="goToScoreDetail(item)">
				<view class="left-box">
					<view>考试时间：{{item.startTime}}</view>
					<view>得分：{{item.totalScore}}</view>
					<view>及格分：{{item.passScore}}</view>
				</view>
				<view class="right-box" :class="item.passStatus ==0?'colorA':'colorB'">{{item.passStatus ==0?'未通过':'通过'}}</view>
			</view>
			<view v-if="!scoreList[0] && !scoreLoading" class="empty-tip">暂无考试记录</view>
			<view v-if="scoreLoading" class="loading-tip">加载中...</view>
			<view v-if="scoreNoMore && scoreList[0]" class="loading-tip">没有更多了</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/component/public.js'
	import {
		examElUserExamAttemptAttemptRecord,
	} from '@/pages_safetyEducationExamination/api/index.js'
	export default {
		data() {
			return {
				scoreList: [],
				scoreLoading: false,
				scorePage: 1,
				scorePageSize: 10,
				scoreTotal: 0,
				scoreNoMore: false,
				examId:'',
			}
		},
		created() {
			
		},
		onLoad(options){
			this.$set(this,'examId',options.examId);
		},
		onShow() {
			this.loadScoreList();
		},
		methods: {
			goToScoreDetail(item){
				// 跳转答题详情，传递 attemptId / examId
				uni.navigateTo({
					url: `/pages_safetyEducationExamination/views/exam/scoreDetail?attemptId=${item.attemptId || ''}&examId=${item.examId || ''}`
				});
			},
			// 滚动到底部加载更多
			onScrollToLower() {
				this.loadScoreList();
			},
			// 考试列表（支持分页）
			async loadScoreList() {
				if (this.scoreLoading || this.scoreNoMore) return;
				this.scoreLoading = true;
				try {
					const obj = {
						page: this.scorePage,
						pageSize: this.scorePageSize,
						examId: this.examId,
					};
					const { data } = await examElUserExamAttemptAttemptRecord(obj);
					if (data.code === 200) {
						for(let i=0;i<data.data.records.length;i++){
							data.data.records[i].startTime = parseTime(data.data.records[i].startTime, "{y}-{m}-{d}")
						}
						const records = data.data.records || [];
						const newList = this.scorePage === 1 ? records : [...this.scoreList, ...records];
						this.$set(this, 'scoreList', newList);
						this.scoreTotal = data.data.total;
						if (newList.length >= this.scoreTotal) {
							this.scoreNoMore = true;
						} else {
							this.scorePage++;
						}
					}
				} catch (e) {
					console.error('获取成绩列表失败', e);
				} finally {
					this.scoreLoading = false;
				}
			},
		}
	}
</script>

<style lang="stylus" scoped>
	.scoreList{
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background-color: #f0f4fb;
		.scroll-content{
			height:100%;
		}
		.score-card{
			margin:28rpx 28rpx 0;
			background-color: #fff;
			border-radius:10rpx;
			padding:20rpx;
			box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
			border: 1rpx solid #dde3ed;
			display: flex;
			font-size:28rpx;
			.left-box{
				flex:1;
			}
			.right-box{
				line-height:110rpx;
				margin-right:20rpx;
			}
			.colorA{
				color:#f5222d;
			}
			.colorB{
				color:#52c41a;
			}
		}
		.empty-tip{
			text-align: center;
			line-height: 100rpx;
			color: #aaa;
			font-size: 24rpx;
		}
		
		.loading-tip{
			text-align: center;
			line-height: 100rpx;
			color: #aaa;
			font-size: 22rpx;
		}
	}
</style>