图片放大

src/components/Adult/phonePreview/DialogueArticleViewChs/DialogueAnswerViewChs.vue

@@ -67,7 +67,7 @@
                   }"
                   :src="item.img_list[0].id"
                   fit="scale-down"
-                  :preview-src-list="[item.img_list[0].id]"
+                  @click="imgShow(item.img_list[0].id)"
                 ></el-image>
               </div>
               <div class="dialogue-answer-model">
@@ -137,7 +137,7 @@
                   }"
                   :src="item.img_list[0].id"
                   fit="scale-down"
-                  :preview-src-list="[item.img_list[0].id]"
+                  @click="imgShow(item.img_list[0].id)"
                 ></el-image>
               </div>
               <div class="dialogue-answer-model">
@@ -187,6 +187,11 @@
         </div>
       </div>
     </template>
+    <img-preview
+      v-if="imgPreviewDialog"
+      :imgPreviewSrc="imgPreviewSrc"
+      @closeImgPreview="closeImgPreview"
+    ></img-preview>
   </div>
 </template>
 
@@ -198,6 +203,7 @@ import Soundrecord from "../Soundrecord.vue";
 import AnswerModel from "./AnswerModel.vue";
 import OptionModel from "./OptionModel.vue";
 import WordcardModel from "./WordcardModel.vue";
+import ImgPreview from "../components/ImgPreview.vue";
 
 export default {
   name: "DialogueAnswerViewChs",
@@ -208,7 +214,8 @@ export default {
     Soundrecord,
     AnswerModel,
     OptionModel,
-    WordcardModel
+    WordcardModel,
+    ImgPreview
   },
   props: [
     "curQue",
@@ -228,7 +235,9 @@ export default {
         judge: []
       },
       judgeAnswersList: [],
-      userErrorNumberTotal: 0
+      userErrorNumberTotal: 0,
+      imgPreviewDialog: false,
+      imgPreviewSrc: ""
     };
   },
   computed: {
@@ -347,6 +356,13 @@ export default {
         userErrorNumberTotal = errorArr.length;
       }
       return userErrorNumberTotal;
+    },
+    imgShow(id) {
+      this.imgPreviewDialog = true;
+      this.imgPreviewSrc = id;
+    },
+    closeImgPreview() {
+      this.imgPreviewDialog = false;
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）

src/components/Adult/phonePreview/DialogueArticleViewChs/RemarkChs.vue

@@ -39,24 +39,41 @@
         }"
         :src="remarkDetail.img_list[0].id"
         fit="contain"
-        :preview-src-list="[remarkDetail.img_list[0].id]"
+        @click="imgShow(remarkDetail.img_list[0].id)"
       ></el-image>
     </div>
+    <img-preview
+      v-if="imgPreviewDialog"
+      :imgPreviewSrc="imgPreviewSrc"
+      @closeImgPreview="closeImgPreview"
+    ></img-preview>
   </div>
 </template>
 
 <script>
+import ImgPreview from "../components/ImgPreview.vue";
 export default {
   name: "RemarkChs",
-  components: {},
+  components: { ImgPreview },
   props: ["remarkDetail", "marginTop", "baseSizePhone"],
   data() {
-    return {};
+    return {
+      imgPreviewDialog: false,
+      imgPreviewSrc: ""
+    };
   },
   computed: {},
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    imgShow(id) {
+      this.imgPreviewDialog = true;
+      this.imgPreviewSrc = id;
+    },
+    closeImgPreview() {
+      this.imgPreviewDialog = false;
+    }
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）

src/components/Adult/phonePreview/InputHasRecord.vue

@@ -965,4 +965,9 @@ export default {
     }
   }
 }
+.InputHasRecordNPC-phone {
+  .el-textarea__inner {
+    background: transparent;
+  }
+}
 </style>

src/components/Adult/phonePreview/Notes.vue

@@ -90,7 +90,7 @@
                 :src="imgItem.id"
                 fit="scale-down"
                 class="img_url"
-                :preview-src-list="[imgItem.id]"
+                @click="imgShow(imgItem.id)"
               >
                 <div slot="placeholder" class="image-slot">
                   <img src="../../../assets/common/icon-imgloading.png" />
@@ -101,6 +101,11 @@
         </div>
       </div>
     </el-collapse-transition>
+    <img-preview
+      v-if="imgPreviewDialog"
+      :imgPreviewSrc="imgPreviewSrc"
+      @closeImgPreview="closeImgPreview"
+    ></img-preview>
   </div>
 </template>
 
@@ -109,11 +114,13 @@
 //例如：import 《组件名称》from ‘《组件路径》';
 import WordPhraseDetail from "./components/WordPhraseDetail.vue";
 import OneSentenceTemp from "./components/OneSentenceTemp.vue";
