FE_occupationlab_miniProgram/pages/achievement/achievement.vue

<template>
	<view class="page">
		<view class="wrap">
			<view class="p-title">
				<image class="icon" src="https://eduvessel.com/images/occupationlab/stat.svg" mode="widthFix"></image> 成绩概览
			</view>
			<view class="stat">
				<view class="item">
					<view class="val">{{ overview.userName }}</view>
					<view class="name">姓名</view>
				</view>

				<view class="item">
					<view class="val">{{ overview.experimentalNum }}</view>
					<view class="name">实验次数(次)</view>
				</view>

				<view class="item">
					<view class="val">{{ overview.duration ? overview.duration : 0 }}小时</view>
					<view class="name">实验总时长(时)</view>
				</view>

				<view class="item">
					<view class="val">{{ overview.avgScore ? overview.avgScore.toFixed(2) : overview.avgScore }}</view>
					<view class="name">实验平均分</view>
				</view>
			</view>
		</view>
		
		
		<view class="wrap">
			<view class="p-title">
				<image class="icon" src="https://eduvessel.com/images/occupationlab/detail.svg" mode="widthFix"></image> 成绩记录明细
			</view>
			
			<view class="tab-wrap">
				<ul class="tabs">
					<li v-for="(item, i) in tabs" :key="i" :class="{active: curTab === item.id}" @click="tabChange(item.id)">{{ item.name }}</li>
				</ul>
				<uni-data-picker class="picker-input" preload :clear-icon="false" :localdata="courses" v-model="mallId" @change="initList"></uni-data-picker>
				<!-- <uni-data-select class="select" v-model="mallId" :localdata="courses" @change="initList"></uni-data-select> -->
			</view>
			
			<!-- 练习成绩 -->
			<template v-if="!curTab">
				<view v-if="list.length" class="list">
					<view v-for="(item, i) in list" :key="i" class="item" @click="toPrac(item)">
						<view class="c-name">{{ item.projectName }}</view>
						<view class="line">最高分：{{ item.hightScore }}&emsp;&emsp;练习次数：{{ item.practiceNum }}</view>
						<view class="line">累计练习时长（小时）：{{ item.hightScore }}</view>
						<view class="line">最近练习时间：{{ item.lastTime }}</view>
						<view class="btn">练习情况</view>
					</view>
				</view>
				<empty v-else />
			</template>
			
			<!-- 考核成绩 -->
			<template v-else>
				<view v-if="list.length" class="list">
					<view v-for="(item, i) in list" :key="i" class="item" @click="toDetail(item)">
						<view class="c-name">{{ item.experimentalName }}</view>
						<view class="line">得分：{{ item.score }}&emsp;&emsp;耗时：{{ item.timeSum }}min</view>
						<view class="line">考核开始时间：{{ item.startTime }}</view>
						<view class="line">考核结束时间：{{ item.submitTime }}</view>
						<view class="btn">成绩报告</view>
					</view>
				</view>
				<empty v-else />
			</template>
		</view>
		
		<realName />
	</view>
</template>

