生字id

src/views/book/courseware/preview/components/character/CharacterPreview.vue

@@ -6,10 +6,10 @@
     <div class="main">
       <template v-if="data.property.model === 'write'">
         <div
-          class="item-box"
-          :class="[!item.is_margin ? 'item-box-write' : '']"
           v-for="(item, index) in data.option_list"
           :key="index"
+          class="item-box"
+          :class="[!item.is_margin ? 'item-box-write' : '']"
         >
           <div
             class="number-box"
@@ -24,18 +24,18 @@
               {{ item.pinyin }}
             </div>
             <div class="items-flex">
-              <div class="items" v-for="(items, indexs) in item.content_list" :key="indexs">
+              <div v-for="(items, indexs) in item.content_list" :key="indexs" class="items">
                 <div v-if="isEnable(data.property.view_pinyin) && !item.is_common_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]"
+                      class="items-image"
                       :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>
@@ -43,8 +43,8 @@
                   <Strockplayredline
                     v-if="items && items.type === 'hanzi'"
                     :Book_text="items.con"
-                    :playStorkes="isEnable(data.property.is_enable_play_structure)"
-                    :curItem="
+                    :play-storkes="isEnable(data.property.is_enable_play_structure)"
+                    :cur-item="
                       isEnable(data.property.is_enable_high_strokes)
                         ? data.property.model === 'input'
                           ? items.high_strokes
@@ -52,9 +52,9 @@
                         : null
                     "
                     :type="data.property.model === 'input' ? 'newWord-template-input' : data.type"
-                    :targetDiv="'newWordTemplates' + items.con + index + indexs"
+                    :target-div="'newWordTemplates' + items.con + index + indexs + Math.random().toString(36)"
                     :hz_json="items.hz_info[0].hzDetail.hz_json"
-                    :bgType="data.property.frame_type"
+                    :bg-type="data.property.frame_type"
                     class="hanzi-storck"
                     :class="[
                       !item.is_margin && item.content_list.length > 1 && indexs == 0 ? 'leftBorderRadius' : '',
@@ -75,6 +75,7 @@
                   />
 
                   <div
+                    v-if="items && items.type === 'write'"
                     :class="[
                       'strockplay-newWord',
                       !item.is_margin && item.content_list.length > 1 && indexs == 0 ? 'leftBorderRadius' : '',
@@ -92,7 +93,6 @@
                         ? 'NoborderRight'
                         : '',
                     ]"
