FE-lab-xcx/pages_safetyEducationExamination/views/home/component/docResource.vue

<!-- 文档资源 -->
<template>
	<view class="docResource-component">
		<view class="card">
			<view class="card-header">
				<view class="header-left">
					<view class="card-title">实验室安全素养资源</view>
				</view>
			</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="card-title-box">
					<view>学习资料</view>
					<view>查看更多</view>
				</view>
				<view class="card-for-list-box">
					<view class="card-for-box" v-for="(item,index) in topList" :key="'top_'+index">
						<view class="for-left-box">📄</view>
						<view class="for-center-box">
							<view>{{ item.coursewareName }}</view>
							<view>{{ item.materialType == 4?'文章':item.attachmentType.substring(1) }}</view>
						</view>
						<view class="for-right-box">{{secondsToMinutes(item.minLearningDuration)}}分钟</view>
					</view>
					<view class="null-p" v-if="!topList[0]">暂无资料</view>
				</view>
				<view class="card-title-box">
					<view>题库</view>
					<view>查看更多</view>
				</view>
				<view class="card-for-list-box-2">
					<view class="card-for-box" v-for="(item,index) in bottomList" :key="'bottom_'+index">
						<view class="for-left-box">📖</view>
						<view class="for-right-box">
							<view>{{item.knowledgePointName}}</view>
							<view>{{item.questionCount}} 题</view>
						</view>
					</view>
					<view class="null-p" v-if="!bottomList[0]">暂无资料</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { 
		examElDisciplineTypeList, 
		examUserCoursewareLearningList,
		examElQuestionBankGroupByKnowledgePoint,
	} from '@/pages_safetyEducationExamination/api/index.js'
	export default {
		// components: {
		// 	workbench,
		// },
		data() {
			return {
				topCheckIndex:0,
				tableList:[],
				topList:[],
				bottomList:[],
			}
		},
		created() {
			
		},
		mounted() {
			this.examElDisciplineTypeList();
		},
		methods: {
			//选项卡切换
			checkTable(index){
				if(this.topCheckIndex!=index){
					this.$set(this,'topCheckIndex',index);
					this.examUserCoursewareLearningList();
					this.examElQuestionBankGroupByKnowledgePoint();
				}
			},
			async examElDisciplineTypeList() {
				try {
					const { data } = await examElDisciplineTypeList({});
					if (data.code === 200) {
						this.$set(this, 'tableList', data.data)
						this.examUserCoursewareLearningList();
						this.examElQuestionBankGroupByKnowledgePoint();
					}
				} catch (e) { console.error('获取考试任务失败', e); }
			},
			async examUserCoursewareLearningList() {
				try {
					let obj = {
						page:1,
						pageSize:3,
						materialType:2,
						disciplineTypeId:this.tableList[this.topCheckIndex].id,
					}
					const { data } = await examUserCoursewareLearningList(obj);
					if (data.code === 200) {
						this.$set(this, 'topList', data.data.records)
					}
				} catch (e) { console.error('获取文章失败', e); }
			},
			async examElQuestionBankGroupByKnowledgePoint() {
				try {
					let obj = {
						page:1,
						pageSize:2,
						disciplineTypeId:this.tableList[this.topCheckIndex].id,
					}
					const { data } = await examElQuestionBankGroupByKnowledgePoint(obj);
					if (data.code === 200) {
						this.$set(this, 'bottomList', data.data.records)
					}
				} 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>
	.docResource-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 {
				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;
				}
			}
			.card-title-box{
				display: flex;
				padding:0 28rpx 0;
				margin-top:10rpx;
				view{
					height:80rpx;
					line-height:80rpx;
				}
				view:nth-child(1){
					font-size:24rpx;
					flex:1;
				}
				view:nth-child(2){
					font-size:22rpx;
					color:#1857d4;
				}
			}
			.card-for-list-box{
				.null-p{
					text-align: center;
					color:#999;
					font-size:24rpx;
					line-height:100rpx;
				}
				.card-for-box:nth-child(1){
					margin-top:0;
				}
				.card-for-box{
					margin:20rpx 28rpx;
					padding: 20rpx 16rpx;
					background-color: #f4f6fa;
					border-radius: 12rpx;
					display: flex;
					.for-left-box{
						width:50rpx;
						font-size:30rpx;
						line-height:56rpx;
						text-align: center;
						margin-right:10rpx;
					}
					.for-center-box{
						flex:1;
						height:56rpx;
						view:nth-child(1){
							font-size:24rpx;
							line-height:24rpx;
							margin-bottom:10rpx;
						}
						view:nth-child(2){
							font-size:22rpx;
							line-height:22rpx;
							color:#8896a7;
						}
					}
					.for-right-box{
						font-size:24rpx;
						line-height:56rpx;
						color:#8896a7;
						margin-right:15rpx;
					}
				}
			}
			.card-for-list-box-2{
				padding:0 28rpx;
				.null-p{
					text-align: center;
					color:#999;
					font-size:24rpx;
					line-height:100rpx;
				}
				.card-for-box:nth-child(even) {
					margin-left:20rpx;
				}
				.card-for-box{
					width:264rpx;
					padding: 20rpx;
					border-radius: 12rpx;
					background-color: #f4f6fa;
					margin-bottom:20rpx;
					display: inline-block;
					.for-left-box{
						width:60rpx;
						font-size:40rpx;
						line-height:56rpx;
						text-align: center;
						margin-right:20rpx;
						display: inline-block;
						overflow: hidden;
						margin-top:5rpx;
					}
					.for-right-box{
						display: inline-block;
						height:56rpx;
						view:nth-child(1){
							font-size:24rpx;
							line-height:24rpx;
							margin-bottom:10rpx;
						}
						view:nth-child(2){
							font-size:22rpx;
							line-height:22rpx;
							color:#8896a7;
						}
					}
				}
			}
		}
	}
</style>