修改

src/views/book/courseware/create/components/CreateCanvas.vue

@@ -108,6 +108,11 @@ export default {
     PreviewEdit,
   },
   inject: ['getCurSettingId'],
+  provide() {
+    return {
+      courseware_id: () => this.courseware_id,
+    };
+  },
   props: {
     isEdit: {
       type: Boolean,
@@ -151,7 +156,7 @@ export default {
     drag: {
       handler(val) {
         if (val.dragging) {
-          const dragging = document.querySelector('.dragging');
+          const dragging = document.querySelector('.canvas-dragging');
           dragging.style.left = `${val.clientX}px`;
           dragging.style.top = `${val.clientY}px`;
         }
@@ -588,7 +593,7 @@ export default {
       this.curType = type;
       // 在鼠标位置创建一个拖拽元素
       const dragging = document.createElement('div');
-      dragging.className = 'dragging';
+      dragging.className = 'canvas-dragging';
       this.drag.clientX = clientX;
       this.drag.clientY = clientY;
       document.body.appendChild(dragging);
@@ -653,7 +658,7 @@ export default {
      */
     dragEnd() {
       document.body.style.userSelect = 'auto';
-      const dragging = document.querySelector('.dragging');
+      const dragging = document.querySelector('.canvas-dragging');
       if (dragging) {
         document.body.removeChild(dragging);
         this.drag.dragging = false;
@@ -820,7 +825,7 @@ export default {
      * isInsideCanvas: 是否在画布内
      */
     getMarginDifferences() {
-      const rect1 = document.querySelector('.dragging').getBoundingClientRect();
+      const rect1 = document.querySelector('.canvas-dragging').getBoundingClientRect();
       const rect2 = this.$refs.canvas.getBoundingClientRect();
 
       const leftMarginDifference = rect1.left - rect2.left + 128;
@@ -925,7 +930,7 @@ export default {
 </style>
 
 <style lang="scss">
-.dragging {
+.canvas-dragging {
   position: fixed;
   z-index: 999;
   width: 320px;

src/views/book/courseware/data/newWord.js

@@ -8,7 +8,7 @@ import {
 } from '@/views/book/courseware/data/common';
 
 export { arrangeTypeList, switchOption, isEnable };
-  
+
 export const wordShowList = [
   { value: 'true', label: '是' },
   { value: 'false', label: '否' },
@@ -26,7 +26,7 @@ export const pinyinPositionList = [
   { value: 'top', label: '上面' },
   { value: 'bottom', label: '下面' },
 ];
-  
+
 // 读音生成方式
 export const audioGenerationMethodList = [
   {
@@ -45,15 +45,15 @@ export const audioGenerationMethodList = [
 
 export function getOption() {
   return {
-    number:'',
-    new_word: "",
-    cixing: "", //词性
-    definition_list: "", //需要增加词性
-    pinyin: "",
+    number: '',
+    new_word: '',
+    cixing: '', // 词性
+    definition_list: '', // 需要增加词性
+    pinyin: '',
     mp3_list: '',
     collocation: '', // 搭配
     liju_list: '', // 例句
-  }
+  };
 }
 export function getNewWordProperty() {
   return {
@@ -64,7 +64,7 @@ export function getNewWordProperty() {
     audio_generation_method: audioGenerationMethodList[0].value,
     pinyin_position: pinyinPositionList[0].value,
     is_word_show: wordShowList[1].value,
-    is_has_infor: inforList[0].value
+    is_has_infor: inforList[0].value,
   };
 }
 
@@ -73,10 +73,8 @@ export function getNewWordData() {
     type: 'new_word',
     title: '生词组件',
     property: getNewWordProperty(),
-    title_con:'',
-    option: [
-      getOption()
-    ],
+    title_con: '',
+    option: [getOption()],
     lrc_arr: [], // lrc 文件解析后的数据
     // lrc 文件数据
     lrc_data: {
@@ -94,7 +92,7 @@ export function getNewWordData() {
       file_id: '',
     },
     answer: {
-      answer_list:[]
+      answer_list: [],
     },
   };
 }

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -3,7 +3,7 @@
   <div class="newWord-preview" :style="getAreaStyle()">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
-    <div class="main" v-if="data">
+    <div v-if="data" class="main">
       <div class="NPC-zhedie">
         <div class="topTitle">
           <div class="NPC-top-left">
@@ -16,28 +16,28 @@
           </div>
         </div>
         <el-collapse-transition>
-          <div class="NPC-word-list" v-if="data.option && data.option.length > 0" v-show="wordShow">
-            <div class="aduioLine-box" v-if="data.audio_data.file_id">
+          <div v-if="data.option && data.option.length > 0" v-show="wordShow" class="NPC-word-list">
+            <div v-if="data.audio_data.file_id" class="aduioLine-box">
               <AudioLine
-                :audioId="'newWordAudio' + indexStr"
+                ref="audioLine"
+                :audio-id="'newWordAudio' + indexStr"
                 :mp3="data.audio_data.url"
-                :getCurTime="getCurTime"
+                :get-cur-time="getCurTime"
                 :ed="ed"
                 type="audioLine"
-                ref="audioLine"
                 @handleListenRead="handleListenRead"
               />
             </div>
             <ul class="NPC-word-table" cellspacing="0" border="0" cellpadding="0">
-              <li class="NPC-word-tr" v-for="(item, index) in data.option_list" :key="'curQue.option' + index">
+              <li v-for="(item, index) in data.option_list" :key="'curQue.option' + index" class="NPC-word-tr">
                 <div
+                  v-for="(sItem, sIndex) in item"
+                  :key="'curQue.option.child' + sIndex"
                   :class="[
                     'NPC-word-row',
                     playClass && mp3_index == sItem.sIndex ? 'active' : '',
                     curTime >= sItem.bg && curTime < sItem.ed && stopAudioS ? 'active' : '',
                   ]"
-                  v-for="(sItem, sIndex) in item"
-                  :key="'curQue.option.child' + sIndex"
                 >
                   <template v-if="sItem.bg || sItem.ed">
                     <a
@@ -65,15 +65,15 @@
                   <template v-if="sItem.pinyin_site && (sItem.pinyin_site == 'top' || sItem.pinyin_site == 'bottom')">
                     <div class="NPC-word-tab-box">
                       <span
-                        class="NPC-word-tab-common NPC-word-tab-pinyin"
                         v-if="sItem.pinyin_site == 'top'"
+                        class="NPC-word-tab-common NPC-word-tab-pinyin"
                         v-html="sItem.pinyin"
                       >
                       </span>
                       <span class="NPC-word-tab-common NPC-word-tab-word" v-html="sItem.new_word"> </span>
                       <span
-                        class="NPC-word-tab-common NPC-word-tab-pinyin"
                         v-if="sItem.pinyin_site == 'bottom'"
+                        class="NPC-word-tab-common NPC-word-tab-pinyin"
                         v-html="sItem.pinyin"
                       >
                       </span>
@@ -87,15 +87,15 @@
                   </template>
                   <template v-else>
                     <span
-                      class="NPC-word-tab-common NPC-word-tab-pinyin"
                       v-if="!sItem.pinyin_site || sItem.pinyin_site == 'first'"
+                      class="NPC-word-tab-common NPC-word-tab-pinyin"
                       v-html="sItem.pinyin"
                     >
                     </span>
                     <span class="NPC-word-tab-common NPC-word-tab-word" v-html="sItem.new_word"> </span>
                     <span
-                      class="NPC-word-tab-common NPC-word-tab-pinyin"
                       v-if="sItem.pinyin_site == 'last'"
+                      class="NPC-word-tab-common NPC-word-tab-pinyin"
                       v-html="sItem.pinyin"
                     >
                     </span>
@@ -109,14 +109,14 @@
                   <span>
                     <!-- :answerRecordList="data.answer.answer_list[index][sIndex].recordList" -->
                     <SoundRecord
-                      :tmIndex="index"
-                      :tmsIndex="sIndex"
+                      :tm-index="index"
+                      :tms-index="sIndex"
                       :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
-                      @handleWav="handleWav"
-                      :answerRecordList="[]"
+                      :answer-record-list="[]"
                       type="mini"
                       class="luyin-box-wordphrase"
                       :style="{ marginLeft: '8px' }"
+                      @handleWav="handleWav"
                     />
                   </span>
                   <span v-if="isEnable(data.property.is_has_infor)">
@@ -150,7 +150,7 @@
         type="newWordDetail"
       />
     </div> -->
-        <audio ref="newwordAudio" />
+        <audio ref="newwordAudio"></audio>
       </div>
     </div>
   </div>
@@ -160,7 +160,6 @@
 import { getNewWordData, isEnable } from '@/views/book/courseware/data/newWord';
 
 import PreviewMixin from '../common/PreviewMixin';
-import AudioFill from '../fill/components/AudioFillPlay.vue';
 import SoundRecord from '../../common/SoundRecord.vue';
 import AudioLine from '../voice_matrix/components/AudioLine.vue';
 import { GetFileURLMap } from '@/api/app';
@@ -168,11 +167,11 @@ import { GetFileURLMap } from '@/api/app';
 export default {
   name: 'NewWordPreview',
   components: {
-    AudioFill,
     SoundRecord,
     AudioLine,
   },
   mixins: [PreviewMixin],
+  inject: ['courseware_id'],
   data() {
     return {
       data: getNewWordData(),
@@ -210,18 +209,15 @@ export default {
       immediate: true,
     },
   },
-  computed: {},
-  created() {},
   methods: {
-    handleChange(val) {},
     palyAudio(url, sIndex) {
       this.stopAudio();
       let mp3 = url;
-      let node = document.getElementById('word' + this.indexStr + sIndex);
+      let node = document.getElementById(`word${this.indexStr}${sIndex}`);
       let audio = document.getElementsByTagName('audio');
-      if (audio && audio.length > 0 && audio.forEach && window.location.href.indexOf('GCLS-Learn') == -1) {
+      if (audio && audio.length > 0 && audio.forEach && window.location.href.indexOf('GCLS-Learn') === -1) {
         audio.forEach((item) => {
-          if (item.src != mp3) {
+          if (item.src !== mp3) {
             item.pause();
           }
         });
@@ -262,20 +258,20 @@ export default {
       this.detailShow = val;
     },
     changeDetailIndex(val) {
-      if (val == 'last') {
-        this.detailIndex--;
+      if (val === 'last') {
+        this.detailIndex -= 1;
       } else {
-        this.detailIndex++;
+        this.detailIndex += 1;
       }
       this.dataWord = null;
       this.dataWord = this.optionRes[this.detailIndex];
-      //this.getWordLiju(this.data.new_word);
+      // this.getWordLiju(this.data.new_word);
     },
     handlePlayVoice3(mp3) {
       let audio = document.getElementsByTagName('audio');
       if (audio && audio.length > 0 && window.location.href.indexOf('GCLS-Learn') == -1) {
         audio.forEach((item) => {
-          if (item.src != mp3) {
+          if (item.src !== mp3) {
             item.pause();
           }
         });
@@ -297,7 +293,7 @@ export default {
       let audio = document.getElementsByTagName('audio');
       if (audio && audio.length > 0 && window.location.href.indexOf('GCLS-Learn') == -1) {
         audio.forEach((item) => {
-          if (item.src != mp3) {
+          if (item.src !== mp3) {
             item.pause();
           }
         });
@@ -306,9 +302,9 @@ export default {
         return;
       }
       // setTimeout(() => {
-      //this.$refs.newwordAudio.pause();
+      // this.$refs.newwordAudio.pause();
       this.$refs.newwordAudio.src = mp3;
-      //this.$refs.newwordAudio.load();
+      // this.$refs.newwordAudio.load();
       this.$refs.newwordAudio.play();
       // }, 1000);
     },
@@ -330,12 +326,10 @@ export default {
       this.data.option.forEach((item) => {
         if (item.number) {
           option_list.push([item]);
+        } else if (option_list[option_list.length - 1]) {
+          option_list[option_list.length - 1].push(item);
         } else {
-          if (option_list[option_list.length - 1]) {
-            option_list[option_list.length - 1].push(item);
-          } else {
-            option_list.push([item]);
-          }
+          option_list.push([item]);
         }
         if (item.mp3_list) {
           GetFileURLMap({ file_id_list: [item.mp3_list] }).then(({ url_map }) => {
@@ -373,7 +367,7 @@ export default {
     getCurTime(curTime) {
       this.curTime = curTime * 1000;
     },
-    //点击播放某个句子
+    // 点击播放某个句子
     handleChangeTime(time, edTime) {
       this.curTime = time;
       this.stopAudioS = true;
@@ -387,8 +381,8 @@ export default {
       this.ed = null;
     },
     handleWav(list, tmIndex, tmsIndex) {
-      tmIndex = tmIndex ? tmIndex : 0;
-      tmsIndex = tmsIndex ? tmsIndex : 0;
+      tmIndex = tmIndex || 0;
+      tmsIndex = tmsIndex || 0;
       this.$set(this.data.answer.answer_list[tmIndex][tmsIndex], 'recordList', list);
     },
   },