|
|
@@ -1,8 +1,334 @@
|
|
|
+<!-- 考试详情 -->
|
|
|
<template>
|
|
|
+ <view class="exam-detail-page">
|
|
|
+ <scroll-view scroll-y class="scroll-content">
|
|
|
+ <view class="card">
|
|
|
+ <view class="chip-row mb8">
|
|
|
+ <text class="tag tag-orange text-xs">{{ examData.examTypeName }}</text>
|
|
|
+ <text class="tag tag-orange text-xs">{{ getExamStatusText() }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="exam-title">{{ examData.examName }}</view>
|
|
|
+ <view class="info-grid mb14">
|
|
|
+ <view class="info-item">
|
|
|
+ <view class="text-xs text-gray mb4">总题目数</view>
|
|
|
+ <view class="text-blue fw500">{{ examData.totalQuestionNum }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <view class="text-xs text-gray mb4">考试时长</view>
|
|
|
+ <view class="text-333 fw500">{{ examData.answerDuration }} 分钟</view>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <view class="text-xs text-gray mb4">总分/及格</view>
|
|
|
+ <view class="text-333 fw500">{{ examData.totalScore }} / {{ examData.passScore }} 分</view>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <view class="text-xs text-gray mb4">考试次数</view>
|
|
|
+ <view class="text-333 fw500">{{ examData.attemptLimit === 0 ? '不限' : examData.attemptLimit+' 次' }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 考前任务要求 -->
|
|
|
+ <view class="exam-type-max-box" v-if="examData.needStudy||examData.examStudy||examData.mockExam">
|
|
|
+ <view class="exam-title-p">考前任务状态</view>
|
|
|
+ <view class="exam-type-box">
|
|
|
+ <view class="exam-min-box" v-if="examData.needStudy">
|
|
|
+ <view>学时要求</view>
|
|
|
+ <view>{{ examData.completedStudyHours }}/{{ examData.studyHoursRequirement }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="exam-min-box" v-if="examData.examStudy">
|
|
|
+ <view>学习任务</view>
|
|
|
+ <view>待完成</view>
|
|
|
+ </view>
|
|
|
+ <view class="exam-min-box" v-if="examData.mockExam">
|
|
|
+ <view>模拟考试</view>
|
|
|
+ <view>待完成</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 考试说明 -->
|
|
|
+ <view v-if="examData.unavailableDesc" class="exam-desc-box" style="background-color:#f4f6fa;">
|
|
|
+ <view class="exam-desc">{{ examData.unavailableDesc }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <!-- 底部按钮 -->
|
|
|
+ <view class="bottom-bar">
|
|
|
+ <view class="btn-primary" @click="startExam">
|
|
|
+ {{examData.needStudy||examData.examStudy?'开始学习':(examData.mockExam?'模拟考试':'开始考试')}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import {
|
|
|
+ parseTime
|
|
|
+ } from '@/component/public.js'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ examData: {},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ showConditions() {
|
|
|
+ return this.examData.needStudy || this.examData.examStudy || this.examData.mockExam;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ // 接收从上个页面传递的考试数据
|
|
|
+ if (options.examData) {
|
|
|
+ try {
|
|
|
+ this.examData = JSON.parse(decodeURIComponent(options.examData));
|
|
|
+ this.formatExamData();
|
|
|
+ } catch (e) {
|
|
|
+ console.error('解析考试数据失败', e);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ formatExamData() {
|
|
|
+ // 格式化时间
|
|
|
+ if (this.examData.startTime) {
|
|
|
+ this.examData.startTime = parseTime(this.examData.startTime, '{y}-{m}-{d} {h}:{i}');
|
|
|
+ }
|
|
|
+ if (this.examData.endTime) {
|
|
|
+ this.examData.endTime = parseTime(this.examData.endTime, '{y}-{m}-{d} {h}:{i}');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getExamStatusText() {
|
|
|
+ // 根据时间判断考试状态
|
|
|
+ const now = new Date().getTime();
|
|
|
+ const start = new Date(this.examData.startTime).getTime();
|
|
|
+ const end = new Date(this.examData.endTime).getTime();
|
|
|
+
|
|
|
+ if (now < start) return '未开始';
|
|
|
+ if (now > end) return '已结束';
|
|
|
+ return '进行中';
|
|
|
+ },
|
|
|
+ goToStudyHour() {
|
|
|
+ // 跳转到学时任务页面
|
|
|
+ if (this.examData.knowledgePointIds && this.examData.knowledgePointIds.length > 0) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages_safetyEducationExamination/views/studyHourTask/index?knowledgePointId=${this.examData.knowledgePointIds.join(',')}`
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages_safetyEducationExamination/views/study/index'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ goToCourse() {
|
|
|
+ // 跳转到课程学习页面
|
|
|
+ uni.showToast({
|
|
|
+ title: '跳转到课程学习',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goToMockExam() {
|
|
|
+ // 跳转到模拟考试页面
|
|
|
+ uni.showToast({
|
|
|
+ title: '跳转到模拟考试',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ startExam() {
|
|
|
+
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
-</style>
|
|
|
+<style lang="stylus" scoped>
|
|
|
+ .exam-detail-page {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #f0f4fb;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-content {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ padding-bottom: 160rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 28rpx;
|
|
|
+ margin: 24rpx 24rpx 0;
|
|
|
+ border: 1px solid #dde3ed;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chip-row {
|
|
|
+ display: flex;
|
|
|
+ gap: 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 6rpx 16rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag-orange {
|
|
|
+ background: #fff7e6;
|
|
|
+ color: #d46b08;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-xs {
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb8 {
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb4 {
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb12 {
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mb14 {
|
|
|
+ margin-bottom: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .exam-title {
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-item {
|
|
|
+ border: 1px solid #dde3ed;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-gray {
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-333 {
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-blue {
|
|
|
+ color: #1857d4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-green {
|
|
|
+ color: #52c41a;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-red {
|
|
|
+ color: #ff4d4f;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fw500 {
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .time-row {
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-title {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .condition-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16rpx 0;
|
|
|
+ border-bottom: 1rpx solid #f0f0f0;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .condition-icon {
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .condition-text {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ .exam-desc-box{
|
|
|
+ padding:28rpx;
|
|
|
+ border-radius:10rpx;
|
|
|
+ }
|
|
|
+ .exam-desc {
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 1.8;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ .exam-type-max-box{
|
|
|
+ margin-bottom:30rpx;
|
|
|
+ .exam-title-p{
|
|
|
+ font-size:24rpx;
|
|
|
+ line-height:70rpx;
|
|
|
+ }
|
|
|
+ .exam-type-box{
|
|
|
+ border:1px solid #dde3ed;
|
|
|
+ border-radius:20rpx;
|
|
|
+ .exam-min-box:nth-child(1){
|
|
|
+ border-top:none;
|
|
|
+ }
|
|
|
+ .exam-min-box{
|
|
|
+ display:flex;
|
|
|
+ border-top:1px solid #dde3ed;
|
|
|
+ padding:30rpx 28rpx;
|
|
|
+ view{
|
|
|
+ height:30rpx;
|
|
|
+ line-height:30rpx;
|
|
|
+ font-size:24rpx;
|
|
|
+ }
|
|
|
+ view:nth-child(1){
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+ view:nth-child(2){
|
|
|
+ color:#e67e22;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-bar {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background: #fff;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ border-top: 1rpx solid #eee;
|
|
|
+ padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary {
|
|
|
+ height: 88rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ text-align: center;
|
|
|
+ background: #1857d4;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+</style>
|
dedsudiyu