ks-app-employment-service/packageB/train/wrongAnswer/wrongDetail.vue

<template>
	<div class="app-box">
		<image src="/packageB/static/images/train/bj.jpg" class="bjImg" mode=""></image>
		<div class="con-box">
			<div class="problemCard">
				<div>
					<div class="problemTitle">
						<span class="titleType" v-if="problemData.type=='single'">单选题</span>
						<span class="titleType" v-if="problemData.type=='multiple'">多选题</span>
						<span class="titleType" v-if="problemData.type=='judge'">判断题</span>
						<span>{{problemData.content}}</span>
					</div>
					<div class="options" v-if="problemData.type=='single'">
					  <div class="opt" :class="problemData.submitAnswer!==''&&i==problemData.submitAnswer?'active':''" v-for="(val,i) in parseOptions(problemData.trainChooses)">
						<div class="optLab">{{indexToLetter(i)}}</div>
						<span>{{val}}</span>
					  </div>
					</div>
					<div class="options" v-if="problemData.type=='multiple'">
					  <div class="opt" :class="judgment(i)?'active':''" v-for="(val,i) in parseOptions(problemData.trainChooses)">
						<div class="optLab">{{indexToLetter(i)}}</div>
						<span>{{val}}</span>
					  </div>
					
					</div>
					<div class="options" v-if="problemData.type=='judge'">
					  <div class="opt" :class="problemData.submitAnswer=='正确'?'active':''">
						<span>正确</span>
					  </div>
					  <div class="opt" :class="problemData.submitAnswer=='错误'?'active':''">
						<span>错误</span>
					  </div>
					</div>
					<div class="analysis">
					  <div class="analysisHead correct" v-if="problemData.submitAnswer==problemData.trueAnswer">
						<div>回答正确！</div>
						<div></div>
					  </div>
					  <div class="analysisHead errors" v-else>
						<div>回答错误！</div>
						<div></div>
					  </div>
					  <div class="analysisCon">
						<div class="parse1">正确答案：</div>
						<div class="parse2" v-if="problemData.type=='single'" style="color: #30A0FF;font-weight: bold;">{{String.fromCharCode(65 + Number(problemData.trueAnswer))}}.</div>
						<div class="parse2" v-if="problemData.type=='multiple'" style="color: #30A0FF;font-weight: bold;">
						  <span  v-for="(val,i) in parseOptions(problemData.trueAnswer)">{{indexToLetter(Number(val))}}.</span>
						</div>
						<div class="parse2" v-if="problemData.type=='judge'" style="color: #30A0FF;font-weight: bold;">{{problemData.trueAnswer}}</div>
					  </div>
					  <div class="analysisCon">
						<div class="parse1">答案解析：</div>
						<div class="parse2">{{problemData.answerDesc}}</div>
					  </div>
					  <div class="analysisCon">
						<div class="parse1">知识点：</div>
						<div>
						  <el-tag style="margin-right: 10px;">{{problemData.knowledgePoint}}</el-tag>
						</div>
					  </div>
					</div>
					<div class="problemBtns">
						<div   @click="removeFromNotebook(2)">标记掌握</div>
						<div  @click="removeFromNotebook(3)">移出错题</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, inject, watch, ref, onMounted,onBeforeUnmount,computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api,urls , navTo,navBack , vacanciesTo, formatTotal, config } = inject('globalFunction');
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const userInfo = ref({});
const rows = ref({});
const Authorization = ref('');
const radio = ref('');
const radio2 = ref('');
const checkList = ref([]);
const questionIndex = ref(1);
const judgWhether = ref('');
const problemData = ref({});

onLoad((options) => {
	rows.value=options
	Authorization.value=uni.getStorageSync('Padmin-Token')||''
	getHeart();
});
onShow(()=>{
	
})

