<template>
|
<div class="question">
|
<el-affix target=".question" :offset="0">
|
<ControlBar v-if="mobilequestion.paper" :refresh="refresh"/>
|
</el-affix>
|
<Stem v-if="mobilequestion.paper && contentShow"/>
|
<Option v-if="mobilequestion.paper && optionShow" style="margin-top: 4vw;"/>
|
<Answer v-if="mobilequestion.paper && answerShow" style="margin-top: 4vw;" @refresh="refresh"/>
|
<div class="control">
|
<button class="sheet" @click="sheetClick">答题卡</button>
|
<button class="analysis" @click="analysisClick">解析</button>
|
</div>
|
<el-drawer v-model="drawer" direction="btt" size="50%" :show-close="false">
|
<template #default>
|
<div v-if="drawerType == 1 && drawerShow" class="analysis-content">
|
<div class="title">
|
<text>答案</text>
|
</div>
|
<div class="answer">
|
<WangEditorShow :content="mobilequestion.paper[mobilequestion.questionIndex].answer"/>
|
</div>
|
<div class="title">
|
<text>解析</text>
|
</div>
|
<div class="info">
|
<WangEditorShow :content="mobilequestion.paper[mobilequestion.questionIndex].analysis"/>
|
</div>
|
<div class="title">
|
<text>知识点</text>
|
</div>
|
<div class="knowledge" style="padding: 15px 10px;">
|
<text>{{ mobilequestion.paper[mobilequestion.questionIndex].knowledgepointname }}</text>
|
</div>
|
</div>
|
<div v-if="drawerType == 0" class="sheet-content">
|
<div class="title">
|
<text>答题卡</text>
|
</div>
|
<div class="list">
|
<div class="que-item" :style="'background-color:' + getColor(item.userStatus) + ';'"
|
v-for="(item, index) in mobilequestion.paper" :key="index" @click="jumpIndex(item, index)">
|
{{
|
index + 1
|
}}
|
</div>
|
</div>
|
</div>
|
</template>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
import * as icon from '@element-plus/icons-vue'
|
import {getCurrentInstance, onBeforeUnmount, onMounted, reactive, toRefs, nextTick} from "vue";
|
import {useBasicInfoStore} from "../../../store/basicInfo"
|
import {useMobileQurstionStore} from "../../../store/mobilequestion"
|
import ControlBar from '../../../components/mobile/question/controlbar.vue'
|
import Stem from '../../../components/mobile/question/stem.vue'
|
import Option from '../../../components/mobile/question/option.vue'
|
import Answer from '../../../components/mobile/question/answer.vue'
|
import {GetQuestionMasters, GetQuestionMasterDetail, GetQuestionMastersByPaperid} from "../../../api/mobile/question"
|
import WangEditorShow from '../../../components/mobile/question/wangeditorshow.vue';
|
|
export default {
|
name: "question",
|
components: {ControlBar, Option, Stem, Answer, WangEditorShow},
|
setup() {
|
let {proxy} = getCurrentInstance();
|
const useStore = useBasicInfoStore()
|
const mobilequestion = useMobileQurstionStore()
|
const state = reactive({
|
token: '',
|
paperId: '',
|
drawer: false,
|
drawerType: 0,
|
contentShow: true,
|
optionShow: true,
|
drawerShow: true,
|
answerShow: true
|
});
|
|
onMounted(() => {
|
Init();
|
});
|
onBeforeUnmount(() => {
|
|
});
|
|
|
const Init = () => {
|
document.title = ''
|
useStore.setToken(proxy.$route.query.token)
|
state.paperId = proxy.$route.query.paperid
|
mobilequestion.type = proxy.$route.query.type
|
getQuestionPaper()
|
};
|
|
const getQuestionPaper = () => {
|
|
GetQuestionMastersByPaperid(state.paperId).then(res => {
|
if (res.data) {
|
mobilequestion.paper = res.data.data.filter(e => e.categoryname == mobilequestion.type)
|
mobilequestion.questionIndex = 0
|
}
|
}).catch(err => {
|
console.error(err)
|
})
|
}
|
|
const sheetClick = () => {
|
state.drawerType = 0
|
state.drawer = true
|
}
|
|
const analysisClick = () => {
|
state.drawerType = 1
|
state.drawer = true
|
}
|
|
const getColor = (val) => {
|
if (!val) {
|
return "#d3d4d8"
|
} else if (val == 'true') {
|
return "#17b978"
|
} else if (val == "false") {
|
return "#f33535"
|
}
|
}
|
|
const refresh = () => {
|
state.contentShow = false;
|
state.optionShow = false
|
state.drawerShow = false
|
state.answerShow = false
|
nextTick(() => {
|
state.contentShow = true;
|
state.optionShow = true
|
state.drawerShow = true
|
state.answerShow = true
|
});
|
}
|
|
const jumpIndex = (item, index) => {
|
mobilequestion.questionIndex = index
|
refresh()
|
}
|
|
|
return {
|
...toRefs(state),
|
icon,
|
sheetClick,
|
analysisClick,
|
getColor,
|
refresh,
|
jumpIndex,
|
mobilequestion
|
}
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.center {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
//justify-content: center;
|
}
|
|
.question {
|
@extend .center;
|
width: 100vw;
|
min-height: 100vh;
|
background-color: #f5f5f5;
|
|
::v-deep .el-drawer {
|
background-color: #fff;
|
}
|
|
::v-deep .el-drawer__header {
|
height: 0px;
|
padding: 0px;
|
margin: 0px;
|
background-color: #f5f5f5;
|
color: #000;
|
font-weight: 550;
|
text-indent: 2vw;
|
}
|
|
::v-deep .el-drawer__body {
|
padding: 0px;
|
}
|
}
|
|
.control {
|
width: 100vw;
|
height: 12vw;
|
|
.analysis {
|
border-radius: 20px 0px 0px 20px;
|
width: 18vw;
|
height: 8vw;
|
float: right;
|
background-color: #11999e;
|
margin-top: 2vw;
|
color: #fff;
|
border: 0px;
|
}
|
|
.sheet {
|
border-radius: 0px 20px 20px 0px;
|
width: 18vw;
|
height: 8vw;
|
margin-right: 4vw;
|
float: right;
|
background-color: #f38181;
|
margin-top: 2vw;
|
color: #fff;
|
border: 0px;
|
}
|
}
|
|
.analysis-content {
|
width: 100%;
|
height: 40vh;
|
|
.title {
|
width: 100%;
|
height: 10vw;
|
line-height: 10vw;
|
background-color: #f5f5f5;
|
font-weight: 550;
|
text-indent: 2vw;
|
}
|
|
.answer .info .knowledge {
|
width: calc(100% - 4vw);
|
padding: 2vw;
|
overflow: auto;
|
// border-bottom: 1px solid #f5f5f5;
|
color: gray;
|
}
|
}
|
|
.sheet-content {
|
width: 100%;
|
height: 40vh;
|
|
.title {
|
width: 100%;
|
height: 10vw;
|
line-height: 10vw;
|
background-color: #f5f5f5;
|
font-weight: 550;
|
text-indent: 2vw;
|
}
|
|
.list {
|
width: calc(100% - 4vw);
|
padding: 2vw;
|
overflow: auto;
|
border-bottom: 1px solid #f5f5f5;
|
color: green;
|
|
.que-item {
|
width: 6vw;
|
height: 6vw;
|
float: left;
|
margin: 2vw;
|
//background-color: #11999e;
|
text-align: center;
|
line-height: 6vw;
|
color: #fff;
|
}
|
}
|
}
|
</style>
|
