词典

src/views/book/courseware/create/components/question/video_interaction/VideoInteraction.vue

@@ -183,6 +183,7 @@ export default {
       this.data.video_id_list = file_id_list;
       this.data.file_id_list = this.data.files_id_list.concat(file_id_list);
       this.data.video_info_list = file_info_list;
+
       if (file_list.length === 0) {
         this.data.file_info_list = [];
       } else {
@@ -230,7 +231,11 @@ export default {
           id,
           position: (this.currentTime / this.duration) * 100,
         });
-        this.file_id_list.push(id);
+        this.data.file_info_list = this.data.file_info_list.sort(
+          (a, b) => Number(a.currentTime) - Number(b.currentTime),
+        );
+
+        this.file_id_list = this.data.file_info_list.map((item) => item.id).concat(this.data.video_id_list);
       } else {
         let index = this.data.file_info_list.findIndex((item) => item.id === id);
         this.data.file_info_list[index].file_name = type;

src/views/book/courseware/preview/components/article/components/WordPhraseDetail.vue

@@ -291,6 +291,40 @@
           </div>
         </div>
       </div>
+      <div class="bottom" v-if="data && data.endata">
+        <div class="from">来自百度汉语</div>
+        <div class="wordDetail">
+          <p class="word">
+            {{ data.new_word }}
+            <span v-for="(fy, i) in data.endata.mean_list" :key="i"> [{{ fy.pinyin }}] </span>
+            <img v-if="data.endata.src_tts" @click="playAudio('audiosrc')" src="@/assets/play-red.png" alt="" />
+            <audio ref="audiosrc" :src="data.endata.src_tts"></audio>
+          </p>
+          <div class="yinpin">
+            <div>
+              <span>{{ data.endata.dst }} </span>
+              <img v-if="data.endata.dst_tts" @click="playAudio('audiodst')" src="@/assets/play-red.png" alt="" />
+              <audio ref="audiodst" :src="data.endata.dst_tts"></audio>
+            </div>
+          </div>
+          <div class="jieshu" v-for="(fy, i) in data.endata.mean_list" :key="i">
+            <p v-if="data.endata.mean_list.length > 1">{{ fy.pinyin }}</p>
+            <div v-for="(fys, j) in fy.exp_list" :key="j">
+              <div class="jieshu-item">
+                <label>{{ j + 1 }}.</label>
+                <span>{{ fys.mean }}</span>
+              </div>
+
+              <div class="jieshu-item" v-if="JSON.parse(fys.sentence).length > 0 && JSON.parse(fys.sentence)[0]">
+                <label style="opacity: 0">{{ j + 1 }}.</label>
+                <div>
+                  <p v-for="(fyss, l) in JSON.parse(fys.sentence)" :key="l">{{ fyss }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="cut-area" style="display: none"></div>
   </div>
@@ -300,7 +334,7 @@
 import Strockplayredline from './Strockplayredline.vue';
 import Audio from './AudioRed.vue';
 import { TextToAudioFile } from '@/api/app';
-import { getCoursewareWordExampleSentenceList } from '@/api/article';
+import { getCoursewareWordExampleSentenceList, toolDictionary } from '@/api/article';
 import { sanitizeHTML } from '@/utils/common';
 
 export default {
@@ -461,7 +495,9 @@ export default {
         }
       }
     },
-    playAudio() {},
+    playAudio(audio) {
+      this.$refs[audio].play();
+    },
     // 关闭单词详情
     closeWordShow() {
       this.closeWord(false);
@@ -827,6 +863,7 @@ export default {
     },
     initData() {
       this.viewIntp();
+      this.getDictionary();
     },
     handleChangeTab(flag) {
       this[flag] = !this[flag];
@@ -857,6 +894,22 @@ export default {
         });
       }
     },
+    // 百度汉语内容
+    getDictionary() {
+      toolDictionary({
+        word: this.data.new_word,
+        from: 'zh',
+        to: 'en',
+      })
+        .then((res) => {
+          if (res.status === 1) {
+            this.data.endata = res;
+          }
+        })
+        .catch((err) => {
+          this.loading3 = false;
+        });
+    },
   },
 };
 </script>