+import ImgPreview from "./components/ImgPreview.vue";
 export default {
   //import引入的组件需要注入到对象中才能使用
   components: {
     WordPhraseDetail,
-    OneSentenceTemp
+    OneSentenceTemp,
+    ImgPreview
   },
   props: ["curQue", "TaskModel", "baseSizePhone"],
   data() {
@@ -123,7 +130,9 @@ export default {
         ? this.curQue.isWordShow
         : true,
       chsFhList: ["，", "。", "“", "：", "》", "？", "！", "；"],
-      titleChsFhList: ["，", "”", "。", "：", "》", "？", "！", "；"]
+      titleChsFhList: ["，", "”", "。", "：", "》", "？", "！", "；"],
+      imgPreviewDialog: false,
+      imgPreviewSrc: ""
     };
   },
   //计算属性 类似于data概念
@@ -142,6 +151,13 @@ export default {
       } else {
         sItem.isShow = true;
       }
+    },
+    imgShow(id) {
+      this.imgPreviewDialog = true;
+      this.imgPreviewSrc = id;
+    },
+    closeImgPreview() {
+      this.imgPreviewDialog = false;
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）

src/components/Adult/phonePreview/Picture.vue

@@ -35,8 +35,7 @@
           :src="itemss.id"
           fit="scale-down"
           class="img_url"
-          @click="playmicrophone(items.mp3_list[0].id, 'mp3')"
-          :preview-src-list="[itemss.id]"
+          @click="imgShow(itemss.id)"
         >
           <div slot="placeholder" class="image-slot">
             <img src="../../../assets/common/icon-imgloading.png" />
@@ -397,6 +396,7 @@
           ></span>
         </template>
         <Soundrecord
+          v-if="fn_list_obj.indexOf('image_record') > -1 || items.RecordControl"
           @handleWav="handleWav"
           :answerRecordList="
             judgeAnswer != 'standardAnswer'
@@ -406,23 +406,25 @@
           :TaskModel="TaskModel"
           :type="'mini'"
           class="luyin-box"
-          :class="[items.RecordControl]"
-          v-if="fn_list_obj.indexOf('image_record') > -1 || items.RecordControl"
+          :class="items.RecordControl"
           :baseSizePhone="baseSizePhone"
         />
-        <!-- <span :class="['luyin',microphoneStatus?'active':'']" @click="microphone"></span>
-                    <span :class="['play',hasMicro]" @click="playmicrophone(wavblob)"></span> -->
       </div>
     </li>
-    <!-- </ul> -->
+    <img-preview
+      v-if="imgPreviewDialog"
+      :imgPreviewSrc="imgPreviewSrc"
+      @closeImgPreview="closeImgPreview"
+    ></img-preview>
   </div>
 </template>
 
 <script>
 import Soundrecord from "../phonePreview/Soundrecord.vue"; // 录音模板
 import Recorder from "js-audio-recorder"; //录音插件
+import ImgPreview from "./components/ImgPreview.vue";
 export default {
-  components: { Soundrecord },
+  components: { Soundrecord, ImgPreview },
   props: ["curQue", "ChildType", "TaskModel", "judgeAnswer", "baseSizePhone"],
   data() {
     return {
@@ -446,7 +448,9 @@ export default {
       audio: new window.Audio(),
       oldUrl: null, // 存储上个播放音频地址
       mp3Play: "", // 音频播放
-      userErrorNumberTotal: 0
+      userErrorNumberTotal: 0,
+      imgPreviewDialog: false,
+      imgPreviewSrc: ""
     };
   },
   computed: {
@@ -851,6 +855,14 @@ export default {
     handleWav(list, tmIndex) {
       tmIndex = tmIndex ? tmIndex : 0;
       this.$set(this.curQue.Bookanswer[tmIndex], "recordList", list);
+    },
+
+    imgShow(id) {
+      this.imgPreviewDialog = true;
+      this.imgPreviewSrc = id;
+    },
+    closeImgPreview() {
+      this.imgPreviewDialog = false;
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）

src/components/Adult/phonePreview/UploadControlView.vue

@@ -18,7 +18,7 @@
               style="width: 100%; height: 100%"
               :src="curQue.Bookanswer.file_url"
               :fit="'contain'"
-              :preview-src-list="[curQue.Bookanswer.file_url]"
+              @click="imgShow(curQue.Bookanswer.file_url)"
             >
             </el-image>
             <!-- <img :src="curQue.Bookanswer.file_url" alt="" /> -->
@@ -56,7 +56,7 @@
               style="width: 100%; height: 100%"
               :src="curQue.data.id"
               :fit="'contain'"
-              :preview-src-list="[curQue.data.id]"
+              @click="imgShow(curQue.data.id)"
             >
             </el-image>
             <!-- <img :src="curQue.data.id" alt="" /> -->
@@ -143,6 +143,11 @@
         border="none"
       ></iframe>
     </el-dialog>
+    <img-preview
+      v-if="imgPreviewDialog"
+      :imgPreviewSrc="imgPreviewSrc"
+      @closeImgPreview="closeImgPreview"
+    ></img-preview>
   </div>
 </template>
 
@@ -151,11 +156,13 @@ import UploadView from "../common/UploadView.vue";
 import pdf from "vue-pdf";
 import { getToken, getConfig } from "../../../utils/auth";
 const Base64 = require("js-base64").Base64;
+import ImgPreview from "./components/ImgPreview.vue";
 
 export default {
   components: {
     UploadView,
-    pdf
+    pdf,
+    ImgPreview
   },
   props: ["curQue", "fn_data", "type", "TaskModel"],
   data() {
@@ -179,7 +186,9 @@ export default {
       },
       loading: false,
       file_preview_url: "",
-      showIframe: false
+      showIframe: false,
+      imgPreviewDialog: false,
+      imgPreviewSrc: ""
     };
   },
   computed: {},
@@ -282,6 +291,13 @@ export default {
       if (!this.curQue.Bookanswer) {
         this.$set(this.curQue, "Bookanswer", single);
       }
+    },
+    imgShow(id) {
+      this.imgPreviewDialog = true;
+      this.imgPreviewSrc = id;
+    },
+    closeImgPreview() {
+      this.imgPreviewDialog = false;
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）