Merge branch '20250821-hz' into 20250709-wzy

pages/study/examDetail.vue

@@ -1,413 +1,467 @@
 <template>
-	<!--考试试卷详细信息，考试过的试卷内容-->
-	<view style="padding-bottom: 60px;">
-		<u-toast ref="messager"></u-toast>
-		<page-title :showBack="true">查看我的答卷</page-title>
-		<view style="background-color: #FFFFFF;">
-			<u-cell-group>
-				<u-cell title="答卷时间" :value="lastTime"></u-cell>
-				<u-cell title="答卷用时" :value="testDuration+'秒'"></u-cell>
-				<u-cell title="本次得分" :value="score"></u-cell>
-			</u-cell-group>
-		</view>
-		<view style="padding: 20upx;">
-		    <view style="padding-top: 10upx;color: #757575; ">第{{curIndex+1}}题 / 共{{total}}题</view>
-        </view>
-        <view class="qitem">
-            <view class="qitem-content">
-				<view>[{{getTypeName(curItem.type)}}]{{curItem.content}}</view> 
-				<view class="qimg" v-if="curItem.images"><img class="qimg-fit" :src="imageBaseUrl+curItem.images"/></view>
-			</view>
-            <view v-for="(opt,optIdx) in curItem.options" :key="optIdx" class="qitem-opt" :class="{'qitem-opt-user':userOptIdxs.indexOf(optIdx)>-1}">
-                <view>
-                    <view>{{toLetter(optIdx+1)}}, {{opt.content}}</view>
-					<view v-if="opt.images" class="qimg">
-						<img class="qimg-fit" :src="imageBaseUrl+opt.images"/>
-					</view>
-                </view>
-                <view>
-					<text v-if="userOptIdxs.indexOf(optIdx)>-1 && correctOptIdxs.indexOf(optIdx)>-1" style="color: #00aa00; ">√</text>
-					<text v-if="userOptIdxs.indexOf(optIdx)>-1 && correctOptIdxs.indexOf(optIdx)==-1" style="color: #ff0000; ">×</text>
-				</view>
-            </view>
-        </view>
-        <view class="tit">试题答案</view>
-        <view class="answer">
-            <view class="result">
-				<text v-if="curResult" style="color: #00aa00; ">回答正确</text>
-				<text v-else style="color: #ff0000; ">回答错误</text>
-			</view>
-            <view class="wrought">
-                <view class="correct-response">
-                    <view class="response-tit">正确答案</view>
-                    <view class="response-sels">
-						<text v-for="op in correctOptIdxs" :key="op">{{toLetter(op+1)}}</text>
-					</view>
-                </view>
-                <view class="wrong-response">
-                    <view class="wrong-tit">我的答案</view>
-                    <view class="wrong-sels">
-						<text v-for="op in userOptIdxs" :key="op">{{toLetter(op+1)}}</text>
-					</view>
-                </view>
-            </view>
-        </view>
-        <!-- <view class="analysis">解析</view>
-        <view class="analysis-con">联言判断就是断定集中事物情况同时存在的判断,因此该判断属于联言判断,答案为A</view> -->
-        <view class="bottom-btns">
-        	<u-button type="info" text="上一题" @click="prevSub" class="next" :disabled="this.curIndex<1"></u-button>
-            <u-button type="info" text="下一题" @click="nextSub" class="next" :disabled="this.curIndex>=(this.total-1)"></u-button>
-        </view>
+  <!--考试试卷详细信息，考试过的试卷内容-->
+  <view style="padding-bottom: 60px;">
+    <u-toast ref="messager"></u-toast>
+    <page-title :showBack="true">查看我的答卷</page-title>
+    <view style="background-color: #FFFFFF;">
+      <u-cell-group>
+        <u-cell title="答卷时间" :value="answerSurveyTime"></u-cell>
+        <u-cell title="答卷用时" :value="testDuration+'秒'"></u-cell>
+        <u-cell title="本次得分" :value="score"></u-cell>
+      </u-cell-group>
     </view>