function getHeart() {
	const raw =Authorization.value;
	const token = typeof raw === "string" ? raw.trim() : "";
	const headers = token ? { 'Authorization': raw.startsWith("Bearer ") ? raw : `Bearer ${token}` }: {}
	$api.myRequest("/dashboard/auth/heart", {}, "POST", 10100, headers).then((resData) => {
      if (resData.code == 200) {
        getUserInfo();
      } else {
		  navTo('/packageB/login')
      }
    });
};
function getUserInfo(){
	let header={
		'Authorization':Authorization.value
	}
	$api.myRequest('/system/user/login/user/info', {},'get',10100,header).then((resData) => {
		userInfo.value = resData.info || {};
		// userId.value=resData.info.userId
		queryData()
	});
};
function queryData(){
	let header={
		'Authorization':Authorization.value,
		'Content-Type':"application/x-www-form-urlencoded"
	}
	$api.myRequest('/train/public/mistackUser/detail', {
		userId: userInfo.value.userId,
		questionId:rows.value.questionId,
	},'post',9100,header).then((resData) => {
		if(resData&&resData.code==200){
			problemData.value=resData.data;
		}
		
	});
}
function removeFromNotebook(i) {
	$api.myRequest('/train/public/mistackUser/batchUpdate', {
		userId:userInfo.value.userId,
		questionId:rows.value.questionId,
		status:i
	}).then((resData) => {
		if(resData&&resData.code==200){
			if(i==3){
			  $api.msg('移出成功!')
			}else{
				$api.msg('标记成功!')
			}
			navBack()
		}
	});
}

function judgment(i){
	let arr=checkList.value.join(",")
	if(arr.indexOf(i) !== -1){
	  return true
	}else{
	  return false
	}
};

// 解析选项
function parseOptions(options) {
	if (!options) return [];
	// 假设options是字符串格式，以分号分隔
	if (typeof options === 'string') {
	  return options.split(',').filter(opt => opt.trim());
	}
	// 如果是数组，直接返回
	if (Array.isArray(options)) {
	  return options;
	}
	return [];
};
function indexToLetter(index) {
	// 将索引转换为对应的字母
	return String.fromCharCode(65 + index);
};

</script>