-                    v-if="items && items.type === 'write'"
                     @click="
                       freeWrite(
                         userAnswer[index][indexs].imgArr ? userAnswer[index][indexs].imgArr : null,
@@ -102,14 +102,14 @@
                     "
                   >
                     <SvgIcon
+                      v-if="data.property.frame_type === 'tian'"
                       icon-class="hanzi-writer-bg"
                       class="character-target-bg"
-                      v-if="data.property.frame_type === 'tian'"
                     />
                     <SvgIcon
+                      v-else-if="data.property.frame_type === 'mi'"
                       icon-class="mi"
                       class="character-target-bg"
-                      v-else-if="data.property.frame_type === 'mi'"
                     />
                     <img
                       v-if="
@@ -135,11 +135,11 @@
             <div class="words-top">
               <div class="words-left" :style="{}">
                 <AudioPlay
+                  v-if="isEnable(data.property.is_enable_voice)"
                   :file-id="item.audio_file_id"
                   theme-color="gray"
-                  v-if="isEnable(data.property.is_enable_voice)"
                 />
-                <span class="pinyin" v-if="isEnable(data.property.view_pinyin) && item.is_common_pinyin">{{
+                <span v-if="isEnable(data.property.view_pinyin) && item.is_common_pinyin" class="pinyin">{{
                   item.pinyin
                 }}</span>
               </div>
@@ -153,13 +153,13 @@
                   </div> -->
                   <Strockplayredline
                     :Book_text="items.con"
-                    :playStorkes="isEnable(data.property.is_enable_stroke)"
-                    :curItem="null"
-                    :targetDiv="'newWordTemplates' + items.con + index + indexs"
+                    :play-storkes="isEnable(data.property.is_enable_stroke)"
+                    :cur-item="null"
+                    :target-div="'newWordTemplates' + items.con + index + indexs + Math.random().toString(36)"
                     :hz_json="items.hz_info[0].hzDetail.hz_json"
                     class="hanzi-storck"
                     :class="['strock-chinese', 'border-right-none']"
-                    :bgType="data.property.frame_type"
+                    :bg-type="data.property.frame_type"
                   />
                 </div>
               </template>
@@ -180,7 +180,7 @@
                   :target-div="'write-praT' + Math.random().toString(36).substring(2, 10)"
                   :book-strokes="itemI.strokes"
                   :class="['strock-chinese']"
-                  :bgType="data.property.frame_type"
+                  :bg-type="data.property.frame_type"
                 />
                 <Strockplayredlines
                   v-else
@@ -190,7 +190,7 @@
                   :book-strokes="itemI.strokes"
                   :stroke-color="'#ddd'"
                   :class="['strock-chinese']"
-                  :bgType="data.property.frame_type"
+                  :bg-type="data.property.frame_type"
                 />
               </div>
               <!-- 书写 -->
@@ -208,11 +208,11 @@
                   "
                 >
                   <SvgIcon
+                    v-if="data.property.frame_type === 'tian'"
                     icon-class="hanzi-writer-bg"
                     class="character-target-bg"
-                    v-if="data.property.frame_type === 'tian'"
                   />
-                  <SvgIcon icon-class="mi" class="character-target-bg" v-else-if="data.property.frame_type === 'mi'" />
+                  <SvgIcon v-else-if="data.property.frame_type === 'mi'" icon-class="mi" class="character-target-bg" />
                   <img
                     v-if="
                       !play_status &&
@@ -227,7 +227,7 @@
                 </div>
               </div>
             </div>
-            <div class="words-bottom" v-if="item.shiyi && isEnable(data.property.is_enable_shiyi)">
+            <div v-if="item.shiyi && isEnable(data.property.is_enable_shiyi)" class="words-bottom">
               {{ item.shiyi }}
             </div>
           </div>
@@ -243,11 +243,11 @@
           :col-index="active_col_index"
           :disabled="disabled"
           :show-play="isEnable(data.property.is_enable_play_back)"
+          :bg-type="data.property.frame_type"
           @closeIfFreeShow="closeIfFreeShow"
           @changePraShow="changePraShow"
           @changeCurQue="changeCurQue"
           @deleteWriteRecord="deleteWriteRecord"
-          :bgType="data.property.frame_type"
         />
       </div>
       <div v-if="if_miao_show" class="practiceBox practice-box-strock">
@@ -271,7 +271,7 @@
                 ? '#ddd'
                 : ''
             "
-            :bgType="data.property.frame_type"
+            :bg-type="data.property.frame_type"
           />
           <Strockred
             ref="strockRed"
@@ -288,7 +288,7 @@
             :book-strokes="current_hz_data"
             :is-answer.sync="userAnswer[active_index].strokes_content_list[active_col_index].flag"
             :show-error-tip="isEnable(data.property.is_enable_error)"
-            :bgType="data.property.frame_type"
+            :bg-type="data.property.frame_type"
           />
           <div v-if="!disabled" :class="['reset-box']" @click="resetHanzi">
             <SvgIcon icon-class="reset" class="reset-btn" />
@@ -398,7 +398,7 @@ export default {
           let obj = {
             // mark: item.mark,
             strokes_content_list: arr,
-            miao_arr: miao_arr,
+            miao_arr,
           };
           // if (!this.isJudgingRightWrong) {
           //   this.userAnswer.push(obj);

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

@@ -5,10 +5,10 @@
 
     <div class="main">
       <div
-        class="item-box"
-        :class="['item-box-' + data.property.model]"
         v-for="(item, index) in data.option_list"
         :key="index"
+        class="item-box"
+        :class="['item-box-' + data.property.model]"
       >
         <div
           class="number-box"
@@ -39,29 +39,29 @@
             {{ item.pinyin }}
           </div>
           <div
-            class="inputdv pinyin-common"
             v-if="data.answer_type.indexOf('pinyin') > -1 && data.property.model === 'input' && item.is_common_pinyin"
+            class="inputdv pinyin-common"
           >
             <EditDiv
               :id="'b' + item.content + index"
-              :canEdit="!item.is_example && !disabled"
               v-model="userAnswer[index].answer_pinyin"
-              :textAlign="'center'"
-              @input="changeAnswer(item, index)"
+              :can-edit="!item.is_example && !disabled"
+              :text-align="'center'"
               :class="[classNameJudge(userAnswer[index].answer_pinyin, item.answer_pinyin, item.is_example)]"
               :style="{
                 fontSize: data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
                 background:
                   data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
               }"
+              @input="changeAnswer(item, index)"
             />
           </div>
           <div class="items-flex">
             <div
-              class="items"
-              :class="[items.is_example ? 'items-example' : '']"
               v-for="(items, indexs) in item.content_list"
               :key="indexs"
+              class="items"
+              :class="[items.is_example ? 'items-example' : '']"
             >
               <div
                 v-if="
@@ -77,18 +77,17 @@
                 {{ items.pinyin }}
               </div>
               <div
-                class="inputdv pinyin-common"
-                :class="[items.is_example ? 'items-example' : 'items-no-example']"
                 v-if="
                   data.answer_type.indexOf('pinyin') > -1 && data.property.model === 'input' && !item.is_common_pinyin
                 "
+                class="inputdv pinyin-common"
+                :class="[items.is_example ? 'items-example' : 'items-no-example']"
               >
                 <EditDiv
                   :id="'c' + items.con + index + indexs"
-                  :canEdit="!items.is_example && !disabled"
                   v-model="userAnswer[index].item[indexs].answer_pinyin"
-                  :textAlign="'center'"
-                  @input="changeAnswer(item, index, indexs)"
+                  :can-edit="!items.is_example && !disabled"
+                  :text-align="'center'"
                   :class="[
                     classNameJudge(userAnswer[index].item[indexs].answer_pinyin, items.answer_pinyin, items.is_example),
                   ]"
@@ -98,20 +97,21 @@
                     background:
                       data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
                   }"
+                  @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]"
+                    class="items-image"
                     :src="items.file_list[0].file_url"
                     fit="contain"
                     :style="{
                       borderColor:
                         data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                     }"