+    <view style="padding: 20upx;">
+      <view style="padding-top: 10upx;color: #757575; ">第{{ curIndex + 1 }}题 / 共{{ total }}题</view>
+    </view>
+    <view class="qitem">
+      <view class="qitem-content">
+        <view>[{{ getTypeName(curItem.type) }}]{{ curItem.content }}</view>
+        <view class="qimg" v-if="curItem.images"><img class="qimg-fit" :src="imageBaseUrl+curItem.images"/></view>
+      </view>
+      <view v-for="(opt,optIdx) in curItem.options" :key="optIdx" class="qitem-opt"
+            :class="{'qitem-opt-user':userOptIdxs.indexOf(optIdx)>-1}">
+        <view>
+          <view>{{ toLetter(optIdx + 1) }}, {{ opt.content }}</view>
+          <view v-if="opt.images" class="qimg">
+            <img class="qimg-fit" :src="imageBaseUrl+opt.images"/>
+          </view>
+        </view>
+        <view>
+          <text v-if="userOptIdxs.indexOf(optIdx)>-1 && correctOptIdxs.indexOf(optIdx)>-1" style="color: #00aa00; ">√
+          </text>
+          <text v-if="userOptIdxs.indexOf(optIdx)>-1 && correctOptIdxs.indexOf(optIdx)==-1" style="color: #ff0000; ">×
+          </text>
+        </view>
+      </view>
+    </view>
+    <view class="tit">试题答案</view>
+    <view class="answer">
+      <view class="result">
+        <text v-if="curResult" style="color: #00aa00; ">回答正确</text>
+        <text v-else style="color: #ff0000; ">回答错误</text>
+      </view>
+      <view class="wrought">
+        <view class="correct-response">
+          <view class="response-tit">正确答案</view>
+          <view class="response-sels">
+            <text v-for="op in correctOptIdxs" :key="op">{{ toLetter(op + 1) }}</text>
+          </view>
+        </view>
+        <view class="wrong-response">
+          <view class="wrong-tit">我的答案</view>
+          <view class="wrong-sels">
+            <text v-for="op in userOptIdxs" :key="op">{{ toLetter(op + 1) }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- <view class="analysis">解析</view>
+    <view class="analysis-con">联言判断就是断定集中事物情况同时存在的判断,因此该判断属于联言判断,答案为A</view> -->
+    <view class="bottom-btns">
+      <u-button type="info" text="上一题" @click="prevSub" class="next" :disabled="this.curIndex<1"></u-button>
+      <u-button type="info" text="下一题" @click="nextSub" class="next"
+                :disabled="this.curIndex>=(this.total-1)"></u-button>
+    </view>
+  </view>
 </template>
 
 <script>
-	import config from '@/config/index.js'
-	import apiCourseStudy from '@/api/modules/courseStudy.js'
-	import {formatDate,getQuestionType,correctJudgment,numberToLetter} from '@/utils/tools.js';
-    export default {
-        data() {
-            return {
-				recordId:'',//保存的考试记录的id
-				toLetter:numberToLetter,
-				getTypeName:getQuestionType,
-				imageBaseUrl:config.fileUrl,
-				paper:{
-					items:[]
-				},
-				total:0,
-				curIndex:0,//当前试题索引
-				curItem:{},//当前试题
-				curResult:false,//答案正确
-				score:0,//本次试卷的得分
-				testName:'',
-				contentId:'',
-				courseId:'',
-				passLine:60,
-				testDuration:0,
-				lastTime:'',
-				correctOptIdxs:[],//正确的答案
-				userOptIdxs:[],//用户的答案
-            }
-        },
-		onLoad(options){
-			//如果id不存在，应该返回错误页面
-			this.recordId=options.id;//当前考试记录的id
-			if(this.recordId){
-				this.loadAnswerPaper();
-			}
-		},
-		methods:{
-			loadAnswerPaper(){
-				apiCourseStudy.myExamPaper(this.recordId).then(res=>{
-					if(res.status==200){
-						this.lastTime=res.result.lastTime;
-						this.score=res.result.score;
-						this.contentId=res.result.contentId;
-						this.courseId=res.result.courseId;
-						this.passLine=res.result.passLine;
-						this.testDuration=res.result.testDuration;
-						if(res.result.paper==''){
-							this.$refs.messager.show({message:res.message,type:'error'});
-						}else{
-							this.paper=JSON.parse(res.result.paper);
-							this.total=this.paper.items.length;
-							this.curItem=this.paper.items[this.curIndex];
-							this.judgeAnswer();
-						}
-					}else{
-						this.$refs.messager.show({message:res.message,type:'error'});
-					}
-				})
-			},
-			judgeAnswer(){
-				//正确答案和错误答案
-				this.correctOptIdxs=[];//正确答案
-				this.userOptIdxs=[];//用户的答案
-				
-				let $this=this;
-				let item=this.curItem;
-				item.options.forEach((opt,idx)=>{
-					//填充正确答案
-					if(opt.answer){
-						$this.correctOptIdxs.push(idx);
-					}
-					if(item.type!=102){ //单选或判断
-						if(opt.id==item.userAnswer){
-							$this.userOptIdxs.push(idx);
-						}
-					}else{ //多选
-						if(item.userAnswer.indexOf(opt.id)>-1){
-							$this.userOptIdxs.push(idx);
-						}
-					}
-				});
-				//判断答案是否正确
-				if(this.correctOptIdxs.toString()==this.userOptIdxs.toString()){
-					this.curResult=true;
-				}else{
-					this.curResult=false;
-				}
-			},
-			prevSub(){
-				if(this.curIndex==0){
-					return;
-				}
-				this.curIndex--;
-				if(this.curIndex>-1){
-					this.curItem=this.paper.items[this.curIndex];
-					this.judgeAnswer();
-				}
-			},
-			nextSub() {
-			    this.curIndex++;
-				if(this.curIndex<this.total){
-					this.curItem=this.paper.items[this.curIndex];
-					this.judgeAnswer();
-				}
-			},
-		}
+import config from '@/config/index.js'
+import apiCourseStudy from '@/api/modules/courseStudy.js'
+import {formatDate, getQuestionType, correctJudgment, numberToLetter} from '@/utils/tools.js';
+
+export default {
+  data() {
+    return {
+      recordId: '',//保存的考试记录的id
+      toLetter: numberToLetter,
+      getTypeName: getQuestionType,
+      imageBaseUrl: config.fileUrl,
+      paper: {
+        items: []
+      },
+      total: 0,
+      curIndex: 0,//当前试题索引
+      curItem: {},//当前试题
+      curResult: false,//答案正确
+      score: 0,//本次试卷的得分
+      testName: '',
+      contentId: '',
+      courseId: '',
+      passLine: 60,
+      testDuration: 0,
+      lastTime: '',
+      correctOptIdxs: [],//正确的答案
+      userOptIdxs: [],//用户的答案
     }
+  },
+  computed: {
+    answerSurveyTime() {
+      console.log(`answer time: ` , this.lastTime)
+      if (!this.lastTime.length) return "Error Date"
+      const [y, m, d, h, min, s] = this.lastTime
+      return `${y}年${m}月${d}日 ${h}:${min}:${s}`
+    }
+  },
+  onLoad(options) {
+    //如果id不存在，应该返回错误页面
+    this.recordId = options.id;//当前考试记录的id
+    if (this.recordId) {
+      this.loadAnswerPaper();
+    }
+  },
+  methods: {
+    loadAnswerPaper() {
+      apiCourseStudy.myExamPaper(this.recordId).then(res => {
+        if (res.status == 200) {
+          this.lastTime = res.result.lastTime;
+          this.score = res.result.score;
+          this.contentId = res.result.contentId;
+          this.courseId = res.result.courseId;
+          this.passLine = res.result.passLine;
+          this.testDuration = res.result.testDuration;
+          if (res.result.paper == '') {
+            this.$refs.messager.show({message: res.message, type: 'error'});
+          } else {
+            this.paper = JSON.parse(res.result.paper);
+            this.total = this.paper.items.length;
+            this.curItem = this.paper.items[this.curIndex];
+            this.judgeAnswer();
+          }
+        } else {
+          this.$refs.messager.show({message: res.message, type: 'error'});
+        }
+      })
+    },
+    judgeAnswer() {
+      //正确答案和错误答案
+      this.correctOptIdxs = [];//正确答案
+      this.userOptIdxs = [];//用户的答案
+
+      let $this = this;
+      let item = this.curItem;
+      item.options.forEach((opt, idx) => {
+        //填充正确答案
+        if (opt.answer) {
+          $this.correctOptIdxs.push(idx);
+        }
+        if (item.type != 102) { //单选或判断
+          if (opt.id == item.userAnswer) {
+            $this.userOptIdxs.push(idx);
+          }
+        } else { //多选
+          if (item.userAnswer.indexOf(opt.id) > -1) {
+            $this.userOptIdxs.push(idx);
+          }
+        }
+      });
+      //判断答案是否正确
+      if (this.correctOptIdxs.toString() == this.userOptIdxs.toString()) {
+        this.curResult = true;
+      } else {
+        this.curResult = false;
+      }
+    },
+    prevSub() {
+      if (this.curIndex == 0) {
+        return;
+      }
+      this.curIndex--;
+      if (this.curIndex > -1) {
+        this.curItem = this.paper.items[this.curIndex];
+        this.judgeAnswer();
+      }
+    },
+    nextSub() {
+      this.curIndex++;
+      if (this.curIndex < this.total) {
+        this.curItem = this.paper.items[this.curIndex];
+        this.judgeAnswer();
+      }
+    },
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-	.bottom-btns{
-		padding: 10px;
-		position: fixed;
-		width: 100%;
-		bottom: 0px;
-	    display: flex;
-	    justify-content: space-around;
-	}
-	.qitem{
-		padding: 20upx 40upx;
-		.qitem-content{
-			padding: 20upx 0upx;
-		}
-		.qitem-opt{
-			margin-bottom: 20upx;
-			min-height: 50upx;
-			border-radius: 4px;
-			display: flex;
-			background-color: #FFFFFF;
-			justify-content: space-between;
-			padding: 30upx 20upx;
-		}
-		.qitem-opt-user{
-			background-color: #fff3e5;
-		}
-		.qitem-opt-correct{
-			background-color: #5BA2FC;
-			color:#FFFFFF;
-		}
-		.qitem-opt-wrong{
-			background-color: #EF826B;
-			color:#FFFFFF;
-		}
-	}
-    .ed-top{
-        display: flex;
-        .preface{
-            color: #D5D5D5;
-            margin-left: 16px;
-            margin-top: 19px;
-        }
-        .mold{
-            font-size: 12px;
-            color: #C1C1C1;
-            margin-top: 22px;
-            margin-left: 5px;
-        }
-    }
-    .ed-center{
-        .topic{
-            color: #2E2E2E;
-            margin-left: 16px;
-            margin-top: 10px;
-        }
-        .topic-center{
-            &-1{
-                width: 344px;
-                height: 64px;
-                border-radius: 4px;
-                background: #5BA2FC;
-                margin-left: 16px;
-                margin-top: 10px;
-                display: flex;
-                justify-content: space-between;
-                .topic_left{
-                    line-height: 64px;
-                    margin-left: 16px;
-                    color: #FFFFFF;
-                    display: flex;
-                    .liany{
-                        font-size: 12px;
-                        margin-left: 5px;
-                    }
-                }
-                .topic_right{
-                    color: #FFFFFF;
-                    line-height: 64px;
-                    margin-right: 13px;
-                }
-            }
-            &-2{
-                width: 344px;
-                height: 64px;
-                border-radius: 4px;
-                background: #EF826B;
-                margin-left: 16px;
-                margin-top: 10px;
-                display: flex;
-                justify-content: space-between;
-                .topic_left{
-                    line-height: 64px;
-                    margin-left: 16px;
-                    color: #FFFFFF;
-                    display: flex;
-                    .liany{
-                        font-size: 12px;
-                        margin-left: 5px;
-                    }
-                }
-                .topic_right{
-                    color: #FFFFFF;
-                    line-height: 64px;
-                    margin-right: 13px;
-                }
-            }
-            &-3{
-                width: 344px;
-                height: 64px;
-                border-radius: 4px;
-                background: #FFFFFF;
-                margin-left: 16px;
-                margin-top: 10px;
-                display: flex;
-                justify-content: space-between;
-                .topic_left{
-                    line-height: 64px;
-                    margin-left: 16px;
-                    color: #000000;
-                    display: flex;
-                    .liany{
-                        font-size: 12px;
-                        margin-left: 5px;
-                    }
-                }
-                .topic_right{
-                    color: #000000;
-                    line-height: 64px;
-                    margin-right: 13px;
-                }
-            }
-            &-4{
-                width: 344px;
-                height: 64px;
-                border-radius: 4px;
-                background: #FFFFFF;
-                margin-left: 16px;
-                margin-top: 10px;
-                display: flex;
-                justify-content: space-between;
-                .topic_left{
-                    line-height: 64px;
-                    margin-left: 16px;
-                    color: #000000;
-                    display: flex;
-                    .liany{
-                        font-size: 12px;
-                        margin-left: 5px;
-                    }
-                }
-                .topic_right{
-                    color: #000000;
-                    line-height: 64px;
-                    margin-right: 13px;
-                }
-            }
-            
-        }
-    }
-    .tit{
-        color: #333333;
-        margin-left: 14px;
-        margin-top: 38px;
-    }
-    .answer{
-        width: 346px;
-        height: 112px;
-        background: #FFFFFF;
-        margin-left: 14px;
-        margin-top: 18px;
-        .result{
-            font-size: 12px;
-            color: #EF826B;
-            padding-left: 20px;
-            padding-top: 10px;
-        }
-        .wrought{
-            display: flex;
-            .correct-response{
-                width: 87px;
-                height: 70px;
-                .response-tit{
-                    font-size: 14px;
-                    color: #B3B3B3;
-                    text-align: center;
-                    padding-top: 10px;
-                }
-                .response-sels{
-                    color: #5B5B5B;
-                    text-align: center;
-                    padding-top: 8px;
-                }
-            }
-            .wrong-response{
-                width: 87px;
-                height: 70px;
-                .wrong-tit{
-                    font-size: 14px;
-                    color: #B3B3B3;
-                    text-align: center;
-                    padding-top: 10px;
-                }
-                .wrong-sels{
-                    color: #5B5B5B;
-                    text-align: center;
-                    padding-top: 8px;
-                }
-            }
-        }
-    }
-    .analysis{
-        font-size: 14px;
-        color: #D3D3D3;
-        margin-left: 14px;
-        margin-top: 20px;
-    }
-    .analysis-con{
-        font-size: 12px;
-        color: #000000;
-        margin-left: 14px;
-        margin-top: 10px;
-    }
-    .question{
-        height: 52px;
-        background: #EF826B;
-        margin-top: 93px;
+.bottom-btns {
+  padding: 10px;
+  position: fixed;
+  width: 100%;
+  bottom: 0px;
+  display: flex;
+  justify-content: space-around;
+}
+
+.qitem {
+  padding: 20upx 40upx;
+
+  .qitem-content {
+    padding: 20upx 0upx;
+  }
+
+  .qitem-opt {
+    margin-bottom: 20upx;
+    min-height: 50upx;
+    border-radius: 4px;
+    display: flex;
+    background-color: #FFFFFF;
+    justify-content: space-between;
+    padding: 30upx 20upx;
+  }
+
+  .qitem-opt-user {
+    background-color: #fff3e5;
+  }
+
+  .qitem-opt-correct {
+    background-color: #5BA2FC;
+    color: #FFFFFF;
+  }
+
+  .qitem-opt-wrong {
+    background-color: #EF826B;
+    color: #FFFFFF;
+  }
+}
+
+.ed-top {
+  display: flex;
+
+  .preface {
+    color: #D5D5D5;
+    margin-left: 16px;
+    margin-top: 19px;
+  }
+
+  .mold {
+    font-size: 12px;
+    color: #C1C1C1;
+    margin-top: 22px;
+    margin-left: 5px;
+  }
+}
+
+.ed-center {
+  .topic {
+    color: #2E2E2E;
+    margin-left: 16px;
+    margin-top: 10px;
+  }
+
+  .topic-center {
+    &-1 {
+      width: 344px;
+      height: 64px;
+      border-radius: 4px;
+      background: #5BA2FC;
+      margin-left: 16px;
+      margin-top: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .topic_left {
+        line-height: 64px;
+        margin-left: 16px;
         color: #FFFFFF;
-        text-align: center;
-        line-height: 52px;
+        display: flex;
+
+        .liany {
+          font-size: 12px;
+          margin-left: 5px;
+        }
+      }
+
+      .topic_right {
+        color: #FFFFFF;
+        line-height: 64px;
+        margin-right: 13px;
+      }
     }
-	.qimg{
-	  //padding-left: 30px;
-	  width:100%;
-	  text-align: left;
-	  .qimg-fit{
-	    width:100%;
-	
-	    object-fit:scale-down
-	  }
-	}
+
+    &-2 {
+      width: 344px;
+      height: 64px;
+      border-radius: 4px;
+      background: #EF826B;
+      margin-left: 16px;
+      margin-top: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .topic_left {
+        line-height: 64px;
+        margin-left: 16px;
+        color: #FFFFFF;
+        display: flex;
+
+        .liany {
+          font-size: 12px;
+          margin-left: 5px;
+        }
+      }
+
+      .topic_right {
+        color: #FFFFFF;
+        line-height: 64px;
+        margin-right: 13px;
+      }
+    }
+
+    &-3 {
+      width: 344px;
+      height: 64px;
+      border-radius: 4px;
+      background: #FFFFFF;
+      margin-left: 16px;
+      margin-top: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .topic_left {
+        line-height: 64px;
+        margin-left: 16px;
+        color: #000000;
+        display: flex;
+
+        .liany {
+          font-size: 12px;
+          margin-left: 5px;
+        }
+      }
+
+      .topic_right {
+        color: #000000;
+        line-height: 64px;
+        margin-right: 13px;
+      }
+    }
+
+    &-4 {
+      width: 344px;
+      height: 64px;
+      border-radius: 4px;
+      background: #FFFFFF;
+      margin-left: 16px;
+      margin-top: 10px;
+      display: flex;
+      justify-content: space-between;
+
+      .topic_left {
+        line-height: 64px;
+        margin-left: 16px;
+        color: #000000;
+        display: flex;
+
+        .liany {
+          font-size: 12px;
+          margin-left: 5px;
+        }
+      }
+
+      .topic_right {
+        color: #000000;
+        line-height: 64px;
+        margin-right: 13px;
+      }
+    }
+
+  }
+}
+
+.tit {
+  color: #333333;
+  margin-left: 14px;
+  margin-top: 38px;
+}
+
+.answer {
+  width: 346px;
+  height: 112px;
+  background: #FFFFFF;
+  margin-left: 14px;
+  margin-top: 18px;
+
+  .result {
+    font-size: 12px;
+    color: #EF826B;
+    padding-left: 20px;
+    padding-top: 10px;
+  }
+
+  .wrought {
+    display: flex;
+
+    .correct-response {
+      width: 87px;
+      height: 70px;
+
+      .response-tit {
+        font-size: 14px;
+        color: #B3B3B3;
+        text-align: center;
+        padding-top: 10px;
+      }
+
+      .response-sels {
+        color: #5B5B5B;
+        text-align: center;
+        padding-top: 8px;
+      }
+    }
+
+    .wrong-response {
+      width: 87px;
+      height: 70px;
+
+      .wrong-tit {
+        font-size: 14px;
+        color: #B3B3B3;
+        text-align: center;
+        padding-top: 10px;
+      }
+
+      .wrong-sels {
+        color: #5B5B5B;
+        text-align: center;
+        padding-top: 8px;
+      }
+    }
+  }
+}
+
+.analysis {
+  font-size: 14px;
+  color: #D3D3D3;
+  margin-left: 14px;
+  margin-top: 20px;
+}
+
+.analysis-con {
+  font-size: 12px;
+  color: #000000;
+  margin-left: 14px;
+  margin-top: 10px;
+}
+
+.question {
+  height: 52px;
+  background: #EF826B;
+  margin-top: 93px;
+  color: #FFFFFF;
+  text-align: center;
+  line-height: 52px;
+}
+
+.qimg {
+  //padding-left: 30px;
+  width: 100%;
+  text-align: left;
+
+  .qimg-fit {
+    width: 100%;
+
+    object-fit: scale-down
+  }
+}
 </style>