smart_campus_uni/pages/quesDetail/quesDetail.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>