图片展示

src/views/platform/bpmn/my-test/examPop.vue

@@ -42,9 +42,19 @@
                 </span>
             </div>
             <!-- 图片展示区 -->
-            <div v-if="popList[questionsIndex] && popList[questionsIndex].pdfUrl" class="imgBox">
-                <div v-for="(item,i) in popList[questionsIndex].pdfUrl" :key="i" class="fujianImg">
-                    <img style="width:40%" :src="item" @click="showMaskPop(item)">
+            <!-- <div v-if="popList[questionsIndex] && popList[questionsIndex].pdfUrl" class="imgBox"> -->
+                <!-- <div v-for="(item,i) in popList[questionsIndex].pdfUrl" :key="i" class="fujianImg"> -->
+                    <!-- <img style="width:40%" :src="item" @click="showMaskPop(item)"> -->
+                <!-- </div> -->
+            <!-- </div> -->
+            <div v-if="popList[questionsIndex].img && popList[questionsIndex].img.length " class="imgBox">
+                <div v-for="(img, ind) in photos(popList[questionsIndex].img)" :key="ind" class="fujianImg">
+                    <van-image
+                        width="40vw"
+                        height="100"
+                        :src="img.url"
+                        @click="showMaskPop(item,img.url)"
+                    />
                 </div>
             </div>
             <!-- 选项 -->
@@ -182,7 +192,9 @@
         </van-dialog>
         <!-- 遮罩层 -->
         <van-overlay v-if="maskNum!=''" :show="showMask" @click="showMask = false">
-            <div class="warp"><img class="mackImg" :src="maskNum" alt="" srcset=""></div>
+            <div class="warp">
+                <van-image class="mackImg" :src="maskNum" />
+            </div>
         </van-overlay>
     </div>
 
@@ -191,6 +203,7 @@
 </template>
 <script>
 import { shuffle, round } from 'lodash'
+import { getImage } from '@/api/platform/file/attachment'
 import { BASE_API } from '@/api/baseUrl'
 export default {
   name: 'exam-pop',
@@ -512,9 +525,9 @@ export default {
         this.questionsIndex = this.questionsIndex + 1
       }
     },
-    showMaskPop(i) {
+    showMaskPop(i, u) {
       this.showMask = true
-      this.maskNum = i
+      this.maskNum = u
     },
     radioGroupChange(n) {
       // 选中第几个
@@ -601,6 +614,16 @@ export default {
         })
       })
     },
+    photos(data) {
+      if (data) {
+        const photos = data
+        photos.forEach(item => {
+          item.url = getImage(item.id)
+        })
+        return photos
+      }
+      return []
+    },
     dealFormData() {
       const that = this
       const submitData = []
@@ -677,7 +700,8 @@ export default {
   .ques{
     padding: 4% 1%;
     .imgBox{
-      display:flex
+      display:flex;
+      flex-wrap: wrap;
     }
     .options{
       margin: 2% 0;
@@ -786,7 +810,7 @@ export default {
   }
 
   .fujianImg {
-    width: 94%;
+    width: 40vw;
     margin: 2% auto;
 
   }
@@ -801,7 +825,8 @@ export default {
   }
   .mackImg{
     width: 90%;
-    max-height: 90%;
+    // height: 90vh;
+    // max-height: 90vh;
     position: fixed;
     top: 50%;
     left: 50%;