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="goToPage()"
					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="goToPage()">开始学习</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="goToPage()"
					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="goToPage()"
					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>
		
		<!-- 考试承诺书弹窗 -->
		<uni-popup ref="preExamDialog" type="center" :mask-click="true">
			<view class="pre-exam-dialog">
				<view class="dialog-header">
					<text class="dialog-title">考试承诺书</text>
				</view>
				<view class="dialog-body">
					<scroll-view scroll-y class="content-scroll">
						<richTextPdf ref="richTextPdf" :content="richTextHtml" :examId="richTextExamId" />
					</scroll-view>
				</view>
				<view class="dialog-footer">
					<view v-if="preButtonType" class="btn btn-border" @click="downloadCommitment">下载</view>
					<view class="btn btn-primary" @click="confirmCommitment">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		goToExamPage,
		confirmCommitmentAndStart,
		startFormalExam,
	} from '@/pages_safetyEducationExamination/utils/index.js'
	import { 
		examUserExamStudyTaskList, 
	} from '@/pages_safetyEducationExamination/api/index.js'
	import richTextPdf from '@/pages_safetyEducationExamination/component/richTextPdf.vue'
	export default {
		components: {
			richTextPdf
		},
		data() {
			return {
				examType:true,
				examData:{},
				// 承诺书相关
				preButtonType: false,
				richTextHtml: '',
				richTextExamId:'',
				preData: null,
				itemData:{},
			}
		},
		created() {
			
		},
		mounted() {
			// this.examUserExamStudyTaskList();
		},
		methods: {
			resetMethod(){
				this.examUserExamStudyTaskList();
			},
			goToPage() {
				this.$set(this,'itemData',this.examData);
				goToExamPage(this.examData, {
					openCommitmentDialog: (examItem) => {
						this.preButtonType = examItem.commitmentPrintEnabled == 1;
						this.richTextHtml = examItem.commitmentContent;
						this.richTextExamId = examItem.examId;
						this.preData = examItem;
						this.$refs.preExamDialog.open();
					},
				});
			},
			// 下载承诺书
			downloadCommitment() {
				uni.showToast({ title: '正在下载，请耐心等候', icon: 'none' });
				this.$refs.richTextPdf.downloadPDF();
			},
			// 确认承诺书
			async confirmCommitment() {
				let self = this;
				await confirmCommitmentAndStart(this.preData, () => {
					this.$refs.preExamDialog.close();
					setTimeout(function(){
						startFormalExam(self.itemData);
					},500);
				});
			},
			// 获取任务列表
			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;
				}
			}
		}
		
	}
	
	// 承诺书弹窗样式
	.pre-exam-dialog {
		width: 600rpx;
		max-height: 80vh;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}
	
	.dialog-header {
		padding: 32rpx;
		border-bottom: 1rpx solid #eee;
	
		.dialog-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}
	}
	
	.dialog-body {
		height: 800rpx;
		overflow: hidden;
	
		.content-scroll {
			height: 100%;
		}
	}
	
	.dialog-footer {
		display: flex;
		gap: 20rpx;
		padding: 24rpx 32rpx;
		border-top: 1rpx solid #eee;
	
		.btn {
			flex: 1;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			font-size: 28rpx;
			border-radius: 12rpx;
		}
	
		.btn-border {
			background: #fff;
			color: #1857d4;
			border: 1rpx solid #1857d4;
		}
	
		.btn-primary {
			background: #1857d4;
			color: #fff;
		}
	}
</style>