<template> <view class="content"> <view class="content__titletop"> <view class="content__title">试卷名称:{{info.examname}}</view> <view class="content__subtitle">(满分: {{info.paperexamscore}}分)</view> <view class="content__subtitle">(合格分: {{info.passscore}}分)</view> </view> <view class="content__info"> <view class="content__top"> <view>姓名: {{info.username}}</view> <view>分数: {{info.examscore}}分</view> </view> <view>考试时间: {{info.examtimeend}}</view> </view> <view class="content__sign"> <view style="margin-right: 10rpx">签字: </view> <image style="width: 120rpx; height: 70rpx;" :src="$filePath + info.signaturePath" /> </view> <view class="counter"> 当前试题: <text style="color: orange">{{ current + 1 }}</text>/{{ questionList.length }} </view> <view class="topic"> <view class="title"> <text class="tag_title"> {{ handleCalcQuestType(questionList[current].questiontype) }} </text> {{ current + 1 }}. <text>{{ questionList[current].questiondry }}</text> </view> <view v-if="questionList[current].questiontype === '1'" class="options"> <view v-for="(item, index) in ['A', 'B', 'C', 'D']" :key="index" :class="['item', questionList[current].answer === item ? 'active' : '']"> <text class="option">{{ item }}</text> <text class="text"> {{ questionList[current]['option' + item.toLocaleLowerCase()] }} </text> </view> </view> <view v-if="questionList[current].questiontype === '2'" class="options"> <view v-for="(item, index) in ['A', 'B', 'C', 'D']" :key="index" :class="['item', questionList[current].answer && questionList[current].answer.indexOf(item) !== -1 ? 'active' : '']"> <text class="option">{{ item }}</text> <text class="text"> {{ questionList[current]['option' + item.toLocaleLowerCase()] }} </text> </view> </view> <view v-if="questionList[current].questiontype === '3'" class="options"> <view v-for="(item, index) in ['A', 'B']" :key="index" :class="['item', questionList[current].answer === item ? 'active' : '']"> <text class="option"> {{ questionList[current]['option' + item.toLocaleLowerCase()] }} </text> <text class="text"></text> </view> </view> <view class="correct-answer"> <text>正确答案</text> <view v-if="questionList[current].questiontype === '3'"> {{ questionList[current].answerright === 'A' ? '对' : '错' }} </view> <view v-else>{{ questionList[current].answerright || '无' }}</view> <text>权威解读</text> <view>{{ questionList[current].descr || "无" }}</view> </view> </view> <view class="footer"> <block v-if="current !== 0"> <u-button shape="circle" :custom-style="{ width: current === questionList.length - 1 ? '100%' : '45%' }" text="上一题" @click="current--" /> </block> <block v-if="current !== questionList.length - 1"> <u-button shape="circle" type="primary" :custom-style="{ width: current === 0 ? '100%' : '45%', marginLeft: current === 0 ? '0' : '10%' }" text="下一题" @click="current++" /> </block> </view> </view> </template> <script> import { getTaskScoreInfo } from "@/api"; export default { data() { return { info: {}, questionList: [], current: 0, // 新增当前激活的题目索引 questionTypeMap: { 1: '单选题', 2: '多选题', 3: '判断题', 4: '填空题', 5: '简答题' } } }, onLoad(query) { const { stagestudentrelationId, classId } = query this.getData(stagestudentrelationId, classId) }, mounted() {}, methods: { async getData(stagestudentrelationId, classId) { const resData = await getTaskScoreInfo({ stagestudentrelationId, classId }) this.questionList = resData.pd.questionList this.info = resData.pd console.log(this.info) }, handleCalcQuestType(type) { return `(${this.questionTypeMap[type]})` }, previewImage() { uni.previewImage({ urls: [this.$filePath + this.info.signaturePath], }) } } } </script> <style scoped lang="scss"> .content { padding: 16rpx; .content__titletop { text-align: center; .content__title { font-size: 34rpx; font-weight: 600; } .content__subtitle { margin-top: 8rpx; font-size: 24rpx; } } .content__info { font-size: 34rpx; view { margin-top: 8rpx; } .content__top { display: flex; align-items: center; justify-content: space-between; } } .content__sign { margin-top: 10rpx; font-size: 34rpx; display: flex; align-items: center; } .counter { font-size: 28rpx; margin: 10rpx 0; text-align: end; } .topic { box-sizing: border-box; .tag_title { font-size: 28rpx; background-color: #fff; color: #5ac725; border-radius: 8rpx; padding: 2rpx 8rpx; margin-right: 10rpx; } .title { font-size: 32rpx; font-weight: 600; .question-type { border-radius: 40rpx; padding: 4rpx 14rpx; border: 1rpx solid #3c9cff; font-size: 28rpx; color: #3c9cff; } } .options { margin-top: 40rpx; .item { position: relative; margin-top: 40rpx; color: #696868; &.active { color: #3c9cff; .option { background-color: #3c9cff; color: #fff; } } .option { background-color: #eee; border-radius: 80rpx; width: 65rpx; height: 65rpx; line-height: 65rpx; text-align: center; font-size: 30rpx; display: inline-block; } .text { margin-left: 30rpx; height: 60rpx; line-height: 60rpx; } } } .correct-answer { text { display: inline-block; margin-top: 10rpx; color: #696868; font-size: 30rpx; font-weight: bold; } view { margin-top: 20rpx; color: #333; padding: 20rpx; background-color: #eee; border-radius: 10rpx; font-size: 30rpx; } } } .footer { position: fixed; bottom: 0; width: 100%; left: 0; padding: 20rpx; box-sizing: border-box; background: #fff; text-align: center; display: flex; } } </style>