生字-输入预览

src/views/book/courseware/create/components/question/newWord_template/NewWordTemplate.vue

@@ -141,7 +141,7 @@
               </template>
               <template v-if="isEnable(data.property.is_enable_high_strokes) && data.property.model === 'input'">
                 <span>高亮笔画</span>
-                <el-input v-model="items.shiyi" placeholder="多笔用、隔开"></el-input>
+                <el-input v-model="items.high_strokes" placeholder="多笔用、隔开"></el-input>
               </template>
             </div>
           </template>
@@ -244,6 +244,7 @@ export default {
                   is_example: false,
                   is_can_input_answer: true,
                   is_can_input_pinyin: true,
+                  high_strokes: '',
                 };
               } else if (item === '#') {
                 // 书写
@@ -259,6 +260,7 @@ export default {
                   answer_pinyin: '',
                   answer_en: '',
                   is_can_input_answer: true,
+                  high_strokes: '',
                 };
               } else if (regex.test(item)) {
                 // 汉字
@@ -282,6 +284,7 @@ export default {
                   answer_pinyin: '',
                   answer_en: '',
                   is_can_input_answer: true,
+                  high_strokes: '',
                 };
               } else {
                 // 连字符
@@ -295,6 +298,7 @@ export default {
                   answer_en: '',
                   is_example: false,
                   is_can_input_answer: true,
+                  high_strokes: '',
                 };
               }
               this.$set(items.content_list, index, objs);

src/views/book/courseware/preview/components/newWord_template/NewWordTemplatePreview.vue

@@ -4,50 +4,126 @@
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
     <div class="main">
-      <div class="item-box" v-for="(item, index) in data.option_list" :key="index">
-        <div class="number-box" :style="{ marginTop: isEnable(data.property.is_enable_pinyin) ? '30px' : '' }">
-          <span class="number">{{ index + 1 }}</span>
-        </div>
+      <div
+        class="item-box"
+        :class="['item-box-' + data.property.model]"
+        v-for="(item, index) in data.option_list"
+        :key="index"
+      >
         <div
-          class="items"
-          :class="[items.is_example ? 'items-example' : '']"
-          v-for="(items, indexs) in item.content_list"
-          :key="indexs"
+          class="number-box"
+          :style="{
+            marginTop: isEnable(data.property.is_enable_pinyin)
+              ? '30px'
+              : data.answer_type.indexOf('pinyin') > -1 && data.property.model === 'input'
+                ? '52px'
+                : '',
+          }"
         >
-          <div v-if="isEnable(data.property.is_enable_pinyin)" class="pinyin">{{ items.pinyin }}</div>
-          <div class="items-content">
-            <template v-if="items && items.type === 'img'">
-              <el-image
-                class="items-image"
-                v-if="items.file_list[0]"
-                :src="items.file_list[0].file_url"
-                fit="contain"
-              ></el-image>
-            </template>
-            <template v-else-if="items && items.type === 'lian'">
-              <span class="items-lian">{{ items.con }}</span>
-            </template>
-            <Strockplayredline
-              v-if="items && items.type === 'hanzi'"
-              :Book_text="items.con"
-              :playStorkes="isEnable(data.property.is_enable_play_structure)"
-              :curItem="isEnable(data.property.is_enable_high_strokes) ? userAnswer[index][indexs] : null"
-              :type="data.type"
-              :targetDiv="'newWordTemplate' + items.con + index + indexs"
-              :hz_json="items.hz_info[0].hzDetail.hz_json"
-              class="hanzi-storck"
+          <span class="number">{{ index + 1 }}</span>
+        </div>
+        <div class="pinyin-en" :class="[item.is_example ? 'item-example' : '']">
+          <div
+            v-if="isEnable(data.property.is_enable_pinyin) && data.property.model === 'input' && item.is_common_pinyin"
+            class="pinyin"
+          >
+            {{ item.pinyin }}
+          </div>
+          <div
+            class="inputdv pinyin-common"
+            v-if="data.answer_type.indexOf('pinyin') > -1 && data.property.model === 'input' && item.is_common_pinyin"
+          >
+            <EditDiv
+              :id="'b' + item.content + index"
+              :canEdit="!item.is_example"
+              v-model="userAnswer[index].answer_pinyin"
+              :textAlign="'center'"
+              @input="changeAnswer(item, index)"
             />
           </div>