<style lang="stylus" scoped>
.app-box{
	width: 100%;
	height: 100vh;
	position: relative;
	.bjImg{
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.con-box{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top:0;
		z-index: 10;
		padding: 20rpx 28rpx;
		box-sizing: border-box;
		.header{
			height: 100rpx;
			padding: 0 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: linear-gradient(0deg, #4285EC 0%, #0BBAFB 100%);
			color: #fff;
			font-size: 26rpx;
			border-radius: 10rpx
			.headBtn{
				background: #499FFF;
				border-radius: 4px;
				width: 100rpx;
				text-align: center;
				height: 50rpx;
				line-height: 50rpx;
			}
		}
		.problemCard{
			margin-top: 30rpx;
			.problemTitle{
				font-size: 30rpx;
				.titleType{
					display: inline-block;
					background-color: #499FFF;
					border-radius: 10rpx 10rpx 10rpx 0;
					padding: 8rpx 12rpx;
					color: #fff;
					font-size: 26rpx;
					margin-right: 20rpx;
				}
			}
			.options{
				margin-top: 30rpx;
				.opt{
					height: 60rpx;
					/* background-color: #F8F9FA; */
					border-radius: 5px;
					margin-bottom: 15px;
					display: flex;
					align-items: center;
					padding-left: 30rpx;
					box-sizing: border-box;
					color: #808080;
					font-size: 30rpx;
					.optLab{
					  width: 40rpx;
					  height: 40rpx;
					  text-align: center;
					  line-height: 40rpx;
					  border-radius: 50%;
					  background-color: #8C8C8C;
					  color: #fff;
					  font-weight: 600;
					  font-size: 32rpx;
					  margin-right: 20rpx;
					}
				}
				.active{
				  background: linear-gradient(90deg, #25A9F5 0%, #B1DBFF 100%);
				  color: #fff!important;
				  font-weight: bold;
				}
				.active>view{
				  background-color: #fff!important;
				  color: #25A9F5!important;
				}
			}
			.analysis{
			  margin-top: 30rpx;
			  background-color: #fff;
			  border-radius: 6px;
			  margin-bottom: 40rpx;
			  border: 1px solid #10A8FF;
			  padding: 20rpx;
			  box-sizing: border-box;
			  .analysisHead{
			    display: flex;
			    align-items: center;
			    justify-content: space-between;
				font-size: 32rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				letter-spacing: 2px;
			  }
			  .correct{
			    color: #67C23A;
			  }
			  .errors{
			    color: #F06A6A;
			  }
			  .analysisCon{
			    margin-top: 30rpx;
				.parse1{
					font-size: 30rpx;
					font-family: Microsoft YaHei;
					font-weight: bold;
				}
				.parse2{
					font-size: 26rpx;
					color: #333;
					margin-top: 10px;
				}
			  }
			}
			.problemBtns{
				display: flex
				align-items: center
				justify-content: center
				view{
					width: 140rpx
					height: 50rpx
					text-align: center
					line-height: 50rpx
					background-color: #10A8FF
					color: #fff
					font-size: 28rpx
					border-radius: 5rpx
					margin-right: 20rpx;
				}
				
			}
		}
		.footer{
			width: 100%;
			height: 120rpx;
			border-top: 1px solid #ddd
			position: fixed
			bottom: 0
			left: 0
			display: flex
			align-items: center
			justify-content: space-between
			.footerLeft{
				display: flex
				align-items: center
				font-size: 30rpx;
				text-align: center
				.zuo{
					width: 26rpx;
					height: 26rpx;
					border-top: 2px solid #666
					border-left: 2px solid #666
					transform: rotate(-45deg); /* 鼠标悬停时旋转360度 */
					margin-left: 60rpx;
				}
				.you{
					width: 26rpx;
					height: 26rpx;
					border-right: 2px solid #666
					border-bottom: 2px solid #666
					transform: rotate(-45deg); /* 鼠标悬停时旋转360度 */
					// margin-left: 30rpx;
					margin-right: 50rpx;
				}
				.icons{
					width: 30rpx;
					height: 30rpx;
					color: #fff;
					text-align: center;
					line-height: 30rpx;
					border-radius: 50%
				}
				.texts{
					font-size: 24rpx;
				}
			}
			.footerLeft>view{
				margin-right: 40rpx;
			}
			.footerBtn{
				width: 140rpx
				height: 50rpx
				text-align: center
				line-height: 50rpx
				background-color: #67C23A
				color: #fff
				font-size: 28rpx
				border-radius: 5rpx
			}
		}
	}
	.cards{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,0.5);
		z-index: 1000;
		padding: 100rpx 50rpx;
		box-sizing: border-box;
		.cardCon{
			height: 100%;
			background-color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			.cardHead{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				font-weight: 600;
			}
			.questionNums{
			  width: 100%;
			  display: flex;
			  flex-wrap: wrap;
			}
			.questions{
			  width: 60rpx;
			  height: 60rpx;
			  text-align: center;
			  line-height: 60rpx;
			  border-radius: 8rpx;
			  border: 2px solid #E0E0E0;
			  font-size: 28rpx;
			  margin-right: 15px;
			  cursor: pointer;
			}
			.questionsActive{
			  background-color: #F0F9FF;
			  border: 2px solid #409EFF;
			}
			.questionCorrect{
			  background-color: #F0F9FF;
			  border: 2px solid #64BC38;
			  color: #6BC441;
			}
			.questionError{
			  background-color: #FFF1F0;
			  border: 2px solid #F56C6C;
			  color: #F36B6B;
			}
		}
	}
}
.events{
	pointer-events: none; /* 这会禁用所有指针事件 */
	opacity: 0.5; /* 可选：改变透明度以视觉上表示不可点击 */
	cursor: not-allowed; /* 可选：改变鼠标光标样式 */
}
</style>