FE-lab-xcx/pages_safetyEducationExamination/views/home/index.vue

<!-- 教育考试首页 -->
<template>
	<view class="safetyEducationExamination-home">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="for-max-box">
			<!-- 用户信息 -->
			<user-info-card></user-info-card>
			<!-- 学年数据统计 -->
			<academic-year-stats></academic-year-stats>
			<!-- 实验室绑定 -->
			<lab-binding></lab-binding>
			<!-- 考试任务 -->
			<exam-task></exam-task>
			<!-- 特殊考试 -->
			<special-exam></special-exam>
			<!-- 模拟练习 -->
			<mock-practice></mock-practice>
			<!-- 培训任务 -->
			<training-task></training-task>
			<!-- 文档资源 -->
			<doc-resource></doc-resource>
			<!-- 视频资源 -->
			<view class="videoResource-component">
				<view class="card">
					<view class="card-header">
						<view class="header-left">
							<view class="card-title">视频学习资源</view>
						</view>
						<text class="header-link" @click="goToPage('1')">更多 ›</text>
					</view>
					<view class="card-body">
						<view class="top-table-box">
							<view @click="checkTable(index)"
							:class="topCheckIndex == index ? 'check-table-p':''"
							v-for="(item,index) in tableList" :key="index">
							{{item.disciplineName}}
							</view>
						</view>
						<view class="for-video-courseware" v-for="(item,index) in videoList" :key="index">
							<img :src="baseUrl+item.exampleImg">
							<view class="bottom-text-box">
								<view>{{item.coursewareName}}</view>
								<view>{{secondsToMinutes(item.minLearningDuration)}}分钟 丨 {{item.creditHours}}学时 丨 {{item.points}}积分</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import { userInfoCard } from './component/userInfoCard'
	import { academicYearStats } from './component/academicYearStats'
	import { labBinding } from './component/labBinding'
	import { examTask } from './component/examTask'
	import { specialExam } from './component/specialExam'
	import { mockPractice } from './component/mockPractice'
	import { trainingTask } from './component/trainingTask'
	import { docResource } from './component/docResource'
	import {
		examElDisciplineTypeList, 
		examUserCoursewareLearningList,
	} from '@/pages_safetyEducationExamination/api/index.js'
	export default {
		components: {
			userInfoCard,
			academicYearStats,
			labBinding,
			examTask,
			specialExam,
			mockPractice,
			trainingTask,
			docResource,
		},
		data() {
			return {
				baseUrl: config.base_url,
				topCheckIndex:0,
				tableList:[],
				// 查询参数
				queryParams: {
					page: 1,
					pageSize: 4,
					materialType:1,
				},
				videoList:[],
				total:0,
				getDataType:false,
			}
		},
		created() {
			
		},
		mounted() {
			this.examElDisciplineTypeList();
		},
		methods: {
			//滚动加载
			scrollGet(){
				console.log('123')
				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.examElDisciplineTypeList();
					})
				}
			},
			//选项卡切换
			checkTable(index){
				if(this.topCheckIndex!=index){
					this.$set(this,'topCheckIndex',index);
					this.$set(this.queryParams,'page',1);
					this.examUserCoursewareLearningList();
				}
			},
			async examElDisciplineTypeList() {
				try {
					const { data } = await examElDisciplineTypeList({});
					if (data.code === 200) {
						this.$set(this, 'tableList', data.data)
						this.examUserCoursewareLearningList();
					}
				} catch (e) { console.error('获取考试任务失败', e); }
			},
			async examUserCoursewareLearningList() {
				let self = this;
				try {
					let obj = JSON.parse(JSON.stringify(this.queryParams))
					obj.disciplineTypeId = this.tableList[this.topCheckIndex].id;
					const { data } = await examUserCoursewareLearningList(obj);
					if (data.code === 200) {
						if(self.queryParams.page == 1){
							this.videoList = 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.videoList = [...this.videoList, ...data.data.records]
							this.total = data.data.total;
							if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
								this.$set(this, 'getDataType', true);
							}
						}
					}
				} catch (e) { console.error('获取文章失败', e); }
			},
			//换算分钟
			secondsToMinutes(totalSeconds) {
				if (typeof totalSeconds !== 'number' || totalSeconds <= 0) {
					return 1;
				}
				return Math.ceil(totalSeconds / 60);
			},
		},
	}
</script>

<style lang="stylus" scoped>
	.safetyEducationExamination-home {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f0f4fb;
		overflow-y: hidden;
		.for-max-box{
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow-y scroll;
			padding:0 0 100rpx 0;
		}
		.videoResource-component {
			margin: 0 32rpx 32rpx;
		
			.card {
				background: #fff;
				border-radius: 24rpx;
				overflow: hidden;
				margin-bottom: 24rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
				border: 1px solid #dde3ed;
			}
		
			.card-header {
				padding: 20rpx 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
		
				.card-title {
					font-size: 28rpx;
					color: #333;
				}
				.header-subtitle{
					margin-top:10rpx;
					font-size:22rpx;
					color:#8896a7;
				}
				.header-link {
					padding:10rpx 20rpx;
					font-size: 24rpx;
					color: #1857d4;
				}
			}
			
			.card-body{
				padding-bottom:30rpx;
				.top-table-box{
					padding:0 28rpx;
					display: flex;
					view{
						flex:1;
						text-align: center;
						line-height:50rpx;
						padding:0 10rpx;
						font-size:24rpx;
						border-bottom:4rpx solid #dedede;
					}
					.check-table-p{
						font-weight:600;
						color:#1857d4;
						border-bottom: 4rpx solid #1857d4;
					}
				}
				.for-video-courseware{
					margin:30rpx 28rpx 0;
					img{
						display: inline-block;
						width:630rpx;
						height: 160px;
						border-radius: 16rpx
						background: linear-gradient(135deg, #1e3a5f, #2d6a9f);
					}
					.bottom-text-box{
						view:nth-child(1){
							font-size:26rpx;
							height:26rpx;
							line-height:26rpx;
							margin:6rpx 0 10rpx;
						}
						view:nth-child(2){
							color:#8896a7;
							font-size:22rpx;
							height:22rpx;
							line-height:22rpx;
						}
					}
				}
			}
		}
	}
</style>