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

<!-- 特殊考试 -->
<template>
	<view class="specialExam-component">
		<view class="card" v-if="examType">
			<view class="card-header">
				<view class="header-left">
					<view class="card-title">{{examData.examName}}</view>
					<view class="header-subtitle">{{examData.examKind==1&&examData.conditionType == 4?'前置条件已满足可以参加考试':'满足前置条件后可参加考试'}}</view>
				</view>
			</view>
			<view class="card-body">
				<view class="card-min-box" v-if="examData.needStudy"
				style="padding:6rpx 0;">
					<view class="card-min-left-box">
						<view style="height:24rpx;line-height:24rpx;margin-top:10rpx;">学时要求</view>
						<view style="height:24rpx;line-height:24rpx;">{{examData.completedStudyHours}} / {{examData.studyHoursRequirement}} 学时</view>
					</view>
					<view class="card-min-right-box-1" @click="tableButton(1,item)"
					v-if="examData.needStudy">开始学习</view>
				</view>
				<view class="card-min-box" v-if="examData.examStudy">
					<view class="card-min-left-box">
						<view>考前学习</view>
					</view>
					<view class="card-min-right-box-1" @click="tableButton(2,item)">开始学习</view>
				</view>
				<view class="card-min-box" v-if="examData.mockExam">
					<view class="card-min-left-box">
						<view>模拟考试</view>
					</view>
					<view class="card-min-right-box-1" @click="tableButton(3,item)"
					v-if="!examData.examStudy">开始考试</view>
					<view class="card-min-right-box-2" v-if="examData.examStudy">待通过模拟考试后解锁</view>
				</view>
				<view class="card-min-box">
					<view class="card-min-left-box">
						<view>在线考试</view>
					</view>
					<view class="card-min-right-box-1" @click="tableButton(4,item)"
					v-if="examData.examKind==1&&examData.conditionType == 4">开始考试</view>
					<view class="card-min-right-box-2" v-if="examData.examKind==1&&examData.conditionType != 4">待通过模拟考试后解锁</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { 
		examUserExamStudyTaskList, 
	} from '@/pages_safetyEducationExamination/api/index.js'
	export default {
		data() {
			return {
				examType:true,
				examData:{},
			}
		},
		created() {
			
		},
		mounted() {
			this.examUserExamStudyTaskList();
		},
		methods: {
			tableButton(type,item){
				
			},
			async examUserExamStudyTaskList() {
				try {
					let obj = { page: 1, pageSize: 1, examStatus: 2, isSpecialExam: true };
					const { data } = await examUserExamStudyTaskList(obj);
					if (data.code === 200) {
						if(data.data.records[0]){
							// data.data.records[0].needStudy = true;
							this.$set(this,'examType',true);
							this.$set(this,'examData',data.data.records[0]);
						}else{
							this.$set(this,'examType',false);
						}
					}
				} catch (e) { console.error('获取特殊考试任务失败', e); }
			},
		},
		
	}
</script>

<style lang="stylus" scoped>
	.specialExam-component {
	
		.card {
			margin: 0 32rpx 32rpx;
			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:28rpx;
			.card-min-box:nth-child(1){
				border-top:none;
			}
			.card-min-box{
				margin:0 32rpx;
				border-top:1px solid #8896a7;
				display: flex;
				.card-min-left-box{
					flex:1;
					view{
						height:80rpx;
						line-height:80rpx;
					}
					view:nth-child(1){
						font-size:24rpx;
					}
					view:nth-child(2){
						font-size:22rpx;
						color:#8896a7;
						margin-top:4px;
					}
				}
				.card-min-right-box-1{
					height:80rpx;
					line-height:80rpx;
					font-size:24rpx;
					color:#1857d4;
				}
				.card-min-right-box-2{
					height:80rpx;
					line-height:80rpx;
					font-size:24rpx;
					color:#8896a7;
				}
			}
		}
		
	}
</style>