GSExamProj/pages/quesDetail/quesDetail.vue

<template>
	<view class="hole-page">
		<view class="nav-bar"></view>
		<view 
			class="single-ques"
			v-for="(single, index) in quesList"
			:key="index"
			v-show="quesStatus == 1"
		>
			<!-- <h2>{{ index + 1 }}.</h2> -->
			<!-- <h2>题型：{{ single.questionType }}</h2> -->
			<h2 style="margin-bottom: 50rpx;">
				<span style="box-sizing: border-box; padding: 3rpx 6rpx; border: 1px solid #6bbefa; color: #6bbefa; background-color: #fff; font-size: 12px; margin-right: 10rpx;">
					{{ single.questionType }}
				</span>
				{{ index + 1 }}、{{ single.questionTitle }}
			</h2>
			<view class="ans-cont">
				<h2
					v-for="(ans, ansIndex) in single.trueOp"
					:key="ansIndex"
				>
					<view :class="[{ true: ans.split('-')[0] == single.trueAnswer }]">
						{{ ans }}
					</view>
				</h2>
			</view>
			<h2 style="margin-top: 50rpx; display: flex; justify-content: space-between;">
				<span>
					正确答案：{{ single.trueAnswer }}
				</span>
				<span>
					您的答案：
					<span
						:class="[
							{ wrong: single.answer != single.trueAnswer }, 
							{ correct: single.answer == single.trueAnswer }
						]"
					>
						{{ single.answer }}
					</span>
				</span>
			</h2>
		</view>
	</view>
</template>

<script>
import { publicPath } from '../../public';
	export default {
		data() {
			return {
				quesList: [],
				quesStatus: 0
			}
		},
		methods: {
			reOrder (arr) {
				let sortedArr = arr.sort((a, b) => {
					return a.match(/\d+/)[0] - b.match(/\d+/)[0]
				})
				if (sortedArr.length > 3) {
					for (let i = 0; i < sortedArr.length; i++) {
						switch (sortedArr[i].split('-')[0]) {
							case '1':
								sortedArr[i] = 'A-' + sortedArr[i].split('-')[1]
								break;
							case '2':
								sortedArr[i] = 'B-' + sortedArr[i].split('-')[1]
								break;
							case '3':
								sortedArr[i] = 'C-' + sortedArr[i].split('-')[1]
								break;
							case '4':
								sortedArr[i] = 'D-' + sortedArr[i].split('-')[1]
								break;
						}
					}
				} else {
					for (let i = 0; i < sortedArr.length; i++) {
						switch (sortedArr[i].substring(0, 1)) {
							case '1':
								sortedArr[i] = 'A-' + sortedArr[i].substring(1)
								break;
							case '2':
								sortedArr[i] = 'B-' + sortedArr[i].substring(1)
								break;
							case '3':
								sortedArr[i] = 'C-' + sortedArr[i].substring(1)
								break;
							case '4':
								sortedArr[i] = 'D-' + sortedArr[i].substring(1)
								break;
						}
					}
				}
				return sortedArr
			}
		},
		onLoad(params) {
			let that = this
			that.quesList = []
			that.quesStatus = 0
			console.log(params);
			if (params.type == '普考') {
				// 获取考试题目
				uni.request({
					url: publicPath + '/backstage/app/selStudyPaperMsg',
					method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
					},
					data: {
						keyWord: 'exam_question',
						id: uni.getStorageSync('id'),
						examId: params.id,
					},
					success: (res) => {
						console.log(res);
						that.quesList = res.data.data
						for (let i = 0; i < that.quesList.length; i++) {
							if (that.quesList[i].questionType == '判断题') {
								that.quesList[i].trueOp = that.reOrder(that.quesList[i].questionOption.split(';').slice(0, that.quesList[i].questionOption.split(';').length))
							} else {
								that.quesList[i].trueOp = that.reOrder(that.quesList[i].questionOption.split(';').slice(0, that.quesList[i].questionOption.split(';').length - 1))
							}
							if (that.quesList[i].answer == null) {
								that.quesList[i].answer = '未作答'
							}
						}
						console.log(that.quesList);
						that.quesStatus = 1
					}
				})
			} else if (params.type == '自测') {
				// 获取练习题目
				uni.request({
					url: publicPath + '/backstage/app/selStudyPaperMsg',
					method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded; charset=UTF-8'
					},
					data: {
						keyWord: 'exam_question_self',
						id: uni.getStorageSync('id'),
						examId: params.id,
					},
					success: (res) => {
						console.log(res);
						that.quesList = res.data.data
						for (let i = 0; i < that.quesList.length; i++) {
							that.quesList[i].trueOp = that.reOrder(that.quesList[i].questionOption.split(';').slice(0, that.quesList[i].questionOption.split(';').length - 1))
							if (that.quesList[i].answer == null) {
								that.quesList[i].answer = '未作答'
							}
						}
						console.log(that.quesList);
						that.quesStatus = 1
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hole-page{
		background-color: #f7fbfe;
		.nav-bar{
			width: 100%;
			height: var(--status-bar-height);
			padding-top: var(--status-bar-height);
		}
		.single-ques{
			width: 100%;
			box-sizing: border-box;
			padding: 15rpx 30rpx;
			background-color: #fff;
			margin: 20rpx auto;
			h2{
				font-weight: normal;
				margin: 20rpx auto;
				font-size: 16px;
			}
			.ans-cont{
				h2{
					.true{
						color: #2ca3f8;
					}
				}
			}
			.wrong{
				color: red;
			}
			.correct{
				color: green;
			}
		}
	}
</style>