考试, 考试详情
This commit is contained in:
parent
62297113d4
commit
f07dd475b3
35
pages.json
35
pages.json
|
|
@ -149,6 +149,41 @@
|
|||
{
|
||||
"navigationBarTitleText" : "学习"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/YNEduApp/exam/examination",
|
||||
"style" :
|
||||
{
|
||||
"navigationStyle" : "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/YNEduApp/exam/examinationDetails",
|
||||
"style" :
|
||||
{
|
||||
"navigationStyle" : "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/YNEduApp/exam/examinationList",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "考试记录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/YNEduApp/exam/examinationResultDetails",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "考试结果详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/YNEduApp/learn/pdfStudy",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "pdf学习"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
|
|
|||
|
|
@ -60,9 +60,9 @@ export default {
|
|||
},
|
||||
// 进入考试
|
||||
handleEnterExam() {
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/YNEduApp/exam/exam'
|
||||
// })
|
||||
uni.navigateTo({
|
||||
url: '/pages/YNEduApp/exam/examination'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,493 @@
|
|||
<template>
|
||||
<view>
|
||||
<u-navbar leftIcon="" title="考试" :placeholder="true" />
|
||||
<div class="content">
|
||||
<div class="top-content">
|
||||
<div class="top-wrapper">
|
||||
<div class="time">
|
||||
<div>距离考试结束：</div>
|
||||
<div>
|
||||
<u-count-down
|
||||
class="count-down"
|
||||
ref="countDown"
|
||||
:autoStart="false"
|
||||
:time="time"
|
||||
@change="changeCountDown"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
第
|
||||
<span style="color: #1989fa">{{ currentIndex + 1 }}</span>
|
||||
/{{ questionList.length }}题
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="center-wrapper">
|
||||
<div class="answer-wrapper">
|
||||
<div
|
||||
class="item-wrapper"
|
||||
v-for="(item, index) in questionList"
|
||||
:key="index"
|
||||
v-show="item.isShow"
|
||||
@click="handleQuestionNumber(item, index)"
|
||||
>
|
||||
<div class="answer-item" :class="{ isActive: item.isActive }">{{ index + 1 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="unfold" @click="handleUnfold">
|
||||
{{ isRotating ? '收起' : '展开' }}
|
||||
<u-icon v-if="!this.isRotating" name="arrow-down-fill" size="10" />
|
||||
<u-icon v-else name="arrow-up-fill" size="10" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 题目 -->
|
||||
<div class="question-wrapper" v-for="(item, index) in questionList" :key="index" v-show="index == currentIndex">
|
||||
<div class="question-type-wrapper">
|
||||
<div class="line" />
|
||||
<div class="question-type">
|
||||
<div v-if="item.type == 1">单选题（{{ item.score }}分）</div>
|
||||
<div v-if="item.type == 2">多选题（{{ item.score }}分）</div>
|
||||
<div v-if="item.type == 3">判断题（{{ item.score }}分）</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="question">{{ currentIndex + 1 }}. {{ item.question }}</div>
|
||||
|
||||
<div class="options">
|
||||
<div
|
||||
class="option"
|
||||
v-for="(option, optionIndex) in item.options"
|
||||
:key="optionIndex"
|
||||
:class="{ isActive: option.isActive }"
|
||||
@click="handleSelectOption(item, index, option, optionIndex)"
|
||||
>
|
||||
<div class="option-item">{{ option.value }}.</div>
|
||||
<div class="option-content">{{ option.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="bottom-btn">
|
||||
<div class="btn" v-show="currentIndex != 0">
|
||||
<u-button size="small" shape="circle" text="上一题" @click="currentIndex--" />
|
||||
</div>
|
||||
<div class="btn" v-if="currentIndex !== questionList.length - 1">
|
||||
<u-button type="primary" size="small" shape="circle" text="下一题" @click="currentIndex++" />
|
||||
</div>
|
||||
<div class="btn" v-else>
|
||||
<u-button type="primary" size="small" shape="circle" text="交 卷" @click="openConfirmModal" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提交弹框 -->
|
||||
<u-modal
|
||||
:show="showConfirmModal"
|
||||
title="提示"
|
||||
showCancelButton
|
||||
@cancel="showConfirmModal = false"
|
||||
@confirm="handleConfirmSubmit"
|
||||
>
|
||||
<view class="slot-content">
|
||||
<view v-if="unDoCount > 0">
|
||||
本场考试还有
|
||||
<span style="color: #1989fa; margin: 0 5px">{{ unDoCount }}</span>
|
||||
题尚未完成
|
||||
</view>
|
||||
<view style="text-align: center;">确定交卷</view>
|
||||
</view>
|
||||
</u-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showConfirmModal: false,
|
||||
time: 30 * 60 * 1000,
|
||||
// 答题时间
|
||||
answerTime: 0,
|
||||
currentIndex: 0,
|
||||
// 是否展开
|
||||
isRotating: false,
|
||||
// 是否结束
|
||||
isEnd: false,
|
||||
// 未做题目数
|
||||
unDoCount: 0,
|
||||
// 答题卡
|
||||
answerCard: [],
|
||||
// 题目列表
|
||||
questionList: [
|
||||
{
|
||||
id: 1,
|
||||
// 题目类型
|
||||
type: 1, // 1: 单选题, 2: 多选题, 3: 判断题
|
||||
// 分数
|
||||
score: 2,
|
||||
// 题目
|
||||
question: '送配电线路架设工的主要工作是？',
|
||||
// 选项
|
||||
options: [
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'A' },
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'B' },
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'C' },
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'D' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: 2,
|
||||
score: 2,
|
||||
question: '送配电线路架设工的主要工作是？',
|
||||
options: [
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'A' },
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'B' },
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'C' },
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'D' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: 3,
|
||||
score: 2,
|
||||
question: '送配电线路架设工的主要工作是: 好好工作？',
|
||||
options: [
|
||||
{ label: '对', value: 'A' },
|
||||
{ label: '错', value: 'B' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
// 题目类型
|
||||
type: 1, // 1: 单选题, 2: 多选题, 3: 判断题
|
||||
// 分数
|
||||
score: 2,
|
||||
// 题目
|
||||
question: '送配电线路架设工的主要工作是？',
|
||||
// 选项
|
||||
options: [
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'A' },
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'B' },
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'C' },
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'D' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
type: 2,
|
||||
score: 2,
|
||||
question: '送配电线路架设工的主要工作是？',
|
||||
options: [
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'A' },
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'B' },
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'C' },
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'D' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 31,
|
||||
type: 3,
|
||||
score: 2,
|
||||
question: '送配电线路架设工的主要工作是: 好好工作？',
|
||||
options: [
|
||||
{ label: '对', value: 'A' },
|
||||
{ label: '错', value: 'B' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
// 题目类型
|
||||
type: 1, // 1: 单选题, 2: 多选题, 3: 判断题
|
||||
// 分数
|
||||
score: 2,
|
||||
// 题目
|
||||
question: '送配电线路架设工的主要工作是？',
|
||||
// 选项
|
||||
options: [
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'A' },
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'B' },
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'C' },
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'D' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
type: 2,
|
||||
score: 2,
|
||||
question: '送配电线路架设工的主要工作是？',
|
||||
options: [
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'A' },
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'B' },
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'C' },
|
||||
{ label: '电力设备的安装、调试、维护和检修', value: 'D' }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
type: 3,
|
||||
score: 2,
|
||||
question: '送配电线路架设工的主要工作是: 好好工作？',
|
||||
options: [
|
||||
{ label: '对', value: 'A' },
|
||||
{ label: '错', value: 'B' }
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// 获取列表
|
||||
getList() {
|
||||
if (this.questionList.length > 0) {
|
||||
this.questionList.forEach((item, index) => {
|
||||
this.$set(item, 'isShow', index < 7)
|
||||
this.$set(item, 'isActive', false)
|
||||
if (item.options) {
|
||||
item.options.forEach(option => {
|
||||
this.$set(option, 'isActive', false)
|
||||
})
|
||||
}
|
||||
})
|
||||
console.log('🚀 ~ this.questionList.forEach ~ this.questionList:', this.questionList)
|
||||
this.$refs.countDown.start()
|
||||
}
|
||||
},
|
||||
changeCountDown(time) {
|
||||
// console.log('🚀 ~ changeCountDown ~ time:', time)
|
||||
this.answerTime =
|
||||
this.time - (time.days * 24 * 60 * 60 + time.hours * 60 * 60 + time.minutes * 60 + time.seconds) * 1000
|
||||
if (this.answerTime == this.time) {
|
||||
// 提示: 时间结束, 自动提交
|
||||
this.$refs.uToast.show({
|
||||
message: '考试时间结束, 系统将自动提交',
|
||||
duration: 1000
|
||||
})
|
||||
this.handleConfirmSubmit()
|
||||
setTimeout(() => {
|
||||
this.isEnd = true
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
// 点击题号
|
||||
handleQuestionNumber(item, index) {
|
||||
console.log('🚀 ~ handleQuestionNumber ~ item:', item)
|
||||
this.currentIndex = index
|
||||
},
|
||||
// 展开
|
||||
handleUnfold() {
|
||||
this.questionList.forEach((item, index) => {
|
||||
if (index > 6) {
|
||||
this.$set(item, 'isShow', !item.isShow)
|
||||
}
|
||||
})
|
||||
this.isRotating = !this.isRotating
|
||||
console.log('🚀 ~ this.questionList.forEach ~ this.isRotating:', this.isRotating)
|
||||
},
|
||||
handleSelectOption(item, index, option, optionIndex) {
|
||||
console.log('🚀 ~ handleSelectOption ~ option:', option, optionIndex)
|
||||
item.isActive = true
|
||||
|
||||
// 如果是单选题与判断题 则只能选中一个 多选题可以选中多个
|
||||
if (item.type == 1 || item.type == 3) {
|
||||
this.$set(option, 'isActive', true)
|
||||
// 单选题与判断题只能有一个是选中的, 如果当前是选中状态, 再次点击不做处理, 如果当前是未选中状态, 设置当前项为选中状态, 其他项为未选中状态
|
||||
item.options.forEach((option, optIndex) => {
|
||||
// 除了当前选中的其他都设置为未选中
|
||||
if (optIndex != optionIndex) {
|
||||
this.$set(option, 'isActive', false)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$set(option, 'isActive', !option.isActive)
|
||||
// 如果所有选项都是未选中状态, 则题目也是未选中状态
|
||||
let isActive = item.options.some(option => option.isActive)
|
||||
item.isActive = isActive
|
||||
}
|
||||
},
|
||||
openConfirmModal() {
|
||||
this.unDoCount = this.questionList.filter(item => !item.isActive).length
|
||||
this.showConfirmModal = true
|
||||
},
|
||||
// 答题卡
|
||||
handleAnswerCard() {
|
||||
// 根据questionList.options.isActive 计算答题卡
|
||||
this.questionList.forEach((item, index) => {
|
||||
if (item.type == 1 || item.type == 3) {
|
||||
item.options.forEach(option => {
|
||||
if (option.isActive) {
|
||||
this.answerCard.push({
|
||||
id: item.id,
|
||||
answer: option.value
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
let answer = []
|
||||
item.options.forEach(option => {
|
||||
if (option.isActive) {
|
||||
answer.push(option.value)
|
||||
}
|
||||
})
|
||||
this.answerCard.push({
|
||||
id: item.id,
|
||||
answer
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 确认提交
|
||||
handleConfirmSubmit() {
|
||||
this.handleAnswerCard()
|
||||
// 停止计时
|
||||
this.$refs.countDown.pause()
|
||||
console.log('🚀 ~ handleConfirmSubmit ~ this.answerCard:', this.answerCard, this.answerTime)
|
||||
this.showConfirmModal = false
|
||||
uni.navigateTo({
|
||||
url: '/pages/YNEduApp/exam/examinationDetails'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
padding: 10px;
|
||||
|
||||
.top-content {
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.top-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.time {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.center-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.unfold {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.answer-wrapper {
|
||||
width: 86%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item-wrapper {
|
||||
padding: 5px 5px 0 0;
|
||||
width: 12%;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.answer-item {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
background: #f4f9fe;
|
||||
color: #333;
|
||||
&.isActive {
|
||||
background: #1989fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.question-wrapper {
|
||||
.question-type-wrapper {
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.line {
|
||||
width: 2px;
|
||||
height: 11px;
|
||||
background: #1989fa;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.question-type {
|
||||
color: #8a8a8a;
|
||||
}
|
||||
}
|
||||
|
||||
.question {
|
||||
font-weight: 800;
|
||||
font-size: 15px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.options {
|
||||
margin-top: 10px;
|
||||
.option {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
background: #f4f9fe;
|
||||
border-radius: 5px;
|
||||
&.isActive {
|
||||
background: #8cbff1;
|
||||
color: #fff;
|
||||
}
|
||||
.option-item {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
.option-content {
|
||||
margin-left: 10px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 15px 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.btn {
|
||||
width: 100px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .u-count-down__text {
|
||||
font-weight: 700;
|
||||
color: #1989fa;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,284 @@
|
|||
<template>
|
||||
<view class="wrapper">
|
||||
<div class="result">
|
||||
<div class="result-item">{{ result }}</div>
|
||||
<div class="result-tip">最新记录</div>
|
||||
</div>
|
||||
|
||||
<div class="center-container">
|
||||
<div class="top-wrapper">
|
||||
<div class="item">
|
||||
<div>{{ scoreRate }}</div>
|
||||
<div class="tip">得分率</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>{{ rightCount }}</div>
|
||||
<div class="tip">答对题目</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>{{ rightRate }}</div>
|
||||
<div class="tip">正确率</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>{{ answerTime }}</div>
|
||||
<div class="tip">作答用时</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-wrapper">
|
||||
<div class="item">总分：{{ totalScore }}</div>
|
||||
<div class="item">及格分：{{ passScore }}</div>
|
||||
<div class="item">考试时长：{{ duration }}分钟</div>
|
||||
<div class="item">试题：{{ questionCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-container">
|
||||
<h2 class="title">榜上有名</h2>
|
||||
<div class="title-tab">
|
||||
<div>排名</div>
|
||||
<div>姓名/部门</div>
|
||||
<div>得分</div>
|
||||
<div>得分率</div>
|
||||
</div>
|
||||
|
||||
<div v-for="(item, index) in rankList" :key="index" class="rank-list">
|
||||
<div class="icon">
|
||||
<u-icon :name="item.icon" size="30"/>
|
||||
<u-avatar :src="item.url" size="40" />
|
||||
</div>
|
||||
<div>
|
||||
<div>{{ item.name }}</div>
|
||||
</div>
|
||||
<div>{{ item.score }}</div>
|
||||
<div>{{ item.scoreRate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="bottom-btn">
|
||||
<div class="btn">
|
||||
<u-button size="small" shape="circle" text="考试记录" style="color: #1989fa; border-color: #1989fa;" @click="handleExamination"/>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<u-button type="primary" size="small" shape="circle" text="重新考试" />
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
result: '不及格',
|
||||
// 得分率
|
||||
scoreRate: '60%',
|
||||
// 答对题目
|
||||
rightCount: 15,
|
||||
// 正确率
|
||||
rightRate: '60%',
|
||||
// 作答用时
|
||||
answerTime: '30分钟',
|
||||
// 总分
|
||||
totalScore: 100,
|
||||
// 及格分
|
||||
passScore: 60,
|
||||
// 考试时长
|
||||
duration: 120,
|
||||
// 试题
|
||||
questionCount: 100,
|
||||
// 榜上有名 - 列表
|
||||
rankList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '张三',
|
||||
url: 'https://cdn.uviewui.com/uview/album/1.jpg',
|
||||
score: 80,
|
||||
scoreRate: '80%',
|
||||
icon: '/static/images/top-one.png'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '李四',
|
||||
url: 'https://cdn.uviewui.com/uview/album/1.jpg',
|
||||
score: 70,
|
||||
scoreRate: '70%',
|
||||
icon: '/static/images/top-two.png'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '王五',
|
||||
url: 'https://cdn.uviewui.com/uview/album/1.jpg',
|
||||
score: 60,
|
||||
scoreRate: '60%',
|
||||
icon: '/static/images/top-three.png'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleExamination() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/YNEduApp/exam/examinationList'
|
||||
})
|
||||
},
|
||||
// 重新考试
|
||||
handleResetExamination() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
height: 100vh;
|
||||
background: url('/static/images/考试详情-bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.result {
|
||||
overflow: hidden;
|
||||
width: 180.5px;
|
||||
height: 118.6px;
|
||||
background: url('/static/images/result-bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
z-index: 9;
|
||||
margin-top: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
transform: translateY(40px);
|
||||
|
||||
.result-item {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.result-tip {
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.center-container {
|
||||
margin: 0 10px;
|
||||
width: calc(100% - 20px);
|
||||
height: 250px;
|
||||
background: #e8f2fe;
|
||||
border-radius: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.top-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
margin: 0 10px;
|
||||
|
||||
.item {
|
||||
margin-top: 25px;
|
||||
width: 142px;
|
||||
height: 73px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 800;
|
||||
font-size: 20px;
|
||||
color: #08428d;
|
||||
|
||||
.tip {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-wrapper {
|
||||
font-size: 12px;
|
||||
color: #a1a1a1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.item {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 10px;
|
||||
width: calc(100% - 20px);
|
||||
height: 285px;
|
||||
background: #e8f2fe;
|
||||
border-radius: 20px;
|
||||
|
||||
.title {
|
||||
font-weight: 800;
|
||||
font-size: 20px;
|
||||
color: #08428d;
|
||||
margin: 15px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-tab {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #a1a1a1;
|
||||
margin: 0 10px;
|
||||
> div {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.rank-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
margin: 20px 10px;
|
||||
> div {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.btn {
|
||||
width: 100px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
<template>
|
||||
<view>
|
||||
<div class="content">
|
||||
<div class="tip">*随机抽题下每道分数根据管理员的设置可能不同，最高分以得分率计算（得分率=得分/总分*100%）</div>
|
||||
|
||||
<div class="list-item" v-for="(item, index) in list" :key="index" @click="handleExamList(item)">
|
||||
<div class="item-title">
|
||||
<div class="title">{{ item.time }}</div>
|
||||
<div class="item-tip" v-if="index == 0">最新</div>
|
||||
<div class="pass">{{ item.pass ? '' : '不及格' }}</div>
|
||||
</div>
|
||||
|
||||
<div class="item-content">
|
||||
<div class="item">
|
||||
作答用时：
|
||||
<span class="item-info">{{ item.answerTime }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
得分/总分：
|
||||
<span class="item-info">{{ item.score }}/{{ item.totalScore }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
得分率：
|
||||
<span class="item-info">{{ item.scoreRate }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="all">已显示全部</div>
|
||||
<!-- 底部按钮 -->
|
||||
<div class="bottom-btn">
|
||||
<div class="btn">
|
||||
<u-button type="primary" size="small" shape="circle" text="重新考试" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
id: 1,
|
||||
// 时间
|
||||
time: '2023年04月27日 14:23',
|
||||
// 是否及格
|
||||
pass: false,
|
||||
// 作答用时
|
||||
answerTime: '30分钟',
|
||||
// 得分
|
||||
score: 60,
|
||||
// 总分
|
||||
totalScore: 100,
|
||||
// 得分率
|
||||
scoreRate: '60%'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
// 时间
|
||||
time: '2023年04月27日 14:23',
|
||||
// 是否及格
|
||||
pass: true,
|
||||
// 作答用时
|
||||
answerTime: '30分钟',
|
||||
// 得分
|
||||
score: 60,
|
||||
// 总分
|
||||
totalScore: 100,
|
||||
// 得分率
|
||||
scoreRate: '60%'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleExamList(item) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/YNEduApp/exam/examinationResultDetails'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
padding: 10px;
|
||||
.tip {
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
color: #8a8a8a;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
width: calc(100% - 20px);
|
||||
height: 142px;
|
||||
background: #fff;
|
||||
box-shadow: 0px 3px 5px 0px rgba(231, 231, 231, 0.5);
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
|
||||
.item-title {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.item-tip {
|
||||
width: 40px;
|
||||
height: 23px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background: #1989fa;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.pass {
|
||||
font-size: 12px;
|
||||
color: #f0514c;
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
font-size: 12px;
|
||||
color: #8a8a8a;
|
||||
|
||||
.item {
|
||||
margin-bottom: 10px;
|
||||
.item-info {
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.all {
|
||||
margin: 30px auto;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #8a8a8a;
|
||||
}
|
||||
.bottom-btn {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.btn {
|
||||
width: 100px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,725 @@
|
|||
<template>
|
||||
<view>
|
||||
<div class="content">
|
||||
<div class="top-content">
|
||||
<div class="top-wrapper">
|
||||
<div class="all" :class="{ isAllActive: isActive !== 1 }" @click="handleTab(1)">全部</div>
|
||||
<div :class="{ isTopActive: isActive == 2 }" @click="handleTab(2)">正确（{{ rightCount }}）</div>
|
||||
<div :class="{ isTopActive: isActive == 3 }" @click="handleTab(3)">错误（{{ wrongCount }}）</div>
|
||||
<div :class="{ isTopActive: isActive == 4 }" @click="handleTab(4)">未答（{{ unAnsweredCount }}）</div>
|
||||
<div>
|
||||
第
|
||||
<span style="color: #1989fa">{{ currentIndex + 1 }}</span>
|
||||
/{{ list.length }}题
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="center-wrapper">
|
||||
<div class="answer-wrapper">
|
||||
<div
|
||||
class="item-wrapper"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
v-show="item.isShow"
|
||||
@click="handleQuestionNumber(item, index)"
|
||||
>
|
||||
<div
|
||||
class="answer-item"
|
||||
:class="{ currentBg: currentIndex == index, rightBg: item.isRight, wrongBg: item.isWrong }"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="unfold" @click="handleUnfold">
|
||||
{{ isRotating ? '收起' : '展开' }}
|
||||
<u-icon v-if="!this.isRotating" name="arrow-down-fill" size="10" />
|
||||
<u-icon v-else name="arrow-up-fill" size="10" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 题目 -->
|
||||
<div class="question-wrapper" v-for="(item, index) in list" :key="index" v-show="index == currentIndex">
|
||||
<div class="question-type-wrapper">
|
||||
<div class="line" />
|
||||
<div class="question-type">
|
||||
<div v-if="item.type == 1">单选题（{{ item.score }}分）</div>
|
||||
<div v-if="item.type == 2">多选题（{{ item.score }}分）</div>
|
||||
<div v-if="item.type == 3">判断题（{{ item.score }}分）</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="question">{{ currentIndex + 1 }}. {{ item.question }}</div>
|
||||
|
||||
<div class="options">
|
||||
<div
|
||||
class="option"
|
||||
v-for="(option, optionIndex) in item.options"
|
||||
:key="optionIndex"
|
||||
:class="{ isRight: option.isRight, isError: option.isError }"
|
||||
>
|
||||
<div class="option-item">{{ option.value }}.</div>
|
||||
<div class="option-content">
|
||||
<div>{{ option.label }}</div>
|
||||
<u-icon v-if="option.isRight" name="/static/images/correct.png" />
|
||||
<u-icon v-if="option.isError" name="/static/images/error.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="(item, index) in list" v-show="index == currentIndex" style="margin-top: 30px; font-size: 12px">
|
||||
<div v-if="item.isRight" style="color: #48d66b">回答正确</div>
|
||||
<div v-else-if="item.isWrong" style="color: #fa4f19">回答错误</div>
|
||||
<div v-else-if="item.isUnAnswered" style="color: #656565">未选择</div>
|
||||
|
||||
<div class="select-wrapper">
|
||||
<div class="select-item">
|
||||
<div>正确选择</div>
|
||||
<div v-if="item.type == 1 || item.type == 3" style="color: #48d66b">{{ item.rightAnswer }}</div>
|
||||
<div v-else style="color: #48d66b">{{ item.rightAnswer.join(', ') }}</div>
|
||||
</div>
|
||||
<div class="select-item" v-show="!item.isUnAnswered">
|
||||
<div>你的选择</div>
|
||||
<div v-if="item.type == 1 || item.type == 3" :style="{ color: item.isRight ? '#48d66b' : '#fa4f19' }">
|
||||
{{ item.userAnswer }}
|
||||
</div>
|
||||
<div v-else :style="{ color: item.isRight ? '#48d66b' : '#fa4f19' }">{{ item.userAnswer.join(', ') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="analysis">解析</div>
|
||||
<div class="analysis-item">{{ item.analysis }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isActive: 1,
|
||||
isRotating: false,
|
||||
currentIndex: 0,
|
||||
// 正确
|
||||
rightCount: 0,
|
||||
// 错误
|
||||
wrongCount: 0,
|
||||
// 未答
|
||||
unAnsweredCount: 0,
|
||||
// 问题列表
|
||||
questionList: [
|
||||
{
|
||||
type: 1,
|
||||
question: '送配电线路架设工模拟考试',
|
||||
options: [
|
||||
{
|
||||
label: '正常工作电压作用下的电气设备',
|
||||
value: 'A'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'B'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'C'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'D'
|
||||
}
|
||||
],
|
||||
rightAnswer: 'A',
|
||||
userAnswer: 'B',
|
||||
analysis: '解析'
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
question: '送配电线路架设工模拟考试',
|
||||
options: [
|
||||
{
|
||||
label: '正常工作电压作用下的电气设备',
|
||||
value: 'A'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'B'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'C'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'D'
|
||||
}
|
||||
],
|
||||
rightAnswer: ['B', 'D'],
|
||||
userAnswer: ['B', 'C'],
|
||||
analysis: '解析'
|
||||
},
|
||||
{
|
||||
type: 3,
|
||||
question: '送配电线路架设工模拟考试',
|
||||
options: [
|
||||
{
|
||||
label: '对',
|
||||
value: 'A'
|
||||
},
|
||||
{
|
||||
label: '错',
|
||||
value: 'B'
|
||||
}
|
||||
],
|
||||
rightAnswer: 'A',
|
||||
userAnswer: 'A',
|
||||
analysis: '解析'
|
||||
},
|
||||
{
|
||||
type: 1,
|
||||
question: '送配电线路架设工模拟考试',
|
||||
options: [
|
||||
{
|
||||
label: '正常工作电压作用下的电气设备',
|
||||
value: 'A'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'B'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'C'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'D'
|
||||
}
|
||||
],
|
||||
rightAnswer: 'A',
|
||||
userAnswer: 'B',
|
||||
analysis: '解析'
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
question: '送配电线路架设工模拟考试',
|
||||
options: [
|
||||
{
|
||||
label: '正常工作电压作用下的电气设备',
|
||||
value: 'A'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'B'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'C'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'D'
|
||||
}
|
||||
],
|
||||
rightAnswer: ['B', 'D'],
|
||||
userAnswer: ['B', 'C'],
|
||||
analysis: '解析'
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
question: '送配电线路架设工模拟考试',
|
||||
options: [
|
||||
{
|
||||
label: '正常工作电压作用下的电气设备',
|
||||
value: 'A'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'B'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'C'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'D'
|
||||
}
|
||||
],
|
||||
rightAnswer: ['B', 'D'],
|
||||
userAnswer: ['B', 'D'],
|
||||
analysis: '解析'
|
||||
},
|
||||
{
|
||||
type: 3,
|
||||
question: '送配电线路架设工模拟考试',
|
||||
options: [
|
||||
{
|
||||
label: '对',
|
||||
value: 'A'
|
||||
},
|
||||
{
|
||||
label: '错',
|
||||
value: 'B'
|
||||
}
|
||||
],
|
||||
rightAnswer: 'A',
|
||||
userAnswer: 'A',
|
||||
analysis: '解析'
|
||||
},
|
||||
{
|
||||
type: 1,
|
||||
question: '送配电线路架设工模拟考试',
|
||||
options: [
|
||||
{
|
||||
label: '正常工作电压作用下的电气设备',
|
||||
value: 'A'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'B'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'C'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'D'
|
||||
}
|
||||
],
|
||||
rightAnswer: 'A',
|
||||
userAnswer: 'B',
|
||||
analysis: '解析'
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
question: '送配电线路架设工模拟考试',
|
||||
options: [
|
||||
{
|
||||
label: '正常工作电压作用下的电气设备',
|
||||
value: 'A'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'B'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'C'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'D'
|
||||
}
|
||||
],
|
||||
rightAnswer: ['B', 'D'],
|
||||
userAnswer: ['B', 'C'],
|
||||
analysis: '解析'
|
||||
},
|
||||
{
|
||||
type: 3,
|
||||
question: '送配电线路架设工模拟考试',
|
||||
options: [
|
||||
{
|
||||
label: '对',
|
||||
value: 'A'
|
||||
},
|
||||
{
|
||||
label: '错',
|
||||
value: 'B'
|
||||
}
|
||||
],
|
||||
rightAnswer: 'A',
|
||||
userAnswer: 'A',
|
||||
analysis: '解析'
|
||||
},
|
||||
{
|
||||
type: 1,
|
||||
question: '送配电线路架设工模拟考试',
|
||||
options: [
|
||||
{
|
||||
label: '正常工作电压作用下的电气设备',
|
||||
value: 'A'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'B'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'C'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'D'
|
||||
}
|
||||
],
|
||||
rightAnswer: 'A',
|
||||
userAnswer: 'B',
|
||||
analysis: '解析'
|
||||
},
|
||||
{
|
||||
type: 2,
|
||||
question: '送配电线路架设工模拟考试',
|
||||
options: [
|
||||
{
|
||||
label: '正常工作电压作用下的电气设备',
|
||||
value: 'A'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'B'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'C'
|
||||
},
|
||||
{
|
||||
label: '电气设备的绝缘电阻',
|
||||
value: 'D'
|
||||
}
|
||||
],
|
||||
rightAnswer: ['B', 'D'],
|
||||
userAnswer: ['B', 'C'],
|
||||
analysis: '解析'
|
||||
},
|
||||
{
|
||||
type: 3,
|
||||
question: '送配电线路架设工模拟考试',
|
||||
options: [
|
||||
{
|
||||
label: '对',
|
||||
value: 'A'
|
||||
},
|
||||
{
|
||||
label: '错',
|
||||
value: 'B'
|
||||
}
|
||||
],
|
||||
rightAnswer: 'A',
|
||||
userAnswer: 'A',
|
||||
analysis: '解析'
|
||||
},
|
||||
{
|
||||
type: 3,
|
||||
question: '送配电线路架设工模拟考试',
|
||||
options: [
|
||||
{
|
||||
label: '对',
|
||||
value: 'A'
|
||||
},
|
||||
{
|
||||
label: '错',
|
||||
value: 'B'
|
||||
}
|
||||
],
|
||||
rightAnswer: 'A',
|
||||
userAnswer: '',
|
||||
analysis: '解析'
|
||||
}
|
||||
],
|
||||
// 正确列表
|
||||
rightList: [],
|
||||
// 错误列表
|
||||
wrongList: [],
|
||||
// 未答列表
|
||||
unAnsweredList: [],
|
||||
list: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
this.list = this.questionList
|
||||
this.list.forEach((item, index) => {
|
||||
if (index < 7) {
|
||||
item.isShow = true
|
||||
} else {
|
||||
item.isShow = false
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.questionList.forEach((item, index) => {
|
||||
if (item.type === 1 || item.type === 3) {
|
||||
if (!item.userAnswer) {
|
||||
this.unAnsweredCount++
|
||||
item.isUnAnswered = true
|
||||
// 添加正确背景色
|
||||
item.options.forEach(option => {
|
||||
option.isRight = option.value === item.rightAnswer
|
||||
})
|
||||
} else {
|
||||
if (item.rightAnswer === item.userAnswer) {
|
||||
this.rightCount++
|
||||
// 添加正确背景色
|
||||
item.isRight = true
|
||||
item.options.forEach(option => {
|
||||
option.isRight = option.value === item.rightAnswer
|
||||
})
|
||||
} else {
|
||||
this.wrongCount++
|
||||
// 添加错误背景色
|
||||
item.isWrong = true
|
||||
item.options.forEach(option => {
|
||||
option.isError = option.value === item.userAnswer
|
||||
})
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (!item.userAnswer) {
|
||||
this.unAnsweredCount++
|
||||
item.isUnAnswered = true
|
||||
// 添加正确背景色
|
||||
item.options.forEach(option => {
|
||||
option.isRight = item.rightAnswer.includes(option.value)
|
||||
})
|
||||
} else {
|
||||
if (item.rightAnswer.toString() === item.userAnswer.toString()) {
|
||||
this.rightCount++
|
||||
// 添加正确背景色
|
||||
item.isRight = true
|
||||
} else {
|
||||
this.wrongCount++
|
||||
// 添加错误背景色
|
||||
item.isWrong = true
|
||||
}
|
||||
}
|
||||
// 对比用户答案和正确答案 ,如果用户当前选项与正确答案相同则添加正确背景色, 不同则添加错误背景色, 并将正确答案添加正确背景色, 需要确保每个选项只有一种状态背景色
|
||||
item.options.forEach(option => {
|
||||
if (item.rightAnswer.includes(option.value)) {
|
||||
option.isRight = true
|
||||
}
|
||||
if (item.userAnswer.includes(option.value)) {
|
||||
option.isError = true
|
||||
}
|
||||
if (option.isRight && option.isError) {
|
||||
option.isError = false
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
this.rightList = this.questionList.filter(item => item.isRight)
|
||||
this.wrongList = this.questionList.filter(item => item.isWrong)
|
||||
this.unAnsweredList = this.questionList.filter(item => item.isUnAnswered)
|
||||
},
|
||||
handleTab(index) {
|
||||
console.log('🚀 ~ handleTab ~ index:', index)
|
||||
this.isActive = index
|
||||
this.currentIndex = 0
|
||||
if (index === 1) {
|
||||
this.list = this.questionList
|
||||
} else if (index === 2) {
|
||||
this.list = this.rightList
|
||||
} else if (index === 3) {
|
||||
this.list = this.wrongList
|
||||
} else if (index === 4) {
|
||||
this.list = this.unAnsweredList
|
||||
}
|
||||
this.list.forEach((item, index) => {
|
||||
if (index < 7) {
|
||||
item.isShow = true
|
||||
} else {
|
||||
item.isShow = false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleUnfold() {
|
||||
this.isRotating = !this.isRotating
|
||||
this.list.forEach((item, index) => {
|
||||
if (index >= 7) {
|
||||
item.isShow = this.isRotating
|
||||
}
|
||||
})
|
||||
},
|
||||
handleQuestionNumber(item, index) {
|
||||
this.currentIndex = index
|
||||
this.list.forEach(element => {
|
||||
element.isActive = false
|
||||
})
|
||||
item.isActive = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
padding: 10px;
|
||||
|
||||
.top-content {
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.top-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
.isTopActive {
|
||||
color: #1989fa;
|
||||
}
|
||||
.all {
|
||||
box-sizing: border-box;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #1989fa;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
&.isAllActive {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
border: 1px solid #1989fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.unfold {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.answer-wrapper {
|
||||
width: 86%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item-wrapper {
|
||||
padding: 5px 5px 0 0;
|
||||
width: 12%;
|
||||
height: 45px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.answer-item {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
background: #f4f9fe;
|
||||
color: #333;
|
||||
}
|
||||
// 正确背景色
|
||||
.rightBg {
|
||||
background: #eaf8ed;
|
||||
}
|
||||
// 错误背景色
|
||||
.wrongBg {
|
||||
background: #fcefe9;
|
||||
}
|
||||
.currentBg {
|
||||
background: #1989fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.question-wrapper {
|
||||
.question-type-wrapper {
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.line {
|
||||
width: 2px;
|
||||
height: 11px;
|
||||
background: #1989fa;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.question-type {
|
||||
color: #8a8a8a;
|
||||
}
|
||||
}
|
||||
|
||||
.question {
|
||||
font-weight: 800;
|
||||
font-size: 15px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.options {
|
||||
margin-top: 10px;
|
||||
.option {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
background: #f4f9fe;
|
||||
border-radius: 5px;
|
||||
|
||||
&.isRight {
|
||||
background: #eaf8ed;
|
||||
}
|
||||
&.isError {
|
||||
background: #fcefe9;
|
||||
}
|
||||
.option-item {
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
.option-content {
|
||||
width: calc(100% - 60px);
|
||||
margin-left: 10px;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
.select-item {
|
||||
width: 48%;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #646464;
|
||||
background: #edf2f7;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.analysis {
|
||||
margin: 10px 0;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
font-weight: 800;
|
||||
}
|
||||
.analysis-item {
|
||||
height: 100px;
|
||||
background: #edf2f7;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
color: #656565;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -60,10 +60,11 @@ export default {
|
|||
this.showVideo = false
|
||||
},
|
||||
handleStudyItem(item) {
|
||||
console.log('🚀 ~ handleStudyItem ~ item:', item, item.url.includes('.pdf'))
|
||||
if (item.url.includes('.pdf')) {
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/YNEduApp/exam/exam'
|
||||
// })
|
||||
uni.navigateTo({
|
||||
url: '/pages/YNEduApp/learn/pdfStudy',
|
||||
})
|
||||
} else {
|
||||
this.states = item
|
||||
this.showVideo = true
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
url: '/static/pdf.html?http://qp118.bmwae.cn/preview/file?pageCount=4&file_type=pdf&id=1117542&url=https%3A%2F%2Fbmwfileres.bmwax.cn%2Fmqrcode%2Fmqrfile%2F586413%2F1723517907_3080034644_%E6%B5%8B%E8%AF%95.pdf&preview_url=convert%2Fmqrcode%2Fmqrfile%2F586413%2F1723517907_3080034644_%E6%B5%8B%E8%AF%95&short=xmQqgA&domain=w.afbcs.cn&sign=&d=true&t=%E6%B5%8B%E8%AF%95&tips=',
|
||||
};
|
||||
},
|
||||
onLoad(params){
|
||||
// let {url} = params
|
||||
// this.url = `/static/pdf.html?url=${url}`
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Loading…
Reference in New Issue