uniProject/components/chengji/chengji.vue

<template>
	<uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
	 mask-background-color="rgba(255, 255, 255, 0.6);" class="ezy-popup-width-all">
		<view class="ezy-result-page"  :style="{backgroundImage: 'url(' + courseBjFun() + ')'}">
			<view class="icon-title-navBar-box">
				<view @click="handleBack" class="nav-bar-icon"></view>
				<view class="nav-bar-title">成绩</view>
			</view>
			<view class="shiti-frame-box">
				<w-swiper :list="list" :positionIndex="current" class="result-exam-swiper">
					<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-dtjx-row">
									<view class="answer-title"></view>
									<!-- 答案解析 -->
									<view @click="showJiexiPopup(item)" class="answer-btn"></view>
								</view>
								<view class="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  v-else>
									<!-- 答案 -->
									<view class="tiankong-answer-content-box">
										<!-- <text class="answer-item-title">正确答案</text> -->
										<view v-for="(ict,cindex) in showAnswerResult(item)" :key="cindex" class="tiankong-answer-row">
										  <text>{{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>
								
							</view>
						</view>
					</template>
				</w-swiper>
			</view>
			</view>
		<!-- 解析浮层数据 -->
		<questionJiexi ref="jiexiRef" :cardId="cardId"></questionJiexi>
	</uni-popup>
</template>

<script setup>
	import questionJiexi from '@/components/questionJiexi/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 cacheManager from "@/utils/cacheManager";
	
	const {
		getLetterByIndex
	} = useQuestionTools();

	import {
		ref
	} from "vue";

	const props = defineProps({
		list: {
			type: Array,
		},
		cardId: {
			type: [String,Number],
			default: 1
		}
	})

	const emits = defineEmits(['back'])

	const current = ref(0)
	const popupRef = ref(null)
	const jiexiRef = ref(null);

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

  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 {
			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 {
			return item.reply
		}
	}
	
	function courseBjFun() {
		const cardId = Number(props.cardId);
		switch (cardId) {
			case 1:
				return 'static/images/course/couse-shuxue-bj.png'
				break;
			case 2:
				return 'static/images/course/course-yingyu-bj.png'
				break;
			default:
				break;
		}
	}

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