|
|
@@ -0,0 +1,460 @@
|
|
|
+<!-- 答题详情 -->
|
|
|
+<template>
|
|
|
+ <view class="safetyEducationExamination-scoreDetail">
|
|
|
+ <scroll-view scroll-y class="scroll-content" @scrolltolower="onScrollToLower">
|
|
|
+ <!-- 考试概览 -->
|
|
|
+ <view class="card overview-card">
|
|
|
+ <view class="row-between mb8">
|
|
|
+ <text class="tag tag-blue text-xs">{{ detail.examTypeName }}</text>
|
|
|
+ <text :class="detail.isPass ? 'score-result-pass' : 'score-result-fail'">
|
|
|
+ {{ detail.isPass ? '通过' : '未通过' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="exam-name">{{ detail.examName }}</view>
|
|
|
+ <view class="overview-grid">
|
|
|
+ <view><text class="text-gray">考试时间：</text>{{ detail.examTime }}</view>
|
|
|
+ <view><text class="text-gray">用时：</text>{{ detail.usedTime }}</view>
|
|
|
+ <view><text class="text-gray">满分/及格：</text>{{ detail.totalScore }} / {{ detail.passScore }}</view>
|
|
|
+ <view><text class="text-gray">考次：</text>{{ detail.attemptCount }} / {{ detail.attemptLimit === 0 ? '不限' : detail.attemptLimit }}</view>
|
|
|
+ <view>
|
|
|
+ <text class="text-gray">最高成绩：</text>
|
|
|
+ <text class="text-blue fw500">{{ detail.bestScore }} 分</text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <text class="text-gray">考试结果：</text>
|
|
|
+ <text class="fw500" :class="detail.isPass ? 'text-green' : 'text-red'">
|
|
|
+ {{ detail.isPass ? '通过' : '未通过' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 答题统计 -->
|
|
|
+ <view class="stat-box">
|
|
|
+ <view class="text-sm fw500 mb8">答题统计</view>
|
|
|
+ <view class="stat-grid">
|
|
|
+ <view class="stat-item">
|
|
|
+ <view class="stat-num text-blue">{{ detail.totalQuestionNum || 0 }}</view>
|
|
|
+ <view class="text-xs text-gray">总题数</view>
|
|
|
+ </view>
|
|
|
+ <view class="stat-item">
|
|
|
+ <view class="stat-num text-green">{{ detail.correctCount || 0 }}</view>
|
|
|
+ <view class="text-xs text-gray">正确</view>
|
|
|
+ </view>
|
|
|
+ <view class="stat-item">
|
|
|
+ <view class="stat-num text-red">{{ detail.wrongCount || 0 }}</view>
|
|
|
+ <view class="text-xs text-gray">错误</view>
|
|
|
+ </view>
|
|
|
+ <view class="stat-item">
|
|
|
+ <view class="stat-num text-blue">{{ detail.accuracy }}</view>
|
|
|
+ <view class="text-xs text-gray">正确率</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 答题详情 -->
|
|
|
+ <view class="detail-panel">
|
|
|
+ <view class="detail-title">
|
|
|
+ 答题详情
|
|
|
+ <text class="text-gray detail-title-sub">（共{{ detail.totalQuestionNum || 0 }}题）</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-for="(item, index) in answerList" :key="index" class="question-card">
|
|
|
+ <view class="row-between mb8">
|
|
|
+ <view class="q-head">
|
|
|
+ <text class="q-type-badge">{{ questionTypeName(item.questionType) }}</text>
|
|
|
+ <text class="text-xs text-gray q-no">第 {{ questionNo(index) }} 题</text>
|
|
|
+ <text class="diff-badge" :class="difficultyClass(item.difficulty)">{{ difficultyName(item.difficulty) }}</text>
|
|
|
+ </view>
|
|
|
+ <text class="tag text-xs" :class="isCorrect(item) ? 'tag-green' : 'tag-orange'">
|
|
|
+ {{ isCorrect(item) ? '答对' : '答错' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="q-content">{{ item.questionContent }}</view>
|
|
|
+ <view class="answer-box" :class="isCorrect(item) ? 'answer-box-correct' : 'answer-box-wrong'">
|
|
|
+ <view class="mb4">
|
|
|
+ <text class="text-xs text-gray">我的答案：</text>
|
|
|
+ <text class="text-xs fw500" :class="isCorrect(item) ? 'text-green' : 'text-red'">
|
|
|
+ {{ item.userAnswer }}{{ answerSuffix(item) }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <text class="text-xs text-gray">正确答案：</text>
|
|
|
+ <text class="text-xs text-green fw500">{{ item.correctAnswer }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="item.analysis" class="analysis-box">解析：{{ item.analysis }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-if="!answerList[0] && !listLoading" class="empty-tip">暂无答题记录</view>
|
|
|
+ <view v-if="listLoading" class="loading-tip">加载中...</view>
|
|
|
+ <view v-if="noMore && answerList[0]" class="loading-tip">没有更多了</view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // 题型映射：1-单选题，2-多选题，3-判断题
|
|
|
+ const QUESTION_TYPE_MAP = {
|
|
|
+ 1: '单选题',
|
|
|
+ 2: '多选题',
|
|
|
+ 3: '判断题',
|
|
|
+ };
|
|
|
+
|
|
|
+ // 难度映射：1-简单，2-一般，3-较难，4-极难
|
|
|
+ const DIFFICULTY_MAP = {
|
|
|
+ 1: { name: '简单', cls: 'diff-easy' },
|
|
|
+ 2: { name: '一般', cls: 'diff-normal' },
|
|
|
+ 3: { name: '较难', cls: 'diff-hard' },
|
|
|
+ 4: { name: '极难', cls: 'diff-extreme' },
|
|
|
+ };
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ attemptId: '',
|
|
|
+ examId: '',
|
|
|
+ // 上部分：考试概况
|
|
|
+ detail: {
|
|
|
+ examTypeName: '',
|
|
|
+ examName: '',
|
|
|
+ isPass: false,
|
|
|
+ examTime: '',
|
|
|
+ usedTime: '',
|
|
|
+ totalScore: 0,
|
|
|
+ passScore: 0,
|
|
|
+ attemptCount: 0,
|
|
|
+ attemptLimit: 0,
|
|
|
+ bestScore: 0,
|
|
|
+ totalQuestionNum: 0,
|
|
|
+ correctCount: 0,
|
|
|
+ wrongCount: 0,
|
|
|
+ accuracy: '-',
|
|
|
+ },
|
|
|
+ // 下部分：答题详情列表
|
|
|
+ answerList: [],
|
|
|
+ listLoading: false,
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0,
|
|
|
+ noMore: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ this.attemptId = options.attemptId || '';
|
|
|
+ this.examId = options.examId || '';
|
|
|
+ if (!this.attemptId) {
|
|
|
+ uni.showToast({ title: '考试信息无效', icon: 'none' });
|
|
|
+ setTimeout(() => uni.navigateBack(), 1500);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.loadExamDetail();
|
|
|
+ this.loadAnswerList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ questionTypeName(type) {
|
|
|
+ return QUESTION_TYPE_MAP[type] || '';
|
|
|
+ },
|
|
|
+ difficultyName(difficulty) {
|
|
|
+ const d = DIFFICULTY_MAP[difficulty];
|
|
|
+ return d ? d.name : '';
|
|
|
+ },
|
|
|
+ difficultyClass(difficulty) {
|
|
|
+ const d = DIFFICULTY_MAP[difficulty];
|
|
|
+ return d ? d.cls : '';
|
|
|
+ },
|
|
|
+ isCorrect(item) {
|
|
|
+ return item.isCorrect === 1 || item.isCorrect === true;
|
|
|
+ },
|
|
|
+ answerSuffix(item) {
|
|
|
+ if (item.answerStatusText) return `（${item.answerStatusText}）`;
|
|
|
+ if (item.isPartial) return '（部分正确）';
|
|
|
+ return this.isCorrect(item) ? '（正确）' : '（错误）';
|
|
|
+ },
|
|
|
+ questionNo(index) {
|
|
|
+ const item = this.answerList[index];
|
|
|
+ if (item && item.questionNo) return item.questionNo;
|
|
|
+ if (item && item.sortNo) return item.sortNo;
|
|
|
+ return index + 1;
|
|
|
+ },
|
|
|
+ // 上部分：考试概况（独立详情接口）
|
|
|
+ async loadExamDetail() {
|
|
|
+ try {
|
|
|
+ // TODO 后台接口未提供，先占位；接口就绪后放开以下代码
|
|
|
+ // const { data } = await examElExamAttemptAnswerDetail({ attemptId: this.attemptId });
|
|
|
+ // if (data.code === 200 && data.data) {
|
|
|
+ // const d = data.data;
|
|
|
+ // this.detail = {
|
|
|
+ // examTypeName: d.examTypeName || '',
|
|
|
+ // examName: d.examName || '',
|
|
|
+ // isPass: d.examStatus === 1,
|
|
|
+ // examTime: parseTime(d.startTime, '{y}-{m}-{d}'),
|
|
|
+ // usedTime: d.myDuration || '-',
|
|
|
+ // totalScore: d.totalScore || 0,
|
|
|
+ // passScore: d.passScore || 0,
|
|
|
+ // attemptCount: d.attemptCount || 0,
|
|
|
+ // attemptLimit: d.attemptLimit || 0,
|
|
|
+ // bestScore: d.bestScore || 0,
|
|
|
+ // totalQuestionNum: d.totalQuestionNum || 0,
|
|
|
+ // correctCount: d.correctCount || 0,
|
|
|
+ // wrongCount: d.wrongCount || 0,
|
|
|
+ // accuracy: d.accuracy || '-',
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('获取考试详情失败', e);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ resetList() {
|
|
|
+ this.page = 1;
|
|
|
+ this.noMore = false;
|
|
|
+ this.$set(this, 'answerList', []);
|
|
|
+ this.loadAnswerList();
|
|
|
+ },
|
|
|
+ // 下部分：答题详情列表（分页滚动加载）
|
|
|
+ async loadAnswerList() {
|
|
|
+ if (this.listLoading || this.noMore) return;
|
|
|
+ this.listLoading = true;
|
|
|
+ try {
|
|
|
+ // TODO 后台接口未提供，先占位；接口就绪后放开以下代码
|
|
|
+ // const { data } = await examElExamAttemptAnswerAttemptAnswer({
|
|
|
+ // page: this.page,
|
|
|
+ // pageSize: this.pageSize,
|
|
|
+ // attemptId: this.attemptId,
|
|
|
+ // });
|
|
|
+ // if (data.code === 200) {
|
|
|
+ // const records = data.data.records || [];
|
|
|
+ // const newList = this.page === 1 ? records : [...this.answerList, ...records];
|
|
|
+ // this.$set(this, 'answerList', newList);
|
|
|
+ // this.total = data.data.total;
|
|
|
+ // if (newList.length >= this.total) {
|
|
|
+ // this.noMore = true;
|
|
|
+ // } else {
|
|
|
+ // this.page++;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('获取答题详情失败', e);
|
|
|
+ } finally {
|
|
|
+ this.listLoading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onScrollToLower() {
|
|
|
+ this.loadAnswerList();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="stylus" scoped>
|
|
|
+ .safetyEducationExamination-scoreDetail
|
|
|
+ height 100%
|
|
|
+ display flex
|
|
|
+ flex-direction column
|
|
|
+ overflow hidden
|
|
|
+ background-color #f0f4fb
|
|
|
+
|
|
|
+ .scroll-content
|
|
|
+ flex 1
|
|
|
+ overflow hidden
|
|
|
+
|
|
|
+ .card
|
|
|
+ background #fff
|
|
|
+ border 1rpx solid #dde3ed
|
|
|
+ border-radius 24rpx
|
|
|
+ padding 32rpx
|
|
|
+ margin 24rpx 24rpx 24rpx
|
|
|
+ box-shadow 0 4rpx 24rpx rgba(24,87,212,0.08)
|
|
|
+
|
|
|
+ .exam-name
|
|
|
+ font-size 32rpx
|
|
|
+ font-weight 700
|
|
|
+ color #1a2233
|
|
|
+ margin-bottom 20rpx
|
|
|
+
|
|
|
+ .overview-grid
|
|
|
+ display grid
|
|
|
+ grid-template-columns 1fr 1fr
|
|
|
+ gap 12rpx
|
|
|
+ font-size 26rpx
|
|
|
+ color #1a2233
|
|
|
+ margin-bottom 28rpx
|
|
|
+
|
|
|
+ // 答题统计
|
|
|
+ .stat-box
|
|
|
+ background #f4f6fa
|
|
|
+ border-radius 16rpx
|
|
|
+ padding 24rpx
|
|
|
+ margin-bottom 28rpx
|
|
|
+
|
|
|
+ .stat-grid
|
|
|
+ display grid
|
|
|
+ grid-template-columns 1fr 1fr 1fr 1fr
|
|
|
+ gap 16rpx
|
|
|
+ text-align center
|
|
|
+
|
|
|
+ .stat-num
|
|
|
+ font-size 40rpx
|
|
|
+ font-weight 700
|
|
|
+
|
|
|
+ // 答题详情区
|
|
|
+ .detail-panel
|
|
|
+ padding 0 24rpx 24rpx
|
|
|
+
|
|
|
+ .detail-title
|
|
|
+ font-size 24rpx
|
|
|
+ font-weight 500
|
|
|
+ padding 28rpx 0 20rpx
|
|
|
+
|
|
|
+ .detail-title-sub
|
|
|
+ font-weight 400
|
|
|
+
|
|
|
+ // 题目卡片
|
|
|
+ .question-card
|
|
|
+ background #fff
|
|
|
+ border 1rpx solid #dde3ed
|
|
|
+ border-radius 20rpx
|
|
|
+ padding 28rpx
|
|
|
+ margin-bottom 20rpx
|
|
|
+
|
|
|
+ .row-between
|
|
|
+ display flex
|
|
|
+ align-items center
|
|
|
+ justify-content space-between
|
|
|
+
|
|
|
+ .q-head
|
|
|
+ display flex
|
|
|
+ align-items center
|
|
|
+
|
|
|
+ .q-type-badge
|
|
|
+ background #1857d4
|
|
|
+ color #fff
|
|
|
+ font-size 24rpx
|
|
|
+ padding 4rpx 16rpx
|
|
|
+ border-radius 8rpx
|
|
|
+
|
|
|
+ .q-no
|
|
|
+ margin-left 12rpx
|
|
|
+
|
|
|
+ .diff-badge
|
|
|
+ margin-left 12rpx
|
|
|
+ font-size 20rpx
|
|
|
+ padding 2rpx 12rpx
|
|
|
+ border-radius 8rpx
|
|
|
+ border 1rpx solid transparent
|
|
|
+
|
|
|
+ .diff-easy
|
|
|
+ background #f6ffed
|
|
|
+ color #52c41a
|
|
|
+ border-color #b7eb8f
|
|
|
+
|
|
|
+ .diff-normal
|
|
|
+ background #e6f4ff
|
|
|
+ color #1677ff
|
|
|
+ border-color #91caff
|
|
|
+
|
|
|
+ .diff-hard
|
|
|
+ background #fff7e6
|
|
|
+ color #fa8c16
|
|
|
+ border-color #ffd591
|
|
|
+
|
|
|
+ .diff-extreme
|
|
|
+ background #f9f0ff
|
|
|
+ color #722ed1
|
|
|
+ border-color #d3adf7
|
|
|
+
|
|
|
+ .q-content
|
|
|
+ font-size 24rpx
|
|
|
+ line-height 1.7
|
|
|
+ margin-bottom 20rpx
|
|
|
+
|
|
|
+ // 答案区
|
|
|
+ .answer-box
|
|
|
+ border-radius 16rpx
|
|
|
+ padding 20rpx
|
|
|
+ margin-bottom 20rpx
|
|
|
+
|
|
|
+ .answer-box-correct
|
|
|
+ background #f6ffed
|
|
|
+ border 1rpx solid #b7eb8f
|
|
|
+
|
|
|
+ .answer-box-wrong
|
|
|
+ background #f4f6fa
|
|
|
+
|
|
|
+ // 解析区
|
|
|
+ .analysis-box
|
|
|
+ background #f6ffed
|
|
|
+ border-radius 16rpx
|
|
|
+ padding 20rpx
|
|
|
+ font-size 26rpx
|
|
|
+ color #4a5568
|
|
|
+ line-height 1.7
|
|
|
+
|
|
|
+ // 标签
|
|
|
+ .tag
|
|
|
+ display inline-flex
|
|
|
+ align-items center
|
|
|
+ padding 4rpx 16rpx
|
|
|
+ border-radius 40rpx
|
|
|
+ font-weight 500
|
|
|
+
|
|
|
+ .tag-blue
|
|
|
+ background #eef3fd
|
|
|
+ color #1857d4
|
|
|
+
|
|
|
+ .tag-green
|
|
|
+ background #edfaf6
|
|
|
+ color #0d8f6f
|
|
|
+
|
|
|
+ .tag-orange
|
|
|
+ background #fef6ec
|
|
|
+ color #e67e22
|
|
|
+
|
|
|
+ .score-result-pass
|
|
|
+ color #10a37f
|
|
|
+ font-weight 600
|
|
|
+
|
|
|
+ .score-result-fail
|
|
|
+ color #e53e3e
|
|
|
+ font-weight 600
|
|
|
+
|
|
|
+ .text-xs
|
|
|
+ font-size 22rpx
|
|
|
+
|
|
|
+ .text-sm
|
|
|
+ font-size 24rpx
|
|
|
+
|
|
|
+ .text-gray
|
|
|
+ color #8896a7
|
|
|
+
|
|
|
+ .text-blue
|
|
|
+ color #1857d4
|
|
|
+
|
|
|
+ .text-green
|
|
|
+ color #10a37f
|
|
|
+
|
|
|
+ .text-red
|
|
|
+ color #e53e3e
|
|
|
+
|
|
|
+ .fw500
|
|
|
+ font-weight 500
|
|
|
+
|
|
|
+ .mb4
|
|
|
+ margin-bottom 8rpx
|
|
|
+
|
|
|
+ .mb8
|
|
|
+ margin-bottom 16rpx
|
|
|
+
|
|
|
+ // 提示
|
|
|
+ .empty-tip
|
|
|
+ text-align center
|
|
|
+ line-height 80rpx
|
|
|
+ color #aaa
|
|
|
+ font-size 24rpx
|
|
|
+
|
|
|
+ .loading-tip
|
|
|
+ text-align center
|
|
|
+ line-height 60rpx
|
|
|
+ color #aaa
|
|
|
+ font-size 22rpx
|
|
|
+</style>
|
dedsudiyu