-          <div class="inputdv">
+          <div class="items-flex">
+            <div
+              class="items"
+              :class="[items.is_example ? 'items-example' : '']"
+              v-for="(items, indexs) in item.content_list"
+              :key="indexs"
+            >
+              {{ items.high_strokes }}
+              <div v-if="isEnable(data.property.is_enable_pinyin)" class="pinyin">{{ items.pinyin }}</div>
+              <div
+                class="inputdv pinyin-common"
+                v-if="
+                  data.answer_type.indexOf('pinyin') > -1 && data.property.model === 'input' && !item.is_common_pinyin
+                "
+              >
+                <EditDiv
+                  :id="'c' + items.con + index + indexs"
+                  :canEdit="!items.is_example"
+                  v-model="userAnswer[index].item[indexs].answer_pinyin"
+                  :textAlign="'center'"
+                  @input="changeAnswer(item, index, indexs)"
+                />
+              </div>
+              <div class="items-content">
+                <template v-if="items && items.type === 'img'">
+                  <el-image
+                    class="items-image"
+                    v-if="items.file_list[0]"
+                    :src="items.file_list[0].file_url"
+                    fit="contain"
+                  ></el-image>
+                </template>
+                <template v-else-if="items && items.type === 'lian'">
+                  <span class="items-lian">{{ items.con }}</span>
+                </template>
+                <Strockplayredline
+                  v-if="items && items.type === 'hanzi'"
+                  :Book_text="items.con"
+                  :playStorkes="isEnable(data.property.is_enable_play_structure)"
+                  :curItem="
+                    isEnable(data.property.is_enable_high_strokes)
+                      ? data.property.model === 'input'
+                        ? items.high_strokes
+                        : userAnswer[index].item[indexs]
+                      : null
+                  "
+                  :type="data.property.model === 'input' ? 'newWord-template-input' : data.type"
+                  :targetDiv="'newWordTemplate' + items.con + index + indexs"
+                  :hz_json="items.hz_info[0].hzDetail.hz_json"
+                  class="hanzi-storck"
+                  :class="[
+                    item.content_list.length > 1 && indexs == 0 ? 'leftBorderRadius' : '',
+
+                    item.content_list.length > 1 && indexs == item.content_list.length - 1 ? 'rightBorderRadius' : '',
+                    item.content_list.length > 1 && indexs != item.content_list.length - 1 && indexs != 0
+                      ? 'NoborderRadius'
+                      : '',
+                    item.content_list.length > 1 && indexs != item.content_list.length - 1 ? 'NoborderRight' : '',
+                  ]"
+                />
+              </div>
+              <div class="inputdv" v-if="data.property.model === 'miao'">
+                <EditDiv
+                  v-if="items && items.type === 'hanzi' && items.is_can_input_answer"
+                  :id="'a' + items.con + index + indexs"
+                  :canEdit="!items.is_example"
+                  v-model="userAnswer[index].item[indexs].answer"
+                  :textAlign="'center'"
+                  @input="changeAnswer(items, index, indexs)"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="inputdv en-common" v-if="data.answer_type.indexOf('en') > -1 && data.property.model === 'input'">
             <EditDiv
-              v-if="items && items.type === 'hanzi' && items.is_can_input_answer"
-              :id="'a' + items.con + index + indexs"
-              :canEdit="!items.is_example"
-              v-model="userAnswer[index][indexs].answer"
+              :id="'d' + item.content + index"
+              :canEdit="!item.is_example"
+              v-model="userAnswer[index].answer_en"
               :textAlign="'center'"
-              @input="changeAnswer(items, index, indexs)"
+              @input="changeAnswer(item, index)"
             />
           </div>
+          <div class="en-common" v-if="data.property.model === 'input'">{{ item.shiyi }}</div>
         </div>
       </div>
     </div>
@@ -119,7 +195,11 @@ export default {
             });
           }
         });
-        answer_list.push(arr);
+        answer_list.push({
+          answer_pinyin: item.is_example ? item.answer_pinyin : '',
+          answer_en: item.is_example ? item.answer_en : '',
+          item: arr,
+        });
       });
       this.userAnswer = answer_list;
     },
@@ -209,10 +289,56 @@ export default {
     }
   }
 
-  .items-example {
+  .items-example,
+  .item-example {
     :deep .edit-div {
       color: #346cda;
     }
   }
+
+  .items-flex {
+    display: flex;
+    gap: 5px;
+  }
+
+  .item-box-input {
+    .items-flex {
+      gap: 0;
+    }
+
+    .NoborderRadius {
+      border-radius: 0;
+    }
+
+    .rightBorderRadius {
+      border-radius: 0;
+      border-top-right-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+
+    .leftBorderRadius {
+      border-radius: 0;
+      border-top-left-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+
+    .NoborderRight {
+      border-right: none;
+    }
+  }
+
+  .pinyin-common {
+    margin-bottom: 5px;
+
+    :deep .edit-div {
+      font-family: 'League';
+    }
+  }
+
+  .en-common {
+    margin-top: 8px;
+    text-align: center;
+    word-break: break-word;
+  }
 }
 </style>

src/views/book/courseware/preview/components/newWord_template/components/Strockplayredline.vue

@@ -94,7 +94,9 @@ export default {
           strokeColor: _this.strokeColor ? (_this.judgeAnswer ? 'rgba(44, 44, 44, 0.45)' : _this.strokeColor) : '#333',
           radicalColor: _this.judgeAnswer ? '#333' : '#ED5050',
           charDataLoader: function (char, onComplete) {
-            let charData = _this.handleData(_this.curItem.answer);
+            let charData = _this.handleData(
+              _this.type === 'newWord-template-input' ? _this.curItem : _this.curItem.answer,
+            );
             onComplete(charData);
           },
         });
@@ -120,7 +122,7 @@ export default {
         let charData = JSON.parse(JSON.stringify(this.hz_json));
         if (stroke_num) {
           let stroke_arr = null;
-          if (this.type == 'newWord_template') {
+          if (this.type === 'newWord_template' || this.type === 'newWord-template-input') {
             stroke_arr = stroke_num.split('、');
           } else {
             stroke_arr = stroke_num.split('#');