图片预览

1

src/router/notKeepAliveList.js

@@ -104,6 +104,7 @@ export default [
   '/business/remedy', //
   '/setSilder/setSilder',
   '/downList', //下载列表
-  '/business/reaplceMusicPlayer' // 乐器置换
+  '/business/reaplceMusicPlayer', // 乐器置换
+  '/operateManager/userAskList'
   // '/business/feeAudit',
 ]

src/views/setQuestions/userAskList.vue

@@ -63,19 +63,21 @@
                     <a :href="url.url">{{ url.name }}</a>
                   </p>
                 </div>
-                <div v-if="scope.row.questionnaireResultDtoList[index].type == 'image'">
-                  <div v-if="JSON.parse(scope.row.questionnaireResultDtoList[index].additionalValue).length > 0">
+                <div v-if="scope.row.questionnaireResultDtoList[index].type == 'image'" >
+                  <div v-if="JSON.parse(scope.row.questionnaireResultDtoList[index].additionalValue).length > 0" class="imgWrap">
                     <el-image
-
-                      v-for="(item,index) in JSON.parse(scope.row.questionnaireResultDtoList[index].additionalValue)"
-                      :key="index"
+                    class="refImg"
+                    ref='refImg'
                       style="width: 50px; height: 50px;margin-right:5px"
-                      :src="item.url"
+                      :src="JSON.parse(scope.row.questionnaireResultDtoList[index].additionalValue)[0].url"
                       :preview-src-list="[
-                        item.url,
+                       ...JSON.parse(scope.row.questionnaireResultDtoList[index].additionalValue).map(item=>{return item.url})
                       ]"
                     >
                     </el-image>
+                    <div class="moreImg">
+                      +{{JSON.parse(scope.row.questionnaireResultDtoList[index].additionalValue).length-1}}
+                    </div>
                   </div>
 
                   <span v-else>--</span>
@@ -200,4 +202,31 @@ export default {
     width: 200px;
   }
 }
+.imgWrap {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+.moreImg {
+  width: 50px;
+  height: 50px;
+  background-color: #999;
+  line-height: 50px;
+  text-align: center;
+  color: #fff;
+}
+
+
+</style>
+<style lang="css">
+.el-image-viewer__close {
+    top: 40px;
+    right: 40px;
+    width: 40px;
+    height: 40px;
+    font-size: 24px;
+    color: #fff;
+    background-color: #606266;
+}
 </style>