@@ -1303,7 +1356,7 @@ export default {
 
   .bottom {
     padding-bottom: 23px;
-    margin-top: 16px;
+    margin-top: 16px !important;
 
     .from {
       display: flex;
@@ -1311,7 +1364,6 @@ export default {
       justify-content: flex-end;
 
       //   text-align: right;
-      margin-right: 16px;
       font-size: 14px;
       line-height: 16px;
       color: #000;
@@ -1324,9 +1376,10 @@ export default {
     }
 
     .wordDetail {
-      width: 538px;
+      // width: 538px;
       padding-bottom: 23px;
-      margin-left: 40px;
+
+      // margin-left: 40px;
       border-bottom: 1px solid rgba(0, 0, 0, 10%);
 
       p {
@@ -1334,15 +1387,27 @@ export default {
       }
 
       .word {
+        display: flex;
+        align-items: center;
         font-size: 24px;
         font-weight: bold;
         line-height: 28px;
         color: #000;
+
+        img {
+          width: 24px;
+          height: 24px;
+          cursor: pointer;
+        }
+
+        span {
+          margin: 0 5px;
+        }
       }
 
       .yinpin {
         display: flex;
-        margin-top: 16px;
+        margin: 16px 0;
         font-size: 16px;
         line-height: 150%;
         color: #000;
@@ -1370,18 +1435,30 @@ export default {
       }
 
       .jieshu {
-        display: flex;
-        margin-top: 16px;
+        margin-bottom: 10px;
         font-size: 16px;
         line-height: 150%;
         color: #000;
 
-        > :nth-child(1) {
-          width: 30px;
-        }
+        .jieshu-item {
+          display: flex;
+          font-size: 13px;
+          line-height: 25px;
 
-        :nth-child(2) {
-          width: 524px;
+          label {
+            margin-right: 6px;
+            color: #848691;
+            word-break: keep-all;
+          }
+
+          > span {
+            font-weight: bold;
+            color: #272933;
+          }
+
+          > div {
+            color: #272933;
+          }
         }
       }
     }

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

@@ -216,6 +216,40 @@
           </div>
         </div>
       </div>
+      <div class="bottom" v-if="data && data.endata">
+        <div class="from">来自百度汉语</div>
+        <div class="wordDetail">
+          <p class="word">
+            {{ data.new_word }}
+            <span v-for="(fy, i) in data.endata.mean_list" :key="i"> [{{ fy.pinyin }}] </span>
+            <img v-if="data.endata.src_tts" @click="playAudio('audiosrc')" src="@/assets/play-red.png" alt="" />
+            <audio ref="audiosrc" :src="data.endata.src_tts"></audio>
+          </p>
+          <div class="yinpin">
+            <div>
+              <span>{{ data.endata.dst }} </span>
+              <img v-if="data.endata.dst_tts" @click="playAudio('audiodst')" src="@/assets/play-red.png" alt="" />
+              <audio ref="audiodst" :src="data.endata.dst_tts"></audio>
+            </div>
+          </div>
+          <div class="jieshu" v-for="(fy, i) in data.endata.mean_list" :key="i">
+            <p v-if="data.endata.mean_list.length > 1">{{ fy.pinyin }}</p>
+            <div v-for="(fys, j) in fy.exp_list" :key="j">
+              <div class="jieshu-item">
+                <label>{{ j + 1 }}.</label>
+                <span>{{ fys.mean }}</span>
+              </div>
+
+              <div class="jieshu-item" v-if="JSON.parse(fys.sentence).length > 0 && JSON.parse(fys.sentence)[0]">
+                <label style="opacity: 0">{{ j + 1 }}.</label>
+                <div>
+                  <p v-for="(fyss, l) in JSON.parse(fys.sentence)" :key="l">{{ fyss }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="cut-area" style="display: none"></div>
   </div>
@@ -224,7 +258,7 @@
 <script>
 import Strockplayredline from './Strockplayredline.vue';
 import AudioRed from '../../voice_matrix/components/AudioRed.vue';
-import { getCoursewareWordExampleSentenceList } from '@/api/article';
+import { getCoursewareWordExampleSentenceList, toolDictionary } from '@/api/article';
 import { sanitizeHTML } from '@/utils/common';
 
 export default {
@@ -351,7 +385,9 @@ export default {
         }
       }
     },
-    playAudio() {},
+    playAudio(audio) {
+      this.$refs[audio].play();
+    },
     // 关闭单词详情
     closeWordShow() {
       this.closeWord(false);
@@ -724,6 +760,7 @@ export default {
       }
       this.data.new_word_str = new_word_str;
       this.viewIntp();
+      this.getDictionary();
     },
     handleChangeTab(flag) {
       this[flag] = !this[flag];
@@ -765,6 +802,22 @@ export default {
         });
       }
     },
+    // 百度汉语内容
+    getDictionary() {
+      toolDictionary({
+        word: this.data.new_word,
+        from: 'zh',
+        to: 'en',
+      })
+        .then((res) => {
+          if (res.status === 1) {
+            this.data.endata = res;
+          }
+        })
+        .catch((err) => {
+          this.loading3 = false;
+        });
+    },
   },
 };
 </script>
@@ -1212,7 +1265,7 @@ export default {
 
   .bottom {
     padding-bottom: 23px;
-    margin-top: 16px;
+    margin-top: 16px !important;
 
     .from {
       display: flex;
@@ -1220,7 +1273,6 @@ export default {
       justify-content: flex-end;
 
       //   text-align: right;
-      margin-right: 16px;
       font-size: 14px;
       line-height: 16px;
       color: #000;
@@ -1233,9 +1285,10 @@ export default {
     }
 
     .wordDetail {
-      width: 538px;
+      // width: 538px;
       padding-bottom: 23px;
-      margin-left: 40px;
+
+      // margin-left: 40px;
       border-bottom: 1px solid rgba(0, 0, 0, 10%);
 
       p {
@@ -1243,15 +1296,27 @@ export default {
       }
 
       .word {
+        display: flex;
+        align-items: center;
         font-size: 24px;
         font-weight: bold;
         line-height: 28px;
         color: #000;
+
+        img {
+          width: 24px;
+          height: 24px;
+          cursor: pointer;
+        }
+
+        span {
+          margin: 0 5px;
+        }
       }
 
       .yinpin {
         display: flex;
-        margin-top: 16px;
+        margin: 16px 0;
         font-size: 16px;
         line-height: 150%;
         color: #000;
@@ -1279,18 +1344,30 @@ export default {
       }
 
       .jieshu {
-        display: flex;
-        margin-top: 16px;
+        margin-bottom: 10px;
         font-size: 16px;
         line-height: 150%;
         color: #000;
 
-        > :nth-child(1) {
-          width: 30px;
-        }
+        .jieshu-item {
+          display: flex;
+          font-size: 13px;
+          line-height: 25px;
 
-        :nth-child(2) {
-          width: 524px;
+          label {
+            margin-right: 6px;
+            color: #848691;
+            word-break: keep-all;
+          }
+
+          > span {
+            font-weight: bold;
+            color: #272933;
+          }
+
+          > div {
+            color: #272933;
+          }
         }
       }
     }