课程内考试引用时的图片显示处理

src/components/Course/exam.vue

@@ -56,13 +56,17 @@
               <div style="font-size: 20px;"><span style="font-size: 40upx;" :class="{'redText':timerValue<5}">{{timerValue}}</span> 分钟</div>
             </div>
             <div class="qitem">
-                <div class="qitem-info">【{{getTypeName(curItem.type)}}】{{curItem.content}}</div>
+                <div class="qitem-info">
+                  <div>【{{getTypeName(curItem.type)}}】{{curItem.content}} </div>
+                  <div class="qimg" v-if="curItem.images"><img class="qimg-fit" :src="imageBaseUrl+curItem.images"/></div>
+                </div>
                 <div v-for="(opt,optIdx) in curItem.options" :key="optIdx">
                     <div class="qitem-opts">
                         <div class="qitem-opt" :class="{check:opt.checked}" @click="chooseOption(opt)">
                             {{toLetter(optIdx+1)}}.{{opt.content}}
                             <i class="el-icon-check" v-if="opt.checked" name="checkbox-mark" color="#00aa00"></i>
                         </div>
+                        <div class="qimg" v-if="opt.images"><img class="qimg-fit" :src="imageBaseUrl+opt.images"/></div>
                     </div>
                 </div>
             </div>
@@ -80,16 +84,22 @@
       <div style="text-align: left;" class="upaper">
         <!--答卷信息-->
         <div v-for="(ditem,didx) in detailItems" :key="didx" class="upaper-item">
-          <div class="upaper-item-q">{{didx +1}}.【{{getTypeName(ditem.type)}}】{{ditem.content}}</div>
+          <div class="upaper-item-q">
+            <div>{{didx +1}}.【{{getTypeName(ditem.type)}}】{{ditem.content}}</div>
+            <div class="qimg" v-if="ditem.images"><img class="qimg-fit" :src="imageBaseUrl+ditem.images"/></div>
+          </div>
           <div class="upaper-item-opts" style="padding-left: 20px;">
-              <div v-for="(opt,optIdx) in ditem.options" :key="optIdx" class="upaper-item-opt" :class="{'upaper-item-opt-user':ditem.userOptIdxs.indexOf(optIdx)>-1}">
-                  <div>
-                      <div>{{toLetter(optIdx+1)}}, {{opt.content}}</div>
-                  </div>
-                  <div>
-                    <span v-if="ditem.userOptIdxs.indexOf(optIdx)>-1 && ditem.correctOptIdxs.indexOf(optIdx)>-1" style="color: #00aa00;font-size: 25px; ">√</span>
-                    <span v-if="ditem.userOptIdxs.indexOf(optIdx)>-1 && ditem.correctOptIdxs.indexOf(optIdx)==-1" style="color: #ff0000;font-size: 25px; ">×</span>
+              <div v-for="(opt,optIdx) in ditem.options" :key="optIdx">
+                  <div class="upaper-item-opt" :class="{'upaper-item-opt-user':ditem.userOptIdxs.indexOf(optIdx)>-1}">
+                    <div>
+                        <div>{{toLetter(optIdx+1)}}, {{opt.content}}</div>
+                    </div>
+                    <div>
+                      <span v-if="ditem.userOptIdxs.indexOf(optIdx)>-1 && ditem.correctOptIdxs.indexOf(optIdx)>-1" style="color: #00aa00;font-size: 25px; ">√</span>
+                      <span v-if="ditem.userOptIdxs.indexOf(optIdx)>-1 && ditem.correctOptIdxs.indexOf(optIdx)==-1" style="color: #ff0000;font-size: 25px; ">×</span>
+                    </div>
                   </div>
+                  <div class="qimg" v-if="opt.images"><img class="qimg-fit" :src="imageBaseUrl+opt.images"/></div>
               </div>
           </div>
           <div class="upaper-item-answer" style="display: flex;">
@@ -147,6 +157,7 @@ export default {
   data() {
     return {
       viewTest:[],
+      imageBaseUrl:process.env.VUE_APP_FILE_BASE_URL,
       correctJudgment:correctJudgment,
       toLetter:numberToLetter,
       formatSeconds:formatSeconds,
@@ -275,21 +286,42 @@ export default {
                 userAnswer:'',
                 optShow:true,
                 content:item.title,
+                images:item.images,
                 options:[]
              }
-             item.optionList.forEach(opt=>{
-                q.options.push({
-                  id:opt.id,
-                  content:opt.content,
-                  answer:opt.isAnswer,
-                  checked:false
-                })
-             });
+             if(item.type==3){
+               q.options.push({
+                 id:item.id+'1',
+                 images:'',
+                 content:"正确",
+                 answer:item.answer=='true'? true:false,
+                 checked:false
+               });
+               q.options.push({
+                 id:item.id+'2',
+                 images:'',
+                 content:"错误",
+                 answer:item.answer=='true'? false:true,
+                 checked:false
+               })
+             }else{
+               item.optionList.forEach(opt=>{
+                  q.options.push({
+                    id:opt.id,
+                    images:opt.images,
+                    content:opt.content,
+                    answer:opt.isAnswer,
+                    checked:false
+                  })
+               });
+             }
+
              if(q.type==102){
                q.userAnswer=[];
              }
              qitems.push(q);
         });
+        console.log(qitems,'qitems')
         return qitems;
     },
     startTest(){
@@ -379,7 +411,7 @@ export default {
     present(){ //提交前处理
     	let $this=this;
     	let score=this.countTest();
-
+      console.log('score='+score);
     	if(this.noAnswers.length>0){
          this.$confirm('还有未答试题,您确定要提交吗?', '提示', {
                   confirmButtonText: '确定',
@@ -400,6 +432,7 @@ export default {
         let totalScore=0;
         this.paper.items.forEach(item => {
           item.score=parseInt(item.score);
+          //console.log(item.score,'item.score');
           totalScore+=item.score;//加到总分中
           if(item.type != 102){
             item.userAnswer='';
@@ -417,6 +450,7 @@ export default {
             });
           }
         });
+        //console.log(totalScore,'totalScore');
         let scoreNum = 0;//用户得分
         let noAnswers=[];//是否都已答
         this.paper.items.forEach((item,idx) => {
@@ -623,4 +657,14 @@ export default {
     margin-bottom: 10px;
   }
 }
+.qimg{
+  padding-left: 30px;
+  width:100%;
+  text-align: left;
+  .qimg-fit{
+    width:100%;
+
+    object-fit:scale-down
+  }
+}
 </style>