汉字练习改为可以输入词组

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

@@ -31,12 +31,7 @@
             >
               {{ computedQuestionNumber(i, data.option_number_show_mode) }}
             </span>
-            <el-input
-              v-model="item.content"
-              :maxlength="data.property.learn_type === 'dictation' ? null : 1"
-              :placeholder="data.property.learn_type === 'dictation' ? '输入汉字或词汇' : '输入一个汉字'"
-              @blur="handleChineseStrokes(item, i)"
-            />
+            <el-input v-model="item.content" :placeholder="'输入汉字或词汇'" @blur="handleChineseStrokes(item, i)" />
             <el-input
               v-model="item.pinyin"
               :placeholder="data.property.learn_type === 'dictation' ? '拼音间用空格隔开' : '输入拼音'"
@@ -131,12 +126,11 @@
             :key="value"
             v-model="data.property.learn_type"
             :label="value"
-            @change="handleChangeType"
           >
             {{ label }}
           </el-radio>
         </el-form-item>
-        <el-form-item v-if="data.property.learn_type !== 'dictation'" label="田字格数">
+        <el-form-item v-if="data.property.learn_type !== 'dictation'" label="田字格组">
           <el-input
             v-model="data.property.tian_number"
             type="number"
@@ -281,16 +275,6 @@ export default {
           });
       }
     },
-    // 改变类型
-    handleChangeType() {
-      if (this.data.property.learn_type !== 'dictation') {
-        this.data.option_list.forEach((item) => {
-          if (item.content.trim()) {
-            item.content = item.content.substring(0, 1);
-          }
-        });
-      }
-    },
     // 生成汉字
     handleChineseStrokes(item, i) {
       if (item.content.trim()) {

src/views/exercise_questions/data/chinese.js

@@ -52,7 +52,7 @@ export const chineseData = {
     score: 1, // 分值
     score_type: scoreTypeList[0].value, // 分值类型
     learn_type: learnTypeList[0].value,
-    tian_number: 8, // 田字格数
+    tian_number: 8, // 田字格组
   },
   // 其他属性
   other: {

src/views/exercise_questions/preview/ChinesePreview.vue

@@ -17,10 +17,15 @@
             v-if="data.property.learn_type !== 'dictation'"
             class="words-top"
             :style="{
-              width: 64 * (writer_number + 1 > writer_number_yuan ? writer_number_yuan : writer_number + 1) + 'px',
+              width:
+                64 *
+                  ((writer_number + 1) * item.hz_strokes_list.length > writer_number_yuan
+                    ? writer_number_yuan
+                    : (writer_number + 1) * item.hz_strokes_list.length) +
+                'px',
             }"
           >
-            <div class="words-left">
+            <div class="words-left" :style="{ width: '64' * item.hz_strokes_list.length + 'px' }">
               <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
               <span class="pinyin">{{ item.pinyin }}</span>
             </div>
@@ -29,50 +34,49 @@
           </div>
           <div v-if="data.property.learn_type === 'paint'" class="card-box">
             <!-- 描红 -->
-            <Strockplayredline
-              :play-storkes="true"
-              :book-text="item.content"
-              :target-div="'pre' + item.content + index"
-              :book-strokes="item.hz_strokes_list[0].strokes"
-              :class="['strock-chinese', 'border-right-none']"
-            />
-            <Strockred
-              v-for="itemI in writer_number"
-              :key="itemI + data.property.learn_type"
-              :book-text="item.content"
-              :hanzi-color="hanzi_color"
-              :reset="true"
-              :target-div="'write-praT' + item.content + itemI + Math.random().toString(36).substring(2, 10)"
-              :book-strokes="item.hz_strokes_list[0].strokes"
-              :class="[
-                'strock-chinese',
-                (itemI + 1) % writer_number_yuan !== 0 && itemI !== writer_number ? 'border-right-none' : '',
-              ]"
-            />
-            <!-- <div
-              v-for="(items, indexs) in item.imgArr"
-              :key="indexs"
-              :class="['strockplay-newWord border-left-none']"
-              @click="freeWrite(items, index, indexs)"
-            >
-              <SvgIcon icon-class="hanzi-writer-bg" class="character-target-bg" />
-              <img
-                v-if="!play_status && items && items.strokes_image"
-                class="hanzi-writer-img"
-                :src="items.strokes_image"
-                alt=""
+            <template v-for="(items, indexs) in item.hz_strokes_list">
+              <Strockplayredline
+                :key="indexs"
+                :play-storkes="true"
+                :book-text="item.content"
+                :target-div="'pre' + item.content + index + indexs"
+                :book-strokes="items.strokes"
+                :class="['strock-chinese', 'border-right-none']"
               />
-            </div> -->
+            </template>
+
+            <div v-for="itemI in writer_number" :key="itemI + data.property.learn_type + index" style="display: flex">
+              <Strockred
+                v-for="(items, indexs) in item.hz_strokes_list"
+                :key="indexs"
+                :book-text="item.content"
+                :hanzi-color="hanzi_color"
+                :reset="true"
+                :target-div="'write-praT' + item.content + itemI + Math.random().toString(36).substring(2, 10)"
+                :book-strokes="items.strokes"
+                :class="[
+                  'strock-chinese',
+                  ((item.hz_strokes_list.length * (itemI + 1) + indexs - 1) % writer_number_yuan !== 0 &&
+                    itemI !== writer_number) ||
+                  (itemI === writer_number && indexs !== item.hz_strokes_list.length - 1)
+                    ? 'border-right-none'
+                    : '',
+                ]"
+              />
+            </div>
           </div>
           <div v-else-if="data.property.learn_type === 'write'" class="card-box">
             <!-- 书写 -->
-            <Strockplayredline
-              :play-storkes="true"
-              :book-text="item.content"
-              :target-div="'pre' + item.content + index"
-              :book-strokes="item.hz_strokes_list[0].strokes"
-              :class="['strock-chinese']"
-            />
+            <template v-for="(items, indexs) in item.hz_strokes_list">
+              <Strockplayredline
+                :key="'write' + indexs"
+                :play-storkes="true"
+                :book-text="item.content"
+                :target-div="'pre' + item.content + index + indexs"
+                :book-strokes="items.strokes"
+                :class="['strock-chinese', indexs !== item.hz_strokes_list.length - 1 ? 'border-right-none' : '']"
+              />
+            </template>
             <div v-for="(items, indexs) in item.imgArr" :key="indexs" class="con-box">
               <div
                 :class="['strockplay-newWord', (indexs + 1) % writer_number_yuan !== 0 ? 'border-left-none' : '']"
@@ -263,7 +267,9 @@ export default {
           }
         } else if (item.content.trim()) {
           for (let i = 0; i < this.writer_number; i++) {
-            arr.push(null);
+            item.hz_strokes_list.forEach(() => {
+              arr.push(null);
+            });
           }
           if (this.isJudgingRightWrong) {
             item.imgArr = this.answer.answer_list[index].strokes_content_list;