-                  ></el-image>
+                  />
                 </template>
                 <template v-else-if="items && items.type === 'lian'">
                   <span class="items-lian">{{ items.con }}</span>
@@ -119,8 +119,8 @@
                 <Strockplayredline
                   v-if="items && items.type === 'hanzi'"
                   :Book_text="items.con"
-                  :playStorkes="isEnable(data.property.is_enable_play_structure)"
-                  :curItem="
+                  :play-storkes="isEnable(data.property.is_enable_play_structure)"
+                  :cur-item="
                     isEnable(data.property.is_enable_high_strokes)
                       ? data.property.model === 'input'
                         ? items.high_strokes
@@ -128,7 +128,7 @@
                       : null
                   "
                   :type="data.property.model === 'input' ? 'newWord-template-input' : data.type"
-                  :targetDiv="'newWordTemplate' + items.con + index + indexs"
+                  :target-div="'newWordTemplate' + items.con + index + indexs + Math.random().toString(36)"
                   :hz_json="items.hz_info[0].hzDetail.hz_json"
                   class="hanzi-storck"
                   :class="[
@@ -140,24 +140,23 @@
                       : '',
                     item.content_list.length > 1 && indexs != item.content_list.length - 1 ? 'NoborderRight' : '',
                   ]"
-                  bgType="tian"
+                  bg-type="tian"
                   :style="{
                     borderColor:
                       data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                   }"
-                  :playColor="
+                  :play-color="
                     data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
                   "
                 />
               </div>
-              <div class="inputdv" v-if="data.property.model === 'miao'">
+              <div v-if="data.property.model === 'miao'" class="inputdv">
                 <EditDiv
                   v-if="items && items.type === 'hanzi' && items.is_can_input_answer"
                   :id="'a' + items.con + index + indexs"
-                  :canEdit="!items.is_example && !disabled"
                   v-model="userAnswer[index].item[indexs].answer"
-                  :textAlign="'center'"
-                  @input="changeAnswer(items, index, indexs)"
+                  :can-edit="!items.is_example && !disabled"
+                  :text-align="'center'"
                   :class="[classNameJudge(userAnswer[index].item[indexs].answer, items.answer, items.is_example)]"
                   :style="{
                     fontSize:
@@ -165,26 +164,27 @@
                     background:
                       data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
                   }"
+                  @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'">
+          <div v-if="data.answer_type.indexOf('en') > -1 && data.property.model === 'input'" class="inputdv en-common">
             <EditDiv
               :id="'d' + item.content + index"
-              :canEdit="!item.is_example && !disabled"
               v-model="userAnswer[index].answer_en"
-              :textAlign="'center'"
-              @input="changeAnswer(item, index)"
+              :can-edit="!item.is_example && !disabled"
+              :text-align="'center'"
               :class="[classNameJudge(userAnswer[index].answer_en, item.answer_en, item.is_example)]"
               :style="{
                 fontSize: data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
                 background:
                   data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
               }"
+              @input="changeAnswer(item, index)"
             />
           </div>
-          <div class="en-common" v-if="data.property.model === 'input'">{{ item.shiyi }}</div>
+          <div v-if="data.property.model === 'input'" class="en-common">{{ item.shiyi }}</div>
         </div>
       </div>
     </div>
@@ -193,10 +193,10 @@
       <div class="title">正确答案</div>
       <div class="box">
         <div
-          class="item-box"
-          :class="['item-box-' + data.property.model]"
           v-for="(item, index) in data.option_list"
           :key="index"
+          class="item-box"
+          :class="['item-box-' + data.property.model]"
         >
           <div
             class="number-box"
@@ -221,29 +221,29 @@
               {{ item.pinyin }}
             </div>
             <div
-              class="inputdv pinyin-common"
               v-if="data.answer_type.indexOf('pinyin') > -1 && data.property.model === 'input' && item.is_common_pinyin"
