You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.8 KiB
Vue
142 lines
3.8 KiB
Vue
<template>
|
|
<view class="ques-details-page">
|
|
<ch-nav-bar :height="66" title="试题详情" :rightWidth="140">
|
|
<block v-slot:right>
|
|
<ch-nav-btn icon="paperplane-filled" iconSize="28" color="#fff" @click.native="print">
|
|
打印
|
|
</ch-nav-btn>
|
|
</block>
|
|
</ch-nav-bar>
|
|
<ch-flex items="center" v-show="isExit">
|
|
<button class="toggle-btn" type="warn" :disabled="questionId == quesIds[0]" @click="toggleQues(-1)">
|
|
<uni-icons type="arrow-left" size="28" color="#fff"></uni-icons>
|
|
</button>
|
|
<scroll-view scroll-y="true" class="ques-content" :scroll-top="scrollTop">
|
|
<view v-html="question.questioncontent"></view>
|
|
<view class="ques-options">
|
|
<view class="option" v-for="item in question.option">
|
|
{{ item.optionnumber }}. <view v-html="item.optioncontent"></view>
|
|
</view>
|
|
</view>
|
|
<view class="answer">
|
|
<text>答案</text>
|
|
<view v-html="question.questionanswer"></view>
|
|
</view>
|
|
<view class="analysis">
|
|
<text>解析</text>
|
|
<view v-html="question.questionexplain"></view>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- <view class="ques-content">
|
|
<view v-html="question.questioncontent"></view>
|
|
<view class="ques-options">
|
|
<view class="option" v-for="item in question.option">
|
|
{{ item.optionnumber }}. <view v-html="item.optioncontent"></view>
|
|
</view>
|
|
</view>
|
|
<view class="answer">
|
|
<text>答案</text>
|
|
<view v-html="question.questionanswer"></view>
|
|
</view>
|
|
<view class="analysis">
|
|
<text>解析</text>
|
|
<view v-html="question.questionexplain"></view>
|
|
</view>
|
|
</view> -->
|
|
<button class="toggle-btn" type="warn" :disabled="questionId == quesIds[quesIds.length - 1]" @click="toggleQues(1)">
|
|
<uni-icons type="arrow-right" size="28" color="#fff"></uni-icons>
|
|
</button>
|
|
</ch-flex>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import ChFlex from '@/components/ch-flex/ch-flex.vue';
|
|
import ChNavBtn from '@/components/ch-nav-btn/ch-nav-btn.vue'
|
|
import { onBeforeUnmount, onMounted, reactive, toRefs, computed } from 'vue';
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
import { getQuestionInfo } from '@/api/question.js';
|
|
import renderMath from '@/utils/mathJax/renderMath';
|
|
|
|
const data = reactive({
|
|
question: {},
|
|
questionId: 1,
|
|
quesIds: [],
|
|
scrollTop: 0
|
|
})
|
|
|
|
const { question, questionId, quesIds, scrollTop } = toRefs(data)
|
|
|
|
const isExit = computed(() => {
|
|
return question.value && JSON.stringify(question.value) !== '{}'
|
|
})
|
|
|
|
onLoad(option => {
|
|
console.log(option)
|
|
questionId.value = option.id;
|
|
})
|
|
|
|
onMounted(() => {
|
|
const params = {
|
|
questionid: questionId.value
|
|
}
|
|
getQuestionInfo(params, { loading: true }).then(info => {
|
|
question.value = detailQues(info);
|
|
})
|
|
|
|
uni.getStorage({
|
|
key: 'quesIds',
|
|
success: (res) => {
|
|
res.data && (quesIds.value = JSON.parse(res.data))
|
|
}
|
|
})
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
quesIds.length && uni.removeStorage({
|
|
key: 'quesIds'
|
|
})
|
|
})
|
|
|
|
// 切换试题
|
|
function toggleQues(step) {
|
|
const cIndex = quesIds.value.findIndex(id => questionId.value == id)
|
|
console.log(cIndex)
|
|
if (cIndex == -1) return;
|
|
const id = quesIds.value[cIndex + step]
|
|
getQuestionInfo({ questionid: id }, { loading: true }).then(info => {
|
|
question.value = detailQues(info);
|
|
questionId.value = id;
|
|
})
|
|
}
|
|
|
|
function print () {
|
|
uni.setStorage({
|
|
key: 'questions',
|
|
data: JSON.stringify([question.value])
|
|
})
|
|
uni.navigateTo({
|
|
url: '/pages/print/print'
|
|
})
|
|
}
|
|
|
|
function detailQues (question) {
|
|
question.questionanswer = detailMath(question.questionanswer)
|
|
question.questionexplain = detailMath(question.questionexplain)
|
|
question.questioncontent = detailMath(question.questioncontent)
|
|
question.option = question.option.map(item => {
|
|
item.optioncontent = detailMath(item.optioncontent)
|
|
return item
|
|
})
|
|
return question
|
|
}
|
|
|
|
function detailMath(text) {
|
|
return renderMath(text)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import 'quesDetail.scss';
|
|
</style>
|