<script>
	import { experimentOverview, getSchoolEffectiveCourse, queryPracticeByStudent, queryAssessmentByStudent } from '@/apis/modules/course.js'
	export default {
		data() {
			return {
				overview: {},
				curTab: 0,
				tabs: [
					{
					    id: 0,
					    name: '练习'
					},
					{
					    id: 1,
					    name: '考核'
					},
				],
				courses: [],
				mallId: '',
				list: [],
				reachBottom: 0, // 是否是上拉加载。0->否,1->是,-1->加载完所有数据
				status: 'more', // 上拉加载状态 more|loading|noMore
				page: 1,
				pageSize: 10,
			}
		},
		onShow() {
			this.getOverview()
			this.getCourse()
		},
		methods: {
			// 获取概览
			async getOverview () {
			    const res = await experimentOverview()
				this.overview = res.data
			},
			// 获取课程
			async getCourse () {
			    const { data } = await getSchoolEffectiveCourse()
			    if (data.length) {
					data.forEach(e => {
						e.value = e.mallId
						e.text = e.curriculumName
					})
					this.courses = data
					this.mallId = data[0].mallId
					this.initList()
			    }
			},
			// 成绩列表
			async getList () {
				let res
				const { mallId } = this
				if (mallId) {
					const { cid } = this.courses.find(e => e.mallId == mallId)
					if (this.curTab) {
						// 考核
						res = await queryAssessmentByStudent({
							pageNum: this.page,
							pageSize: this.pageSize,
							mallId: this.mallId,
							curriculumId: cid
						})
					} else {
						// 练习
						res = await queryPracticeByStudent({
							pageNum: this.page,
							pageSize: this.pageSize,
							mallId: this.mallId,
							curriculumId: cid
						})
					}
					const { page } = res
					this.list = this.reachBottom > 0 ? [...this.list, ...page.records] : page.records
					this.page++ // 每次获取了数据后page+1
					const noMore = this.list.length === page.total // 是否加载完所有数据
					this.status = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore
					this.reachBottom = noMore ? -1 : 0 // 加载完了则设置为-1
				}
			},
			initList() {
				this.page = 1
				this.reachBottom = 0
				this.getList()
			},
			// tab切换
			tabChange(id) {
				this.curTab = id
				this.list = []
				this.initList()
			},
			// 练习跳转
			toPrac(row) {
				this.$util.to(`/course/practiceDetail/practiceDetail?cid=${row.curriculumId}&projectId=${row.projectId || ''}&paperId=${row.paperId || ''}`)
			},
		}
	}
</script>

<style scoped lang="scss">
.page {
	.wrap {
		padding: 30rpx;
		margin-bottom: 30rpx;
		background-color: #fff;
	}
	.tab-wrap {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		/deep/.select {
			width: 60%;
			.uni-select {
				border: 0;
			}
		}
	}
	.tabs {
		display: flex;
		li {
			position: relative;
			margin-right: 40rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333;
		}
		.active {
			color: #007EFF;
			&:after {
				content: '';
				position: absolute;
				bottom: -12rpx;
				left: 50%;
				width: 116%;
				height: 4rpx;
				margin: 10rpx auto 0;
				background-color: #007EFF;
				transform: translateX(-50%);
			}
		}
	}
	
	.stat {
	    display: flex;
	    flex-wrap: wrap;
		gap: 32rpx;
	
	    .item:nth-child(1) {
	      background: url(https://eduvessel.com/images/occupationlab/record1.png) (88% 25px) / auto no-repeat,
	        url(https://eduvessel.com/images/occupationlab/record1.png) 0 0/100% 100% no-repeat;
	    }
	
	    .item:nth-child(2) {
	      background: url(https://eduvessel.com/images/occupationlab/record2-1.png) (88% 15px) / auto no-repeat,
	        url(https://eduvessel.com/images/occupationlab/record2.png) 0 0/100% 100% no-repeat;
	    }
	
	    .item:nth-child(3) {
	      background: url(https://eduvessel.com/images/occupationlab/record3-1.png) (88% 20px) / auto no-repeat,
	        url(https://eduvessel.com/images/occupationlab/record3.png) 0 0/100% 100% no-repeat;
	    }
	
	    .item:nth-child(4) {
	      margin-right: 0;
	      background: url(https://eduvessel.com/images/occupationlab/record4-1.png) (88% 18px) / auto no-repeat,
	        url(https://eduvessel.com/images/occupationlab/record4.png) 0 0/100% 100% no-repeat;
	    }
	
	    .item {
	        width: calc(50% - 16rpx);
	        padding: 30rpx;
			border-radius: 8rpx;
		    box-sizing: border-box;
	
	      .name {
	        margin-top: 8rpx;
	        color: #fff;
	        font-size: 28rpx;
	      }
	
	      .val {
	        font-size: 42rpx;
	        color: #fff;
	      }
	    }
	}
	.list {
		.item {
			position: relative;
			padding: 20rpx 0;
			&:not(:last-child) {
				border-bottom: 1px solid #e6e6e6;
			}
		}
		.c-name {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
		.line {
			margin-top: 14rpx;
			font-size: 26rpx;
			color: #828282;
		}
		.btn {
			position: absolute;
			bottom: 20rpx;
			right: 0;
			padding: 10rpx 30rpx;
			font-size: 28rpx;
			color: #fff;
			background-color: #007EFF;
			border-radius: 36rpx;
		}
	}
}
</style>