+              class="inputdv pinyin-common"
             >
               <EditDiv
                 :id="'bz' + item.content + index"
-                :canEdit="!item.is_example && !disabled"
                 v-model="item.answer_pinyin"
-                :textAlign="'center'"
-                @input="changeAnswer(item, index)"
+                :can-edit="!item.is_example && !disabled"
+                :text-align="'center'"
                 :style="{
                   fontSize:
                     data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
                   background:
                     data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
                 }"
+                @input="changeAnswer(item, index)"
               />
             </div>
             <div class="items-flex">
               <div
-                class="items"
-                :class="[items.is_example ? 'items-example' : '']"
                 v-for="(items, indexs) in item.content_list"
                 :key="indexs"
+                class="items"
+                :class="[items.is_example ? 'items-example' : '']"
               >
                 <div
                   v-if="
@@ -259,37 +259,37 @@
                   {{ items.pinyin }}
                 </div>
                 <div
-                  class="inputdv pinyin-common"
                   v-if="
                     data.answer_type.indexOf('pinyin') > -1 && data.property.model === 'input' && !item.is_common_pinyin
                   "
+                  class="inputdv pinyin-common"
                 >
                   <EditDiv
                     :id="'cz' + items.con + index + indexs"
-                    :canEdit="!items.is_example && !disabled"
                     v-model="items.answer_pinyin"
-                    :textAlign="'center'"
-                    @input="changeAnswer(item, index, indexs)"
+                    :can-edit="!items.is_example && !disabled"
+                    :text-align="'center'"
                     :style="{
                       fontSize:
                         data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
                       background:
                         data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
                     }"
+                    @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]"
+                      class="items-image"
                       :src="items.file_list[0].file_url"
                       fit="contain"
                       :style="{
                         borderColor:
                           data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                       }"
-                    ></el-image>
+                    />
                   </template>
                   <template v-else-if="items && items.type === 'lian'">
                     <span class="items-lian">{{ items.con }}</span>
@@ -297,8 +297,8 @@
                   <Strockplayredline
                     v-if="items && items.type === 'hanzi'"
                     :Book_text="items.con"
-                    :playStorkes="isEnable(data.property.is_enable_play_structure)"
-                    :curItem="
+                    :play-storkes="isEnable(data.property.is_enable_play_structure)"
+                    :cur-item="
                       isEnable(data.property.is_enable_high_strokes)
                         ? data.property.model === 'input'
                           ? items.high_strokes
@@ -306,7 +306,7 @@
                         : null
                     "
                     :type="data.property.model === 'input' ? 'newWord-template-input' : data.type"
-                    :targetDiv="'newWordTemplatez' + items.con + index + indexs"
+                    :target-div="'newWordTemplatez' + items.con + index + indexs + Math.random().toString(36)"
                     :hz_json="items.hz_info[0].hzDetail.hz_json"
                     class="hanzi-storck"
                     :class="[
@@ -322,49 +322,49 @@
                       borderColor:
                         data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '',
                     }"
-                    :playColor="
+                    :play-color="
                       data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : ''
                     "
-                    bgType="tian"
+                    bg-type="tian"
                   />
                 </div>
-                <div class="inputdv" v-if="data.property.model === 'miao'">
+                <div v-if="data.property.model === 'miao'" class="inputdv">
                   <EditDiv
                     v-if="items && items.type === 'hanzi' && items.is_can_input_answer"
                     :id="'az' + items.con + index + indexs"
-                    :canEdit="!items.is_example && !disabled"
                     v-model="items.answer"
-                    :textAlign="'center'"
-                    @input="changeAnswer(items, index, indexs)"
+                    :can-edit="!items.is_example && !disabled"
+                    :text-align="'center'"
                     :style="{
                       fontSize:
                         data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
                       background:
                         data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
                     }"
+                    @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'"
+              class="inputdv en-common"
             >
               <EditDiv
                 :id="'dz' + item.content + index"
-                :canEdit="!item.is_example && !disabled"
                 v-model="item.answer_en"
-                :textAlign="'center'"
-                @input="changeAnswer(item, index)"
+                :can-edit="!item.is_example && !disabled"
+                :text-align="'center'"
                 :style="{
                   fontSize:
                     data.unified_attrib && data.unified_attrib.pinyin_size ? data.unified_attrib.pinyin_size : '',
                   background:
                     data.unified_attrib && data.unified_attrib.assist_color ? data.unified_attrib.assist_color : '',
                 }"
+                @input="changeAnswer(item, index)"
               />
             </div>
-            <div class="en-common" v-if="data.property.model === 'input'">{{ item.shiyi }}</div>
+            <div v-if="data.property.model === 'input'" class="en-common">{{ item.shiyi }}</div>
           </div>
         </div>
       </div>