注释上传图片

src/components/Adult/common/Upload.vue

@@ -50,7 +50,7 @@ export default {
       accept: "",
       fileTypeName: "",
       uploadName: "",
-      loading: false
+      loading: false,
     };
   },
   computed: {
@@ -75,7 +75,7 @@ export default {
         SessionID +
         "&SecurityLevel=Mid"
       );
-    }
+    },
   },
   watch: {
     datafileList: {
@@ -83,8 +83,8 @@ export default {
         this.initUpload();
       },
       // 深度观察监听
-      deep: true
-    }
+      deep: true,
+    },
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -127,12 +127,12 @@ export default {
         lock: true,
         text: "Loading",
         spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)"
+        background: "rgba(0, 0, 0, 0.7)",
       });
     },
     handleRemove(file, fileList) {
       console.log(fileList);
-      this.changeFillId(fileList);
+      this.changeFillId(fileList, "", this.index);
       this.$message.success("移除成功");
     },
     beforeRemove(file, fileList) {
@@ -143,48 +143,49 @@ export default {
       this.$message.warning(
         `当前限制选择 ${
           this.filleNumber ? this.filleNumber : 1
-        } 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length +
-          fileList.length} 个文件`
+        } 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`
       );
     },
     initUpload() {
       this.fileList = this.datafileList || [];
-      let name = '只能上传';
+      let name = "只能上传";
       switch (this.uploadType) {
         case "image":
           this.accept = "image/*";
           this.fileTypeName = "图片";
-          this.uploadName = name + '图片';
+          this.uploadName = name + "图片";
           break;
         case "mp3":
           this.accept = "audio/*";
           this.fileTypeName = "音频";
-          this.uploadName = name + '音频';
+          this.uploadName = name + "音频";
           break;
         case "pdf":
           this.accept = ".pdf";
           this.fileTypeName = "pdf";
-          this.uploadName = name + 'pdf';
+          this.uploadName = name + "pdf";
           break;
         case "xls":
           this.accept = ".xls,.xlsx";
           this.fileTypeName = "表格";
-          this.uploadName = name + '表格';
+          this.uploadName = name + "表格";
           break;
         case "lrc":
           this.accept = ".lrc";
           this.fileTypeName = "lrc";
-          this.uploadName = name + 'lrc';
+          this.uploadName = name + "lrc";
           break;
 
         default:
           this.accept = "*";
           this.fileTypeName = "文件";
-          this.uploadName = '';
+          this.uploadName = "";
           break;
       }
-    }
-  } // 如果页面有keep-alive缓存功能，这个函数会触发
+    },
+  }, // 如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang="scss" scoped>

src/components/Adult/inputModules/Notes.vue

@@ -62,6 +62,16 @@
             @blur="onBlur(curQueItem, 'note')"
           ></el-input>
         </div>
+        <div class="adult-book-input-item">
+          <span class="adult-book-lable"></span>
+          <Upload
+            :changeFillId="changeImage"
+            :datafileList="curQueItem.img_list"
+            :filleNumber="imgNumber"
+            :uploadType="'image'"
+            :index="index"
+          />
+        </div>
       </div>
       <div class="addoption" @click="addoption">添加注释</div>
     </div>
@@ -69,12 +79,18 @@
 </template>
 
 <script>
+import Upload from "../common/Upload.vue";
 export default {
   name: "Single",
   props: ["curQue", "changeCurQue"],
-  components: {},
+  components: { Upload },
   data() {
     return {
+      imgNumber: 10000,
+      fileCon: {
+        img_list: [],
+        mp3_list: [],
+      },
       data_structure: {
         type: "notes_chs",
         name: "注释",
@@ -85,6 +101,7 @@ export default {
             con: "", //内容
             interpret: "", //翻译
             note: "", //注释详情
+            img_list: [],
           },
         ],
       },
@@ -111,6 +128,25 @@ export default {
       }
       this.curQue.option.splice(index, 1);
     },
+
+    changeImage(fileList, duration, index) {
+      console.log(fileList);
+      const articleImgList = JSON.parse(JSON.stringify(fileList));
+      const articleImgRes = [];
+      articleImgList.forEach((item) => {
+        if (item.response) {
+          const obj = {
+            name: item.name,
+            url: item.response.file_info_list[0].file_url,
+            id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
+          };
+          articleImgRes.push(obj);
+        }
+      });
+      this.curQue.option[index].img_list = JSON.parse(
+        JSON.stringify(articleImgRes)
+      );
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -119,6 +155,8 @@ export default {
     if (!this.curQue) {
       let res_data = JSON.parse(JSON.stringify(this.data_structure));
       this.changeCurQue(res_data);
+    } else {
+      //this.fileCon;
     }
   },
   beforeCreate() {}, //生命周期 - 创建之前

src/components/Adult/preview/Notes.vue

@@ -38,9 +38,20 @@
             <div class="NPC-notes-trans">
               {{ item.interpret }}
             </div>
-            <div class="NPC-notes-note">
+            <div class="NPC-notes-note" v-if="item.note">
               {{ item.note }}
             </div>
+            <div
+              class="NPC-notes-note"
+              v-if="item.img_list && item.img_list.length > 0"
+            >
+              <div
+                v-for="(imgItem, imgIndex) in item.img_list"
+                :key="'imgList' + imgIndex"
+              >
+                <img :src="imgItem.id" class="NPC-notes-img" />
+              </div>
+            </div>
           </div>
         </div>
       </el-collapse-item>
@@ -69,7 +80,9 @@ export default {
   //监控data中数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    handleChange() {},
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
@@ -153,15 +166,18 @@ export default {
         align-items: center;
         margin-bottom: 8px;
         > span {
-          font-family: "GB-PINYINOK-B";
           font-style: normal;
           font-weight: normal;
           font-size: 14px;
           line-height: 150%;
           color: #e35454;
+          &.NPC-notes-con-number {
+            font-family: "robot";
+          }
           &.NPC-notes-con-text {
             flex: 1;
             margin-left: 5px;
+            font-family: "GB-PINYINOK-B";
           }
         }
       }