离线考试图片阅卷

src/modules/marking/views/TpMain.vue

@@ -148,12 +148,52 @@ export default {
         } else if (url.indexOf(".zip") > -1) {
           content = "<a href='" + url + "'>下载</a>";
         } else if (/(.*)\.(jpg|gif|jpeg|png)$/.test(url)) {
-          //content = url;
+          content = this.parseImgs(url);
         }
       }
 
       return content;
     },
+    parseImgs(urls) {
+      let uuid = this.generateUUID();
+      let group1 = [],
+        group2 = [];
+
+      let elements = urls.split(",");
+      for (let n = 0; n < elements.length; n++) {
+        let url = elements[n];
+
+        group1.push(
+          "<a onclick=\"window.viewPicture('#pic-" +
+            uuid +
+            "','" +
+            n +
+            '\')" target="_blank"><img class="photo-answer" src="' +
+            url +
+            '?x-oss-process=image/resize,m_lfit,h_200,w_200"/></a>'
+        );
+
+        group2.push('<img src="' + url + '"/>');
+      }
+
+      let html =
+        '<div class="photo-answers-block">' +
+        group1.join("") +
+        '</div><div id="pic-' +
+        uuid +
+        '" style="display:none">' +
+        group2.join("") +
+        "</div>";
+      return html;
+    },
+    generateUUID() {
+      let date = new Date().getTime();
+      return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+        let r = (date + Math.random() * 16) % 16 | 0;
+        date = Math.floor(date / 16);
+        return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
+      });
+    },
     createMarkDraw() {
       console.log("create");
       var drawing = {};