字词卡片汉字笔画

src/views/exercise_questions/create/components/exercises/WordCardQuestion.vue

@@ -45,9 +45,9 @@
               :limit="1"
               ref="uploadDrag"
             ></UploadDrag>
-            <div class="word-card-item">
+            <div class="word-card-item" v-loading="item.loadings">
               <div class="word-card">
-                <el-input v-model="item.content" :placeholder="'输入汉字或词汇'" />
+                <el-input v-model="item.content" :placeholder="'输入汉字或词汇'" @blur="handleChineseStrokes(item)" />
                 <el-input v-model="item.pinyin" :placeholder="'拼音间用空格隔开'" />
                 <UploadAudio
                   v-if="data.other.audio_generation_method === 'upload'"
@@ -280,6 +280,37 @@ export default {
       this.data.option_list[index].picture_file_id = file_id;
       this.$set(this.pic_list, file_id, file_url);
     },
+    // 生成汉字
+    handleChineseStrokes(item) {
+      if (item.content.trim()) {
+        this.$set(item, 'loadings', true);
+        let content_arr = item.content.trim().split('');
+        let content_arrs = [];
+        let content_arr_strokes = [];
+        content_arr.forEach((itemc) => {
+          if (itemc.trim()) {
+            content_arrs.push(itemc.trim());
+          }
+        });
+        content_arrs.forEach((itemc, indexc) => {
+          content_arr_strokes.push(null);
+          let MethodName = 'hz_resource_manager-GetHZStrokesContent';
+          let data = {
+            hz: itemc,
+          };
+          GetStaticResources(MethodName, data).then((res) => {
+            let obj = {
+              hz: itemc.trim(),
+              strokes: res,
+            };
+            content_arr_strokes[indexc] = obj;
+          });
+        });
+        item.loadings = false;
+
+        item.chinese_strokes = content_arr_strokes;
+      }
+    },
   },
 };
 </script>

src/views/exercise_questions/data/wordCard.js

@@ -11,6 +11,7 @@ export function getOption(content = '') {
     rate: null,
     example_sentence: ['', ''],
     picture_file_id: '',
+    chinese_strokes: [],
   };
 }
 

src/views/exercise_questions/preview/WordCardPreview.vue

@@ -26,14 +26,14 @@
         </div>
         <template v-for="(item, index) in data.option_list">
           <div class="strock-box" :key="index" v-if="index === active_index">
-            <div class="strock-left" v-if="item.content_arr_strokes && item.content_arr_strokes.length > 0">
-              <template v-for="(items, indexs) in item.content_arr_strokes">
+            <div class="strock-left" v-if="item.chinese_strokes && item.chinese_strokes.length > 0">
+              <template v-for="(items, indexs) in item.chinese_strokes">
                 <Strockplayredline
                   :play-storkes="true"
                   :book-text="items.hz"
                   :target-div="'pre' + items.hz + indexs + active_index"
                   :book-strokes="items.strokes"
-                  :class="['strock-chinese', indexs !== item.content_arr_strokes.length - 1 ? 'border-right-none' : '']"
+                  :class="['strock-chinese', indexs !== item.chinese_strokes.length - 1 ? 'border-right-none' : '']"
                   :key="indexs"
                   v-if="items"
                 />
@@ -103,7 +103,6 @@ export default {
   },
   watch: {},
   created() {
-    console.log(this.data);
     this.handleData();
   },
   mounted() {},
@@ -124,29 +123,29 @@ export default {
         };
         item.definition_preview = item.definition.split('\n');
         this.answer_list.push(obj);
-        let content_arr = item.content.trim().split('');
-        let content_arrs = [];
-        let content_arr_strokes = [];
-        content_arr.forEach((itemc) => {
-          if (itemc.trim()) {
-            content_arrs.push(itemc.trim());
-          }
-        });
-        content_arrs.forEach((itemc, indexc) => {
-          content_arr_strokes.push(null);
-          let MethodName = 'hz_resource_manager-GetHZStrokesContent';
-          let data = {
-            hz: itemc,
-          };
-          GetStaticResources(MethodName, data).then((res) => {
-            let obj = {
-              hz: itemc.trim(),
-              strokes: res,
-            };
-            content_arr_strokes[indexc] = obj;
-          });
-        });
-        item.content_arr_strokes = content_arr_strokes;
+        // let content_arr = item.content.trim().split('');
+        // let content_arrs = [];
+        // let content_arr_strokes = [];
+        // content_arr.forEach((itemc) => {
+        //   if (itemc.trim()) {
+        //     content_arrs.push(itemc.trim());
+        //   }
+        // });
+        // content_arrs.forEach((itemc, indexc) => {
+        //   content_arr_strokes.push(null);
+        //   let MethodName = 'hz_resource_manager-GetHZStrokesContent';
+        //   let data = {
+        //     hz: itemc,
+        //   };
+        //   GetStaticResources(MethodName, data).then((res) => {
+        //     let obj = {
+        //       hz: itemc.trim(),
+        //       strokes: res,
+        //     };
+        //     content_arr_strokes[indexc] = obj;
+        //   });
+        // });
+        // item.content_arr_strokes = content_arr_strokes;
       });
     },
   },