书写上传图片

src/views/book/courseware/create/components/question/write/Write.vue

@@ -136,6 +136,9 @@ export default {
         .catch(() => {});
     },
     updateFileList({ file_list, file_id_list, file_info_list }) {
+      file_list.forEach((item) => {
+        item.mark = getRandomNumber();
+      });
       this.data.file_list = file_list;
       this.data.file_id_list = file_id_list;
       this.data.file_info_list = file_info_list;

src/views/book/courseware/create/components/question/write/WriteSetting.vue

@@ -9,13 +9,13 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
-      <!-- <el-form-item label="汉字内容">
+      <el-form-item label="汉字内容">
         <el-radio-group v-model="property.content_type">
           <el-radio v-for="{ value, label } in conList" :key="value" :label="value" :value="value">
             {{ label }}
           </el-radio>
         </el-radio-group>
-      </el-form-item> -->
+      </el-form-item>
       <el-form-item label="框颜色">
         <el-color-picker v-model="property.frame_color"></el-color-picker>
       </el-form-item>

src/views/book/courseware/preview/components/write/WritePreview.vue

@@ -12,7 +12,8 @@
               item.con.trim() &&
               item.hz_strokes_list &&
               item.hz_strokes_list[0] &&
-              item.hz_strokes_list[0].strokes
+              item.hz_strokes_list[0].strokes &&
+              data.property.content_type === 'con'
             "
           >
             <div
@@ -95,6 +96,33 @@
               </div>
             </div>
           </template>
+          <template v-else-if="data.property.content_type === 'upload'">
+            <!-- 书写 -->
+            <div class="card-box">
+              <el-image :src="item.file_url" fit="scale-down" class="img_url" :preview-src-list="[item.file_url]">
+                <div slot="placeholder" class="image-slot">
+                  <img src="@/assets/icon-imgloading.png" />
+                </div>
+              </el-image>
+              <div v-for="(items, indexs) in item.imgArr" :key="'write' + indexs" class="con-box">
+                <div
+                  :class="[
+                    'strockplay-newWord',
+                    (indexs + item.imgArr.length) % writer_number_yuan !== 0 ? 'border-left-none' : '',
+                  ]"
+                  @click="freeWrite(items ? JSON.parse(items) : null, index, indexs, item.mark)"
+                >
+                  <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
+                  <img
+                    v-if="!play_status && items && JSON.parse(items).strokes_image"
+                    class="hanzi-writer-img"
+                    :src="JSON.parse(items).strokes_image"
+                    alt=""
+                  />
+                </div>
+              </div>
+            </div>
+          </template>
         </div>
       </div>
       <div v-if="if_free_show" class="practiceBox practice-box-strock">
@@ -208,6 +236,15 @@ export default {
       deep: true,
       immediate: true,
     },
+    'data.file_list': {
+      handler(val) {
+        if (val.length > 0) {
+          this.handleData();
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
     isJudgingRightWrong: {
       handler(val) {
         if (!val) return;
@@ -226,39 +263,72 @@ export default {
       this.writer_number = this.data.property.write_number ? Number(this.data.property.write_number) : 5;
       this.miao_number = this.data.property.miao_number ? Number(this.data.property.miao_number) : 5;
       let option_list = JSON.parse(JSON.stringify(this.data)).content_list;
+      let img_list = JSON.parse(JSON.stringify(this.data)).file_list;
 
       this.miao_arr = [];
-      option_list.forEach((item, index) => {
-        let arr = [];
-        this.miao_arr.push([]);
-        if (item.con.trim()) {
-          for (let i = 0; i < this.writer_number; i++) {
-            item.hz_strokes_list.forEach((items) => {
-              arr.push(null);
-            });
-          }
-          for (let i = 0; i < this.miao_number; i++) {
-            item.hz_strokes_list.forEach((items) => {
-              this.miao_arr[index].push({
-                strokes: items && items.strokes ? items.strokes : null,
-                length: item.hz_strokes_list.length,
+      if (this.data.property.content_type === 'con') {
+        option_list.forEach((item, index) => {
+          let arr = [];
+          this.miao_arr.push([]);
+          if (item.con.trim()) {
+            for (let i = 0; i < this.writer_number; i++) {
+              item.hz_strokes_list.forEach((items) => {
+                arr.push(null);
               });
-            });
+            }
+            for (let i = 0; i < this.miao_number; i++) {
+              item.hz_strokes_list.forEach((items) => {
+                this.miao_arr[index].push({
+                  strokes: items && items.strokes ? items.strokes : null,
+                  length: item.hz_strokes_list.length,
+                });
+              });
+            }
+            item.imgArr = arr;
+            if (this.isJudgingRightWrong) {
+              item.imgArr = this.data.answer.answer_list.find(
+                (items) => items.mark === item.mark,
+              )?.strokes_content_list;
+            }
           }
-          item.imgArr = arr;
-          if (this.isJudgingRightWrong) {
-            item.imgArr = this.data.answer.answer_list.find((items) => items.mark === item.mark)?.strokes_content_list;
+          let obj = {
+            mark: item.mark,
+            strokes_content_list: arr,
+          };
+          if (!this.isJudgingRightWrong) {
+            this.data.answer.answer_list.push(obj);
           }
-        }
-        let obj = {
-          mark: item.mark,
-          strokes_content_list: arr,
-        };
-        if (!this.isJudgingRightWrong) {
-          this.data.answer.answer_list.push(obj);
-        }
-      });
-      this.option_list = option_list;
+        });
+        this.option_list = option_list;
+      } else {
+        img_list.forEach((item, index) => {
+          let arr = [];
+          this.miao_arr.push([]);
+          if (item.file_id) {
+            for (let i = 0; i < this.writer_number; i++) {
+              // item.hz_strokes_list.forEach((items) => {
+              arr.push(null);
+              // });
+            }
+            item.imgArr = arr;
+            if (this.isJudgingRightWrong) {
+              item.imgArr = this.data.answer.answer_list.find(
+                (items) => items.mark === item.mark,
+              )?.strokes_content_list;
+            }
+          }
+          let obj = {
+            mark: item.mark,
+            strokes_content_list: arr,
+          };
+          if (!this.isJudgingRightWrong) {
+            this.data.answer.answer_list.push(obj);
+          }
+        });
+
+        this.option_list = img_list;
+        console.log(img_list);
+      }
       setTimeout(() => {
         if (document.getElementsByClassName('chinese-preview').length > 0) {
           this.writer_number_yuan = Math.floor(
@@ -452,6 +522,13 @@ export default {
       border: 1px solid #e81b1b;
     }
 
+    .img_url {
+      flex-shrink: 0;
+      width: 64px;
+      height: 64px;
+      border: 1px solid #e81b1b;
+    }
+
     .strockplay-newWord {
       position: relative;
       box-sizing: border-box;