uniProject/pages/xinshuxue/components/unitAnswer.vue

<template>
	<view>
		<uni-popup ref="popupRef" :animation="true" :is-mask-click="false"
			mask-background-color="rgba(255, 255, 255, 0.6);" class="ezy-popup-width-all">
			<view class="ezy-result-page">
				<view class="icon-title-navBar-box">
					<view @click="handleBack" class="nav-bar-icon"></view>
					<view class="nav-bar-title">答案</view>
				</view>
				<view class="exam-body">
					<view class="xx-jd-box">
						<view class="xx-row">
							<view>当前学习进度</view>
							<view class="text-row">
								<text class="dq-jd-text">{{current+1}}</text>
								<text class="dq-jd-line">/</text>{{myList.length}}
							</view>
						</view>
						<progress :percent="(current+1)/myList.length * 100" class="exam-progress-box" stroke-width="10"
							backgroundColor="#3c7dfd" activeColor="#ffd11c" />
					</view>
					<view class="shiti-frame-box">
						<w-swiper :list="myList" :positionIndex="current" class="result-exam-swiper"
							@change="onSwiperChange">
							<template v-slot:default="{item,index}">
								<view class="body" v-if="item.mta_show">
									<danxuan :question="item" showError v-if="item.type == '1'"></danxuan>
									<panduan :question="item" showError v-if="item.type == '2'"></panduan>
									<tiankong :question="item" showError v-if="item.type == '3'"
										:placeholders="item.placeholders"></tiankong>
									<view class="answer-content-box">
										<view class="answer-title">答案</view>
										<view class="answer-content-border answer-btn-box" v-if="item.type!=3">
											<!-- 你的答案 -->
											<view class="answer-item-left">
												<text class="answer-item-title">您的答案</text>
												<text class="answer-item-error">{{showAnswerReply(item)}}</text>
												<view class="answer-line"></view>
											</view>
											<!-- 答案 -->
											<view class="answer-item-right">
												<text class="answer-item-title">正确答案</text>
												<text class="answer-item-correct">{{showAnswerResult(item)}}</text>
											</view>
										</view>
										<!-- 填空题答案 -->
										<view class="answer-content-border tiankong-answer-content-box" v-else>
											<view class="tiankong-answer-title">正确答案</view>
											<view v-for="(ict,cindex) in showAnswerResult(item)" :key="cindex"
												class="tiankong-answer-row">
												<text class="answer-index-box">{{cindex+1}}</text>
												<text v-for="(xItem,xindex) in ict" :key="xindex">
													<text> {{xItem}} </text>
													<text v-if="xindex != ict.length-1">/</text>
												</text>
											</view>
										</view>

										<!-- 试题解析 -->
										<view class="answer-stjx-box">
											<view class="answer-text-title">试题解析：</view>
											<rich-text :nodes="item.answer" class="answer-rich-text"></rich-text>

											<!-- 试题视频 -->
											<view class="answer-text-title">视频讲解：</view>
											<view class="answer-video-box" @click="handleCheckVideo(item)">
												<img :src="item.cover" />
											</view>
										</view>
									</view>
								</view>
							</template>
						</w-swiper>
						<!--  左右滑动提示  -->
						<view class="swiper-tip-box">
							左右滑动查看更多题目
						</view>
					</view>
				</view>
			</view>
			<!-- 解析浮层数据 -->
			<questionJiexi ref="jiexiRef"></questionJiexi>
		</uni-popup>
	</view>
</template>

<script setup>
	import questionJiexi from './questionJiexi.vue';
	import wSwiper from '@/components/wSwiper/wSwiper.vue';
	import danxuan from "@/components/question/danxuan.vue";
	import panduan from "@/components/question/panduan.vue";
	import tiankong from "@/components/question/tiankong.vue";
	import {
		useQuestionTools
	} from "@/components/question/useQuestionTools.js";
	import {
		computed
	} from "vue";
	const {
		getLetterByIndex
	} = useQuestionTools();

	import {
		ref
	} from "vue";

	const props = defineProps({
		list: {
			type: Array,
		},
		code: {
			type: String,
			default: 'cj'
		}
	})

	const myList = computed(() => {
		return props.list.map(item => {
			return {
				...item,
				code: 'cj'
			}
		})
	})

	const emits = defineEmits(['back'])

	const current = ref(0)
	const popupRef = ref(null)
	const jiexiRef = ref(null);
	
	function handleCheckVideo(item) {
		showJiexiPopup(item)
	}

	function onSwiperChange(index) {
		current.value = index;
		uni.$emit('swiper-change', index)
	}

	// 切换成绩
	function showPopup() {
		popupRef.value.open('bottom')
	}

	function closePopup() {
		popupRef.value.close()
	}

	// 展示
	function showJiexiPopup(data) {
		jiexiRef.value.showPopup(data);
	}

	function handleBack() {
		// 从 单元测试 到 岛 的路由参数
		emits('back')
	}

	function showAnswerResult(item) {
		if (item.type == 1) {
			// 单选题
			return getLetterByIndex(item.result)
		} else if (item.type == 2) {
			if (item.result == 1) {
				return '正确'
			} else {
				return '错误'
			}
		} else if (item.type == 4) {
			return getLetterByIndex(item.result)
		} else {
			return item.result
		}
	}


	function showAnswerReply(item) {
		if (item.type == 1) {
			if (item.reply == null) {
				return '未答'
			}
			// 单选题
			return getLetterByIndex(item.reply)
		} else if (item.type == 2) {
			if (item.reply == null) {
				return '未答'
			}
			if (item.reply == 1) {
				return '正确'
			} else {
				return '错误'
			}
		} else if (item.type == 4) {
			if (item.reply == null) {
				return '未答'
			}
			// 单选题
			return getLetterByIndex(item.reply)
		} else {
			return item.reply
		}
	}

	defineExpose({
		showPopup,
		closePopup
	})
</script>