生词多语言

src/views/book/courseware/create/components/question/notes/Notes.vue

@@ -115,7 +115,7 @@ export default {
       this.handleMindMap();
     },
     handleMultilingual() {
-      this.multilingualText = this.data.title_con;
+      this.multilingualText = this.data.title_con ? this.data.title_con : '<p>&nbsp;</p>';
       this.data.option.forEach((item) => {
         this.multilingualText += item.con ? item.con : '<p>&nbsp;</p>';
         this.multilingualText += item.note ? item.note : '<p>&nbsp;</p>';

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

@@ -8,6 +8,9 @@
         <div class="topTitle" :style="{ backgroundColor: bookInfo.theme_color }">
           <div class="NPC-top-left">
             <span class="NPC-topTitle-text" v-html="data.title_con"></span>
+            <span class="NPC-topTitle-text" v-if="showLang">
+              {{ titleTrans[getLang()] }}
+            </span>
           </div>
 
           <div class="NPC-top-right">
@@ -91,6 +94,7 @@
                           v-html="sItem.pinyin"
                         >
                         </span>
+
                         <span
                           :style="{ width: data.col_width[0].value + 'px' }"
                           class="NPC-word-tab-common NPC-word-tab-word"
@@ -104,18 +108,48 @@
                           v-html="sItem.pinyin"
                         >
                         </span>
+                        <span
+                          class="NPC-word-tab-common"
+                          :style="{ width: data.col_width[0].value + 'px' }"
+                          v-if="showLang"
+                        >
+                          {{
+                            multilingualTextList[getLang()] &&
+                            multilingualTextList[getLang()][index] &&
+                            multilingualTextList[getLang()][index][0]
+                              ? multilingualTextList[getLang()][index][0]
+                              : ''
+                          }}
+                        </span>
                       </div>
-                      <span
-                        class="NPC-word-tab-common NPC-word-tab-cixing"
-                        :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
-                        :style="{ width: data.col_width[2].value + 'px' }"
-                        v-html="sItem.cixing"
-                      ></span>
-                      <span
-                        class="NPC-word-tab-common NPC-word-tab-def"
-                        :style="{ width: data.col_width[3].value + 'px' }"
-                        v-html="sItem.def_str"
-                      ></span>
+                      <span :style="{ width: data.col_width[2].value + 'px' }">
+                        <p
+                          class="NPC-word-tab-common NPC-word-tab-cixing"
+                          :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
+                          v-html="sItem.cixing"
+                        ></p>
+                        <span class="NPC-word-tab-common" v-if="showLang">
+                          {{
+                            multilingualTextList[getLang()] &&
+                            multilingualTextList[getLang()][index] &&
+                            multilingualTextList[getLang()][index][1]
+                              ? multilingualTextList[getLang()][index][1]
+                              : ''
+                          }}
+                        </span>
+                      </span>
+                      <span :style="{ width: data.col_width[3].value + 'px' }">
+                        <p class="NPC-word-tab-common NPC-word-tab-def" v-html="sItem.def_str"></p>
+                        <span class="NPC-word-tab-common" v-if="showLang">
+                          {{
+                            multilingualTextList[getLang()] &&
+                            multilingualTextList[getLang()][index] &&
+                            multilingualTextList[getLang()][index][2]
+                              ? multilingualTextList[getLang()][index][2]
+                              : ''
+                          }}
+                        </span>
+                      </span>
                     </template>
                     <template v-else>
                       <span
@@ -125,11 +159,21 @@
                         v-html="sItem.pinyin"
                       >
                       </span>
-                      <span
-                        class="NPC-word-tab-common NPC-word-tab-word"
-                        :style="{ width: data.col_width[0].value + 'px' }"
-                        v-html="sItem.new_word"
-                      >
+                      <span :style="{ width: data.col_width[0].value + 'px' }">
+                        <p class="NPC-word-tab-common NPC-word-tab-word" v-html="sItem.new_word"></p>
+                        <span
+                          class="NPC-word-tab-common"
+                          :style="{ width: data.col_width[0].value + 'px' }"
+                          v-if="showLang"
+                        >
+                          {{
+                            multilingualTextList[getLang()] &&
+                            multilingualTextList[getLang()][index] &&
+                            multilingualTextList[getLang()][index][0]
+                              ? multilingualTextList[getLang()][index][0]
+                              : ''
+                          }}
+                        </span>
                       </span>
                       <span
                         v-if="data.property.pinyin_position == 'back'"
@@ -138,17 +182,35 @@
                         v-html="sItem.pinyin"
                       >
                       </span>
-                      <span
-                        class="NPC-word-tab-common NPC-word-tab-cixing"
-                        :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
-                        :style="{ width: data.col_width[2].value + 'px' }"
-                        v-html="sItem.cixing"
-                      ></span>
-                      <span
-                        class="NPC-word-tab-common NPC-word-tab-def"
-                        :style="{ width: data.col_width[3].value + 'px' }"
-                        v-html="sItem.def_str"
-                      ></span>
+                      <span :style="{ width: data.col_width[2].value + 'px' }">
+                        <p
+                          class="NPC-word-tab-common NPC-word-tab-cixing"
+                          :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(sItem.cixing) ? 'hasCn' : '']"
+                          v-html="sItem.cixing"
+                        ></p>
+
+                        <span class="NPC-word-tab-common" v-if="showLang">
+                          {{
+                            multilingualTextList[getLang()] &&
+                            multilingualTextList[getLang()][index] &&
+                            multilingualTextList[getLang()][index][1]
+                              ? multilingualTextList[getLang()][index][1]
+                              : ''
+                          }}
+                        </span>
+                      </span>
+                      <span :style="{ width: data.col_width[3].value + 'px' }">
+                        <p class="NPC-word-tab-common NPC-word-tab-def" v-html="sItem.def_str"></p>
+                        <span class="NPC-word-tab-common" v-if="showLang">
+                          {{
+                            multilingualTextList[getLang()] &&
+                            multilingualTextList[getLang()][index] &&
+                            multilingualTextList[getLang()][index][2]
+                              ? multilingualTextList[getLang()][index][2]
+                              : ''
+                          }}
+                        </span>
+                      </span>
                     </template>
                     <div class="right-box">
                       <span>
@@ -169,18 +231,34 @@
                       </span>
                     </div>
 
-                    <div
-                      v-if="sItem.collocation"
-                      class="collocation"
-                      :style="{ width: data.col_width[4].value + 'px' }"
-                    >
-                      <span>搭配：</span><b v-html="sItem.collocation"></b>
+                    <div v-if="sItem.collocation" :style="{ width: data.col_width[4].value + 'px' }">
+                      <span class="collocation"><span>搭配：</span><b v-html="sItem.collocation"></b></span>
+                      <span class="" v-if="showLang">
+                        {{
+                          multilingualTextList[getLang()] &&
+                          multilingualTextList[getLang()][index] &&
+                          multilingualTextList[getLang()][index][3]
+                            ? multilingualTextList[getLang()][index][3]
+                            : ''
+                        }}
+                      </span>
                     </div>
-                    <div v-if="sItem.liju_list" class="collocation" :style="{ width: data.col_width[5].value + 'px' }">
-                      <span>例句：</span>
-                      <div>
-                        <b v-html="sItem.liju_list"></b>
-                      </div>
+                    <div v-if="sItem.liju_list" :style="{ width: data.col_width[5].value + 'px' }">
+                      <span class="collocation"
+                        ><span>例句：</span>
+                        <div>
+                          <b v-html="sItem.liju_list"></b>
+                        </div>
+                      </span>
+                      <span class="" v-if="showLang">
+                        {{
+                          multilingualTextList[getLang()] &&
+                          multilingualTextList[getLang()][index] &&
+                          multilingualTextList[getLang()][index][4]
+                            ? multilingualTextList[getLang()][index][4]
+                            : ''
+                        }}
+                      </span>
                     </div>
                   </div>
                 </li>
@@ -414,6 +492,8 @@ export default {
       is_list: true, // 列表还是卡片展示
       courseware_id: this.$route.params.id,
       rowWidth: 0,
+      multilingualTextList: {}, // 多语言对应的切割后的翻译
+      titleTrans: {},
     };
   },
   watch: {
@@ -594,6 +674,23 @@ export default {
       if (!this.isJudgingRightWrong) {
         this.data.answer.answer_list = Bookanswer;
       }
+      if (this.showLang) {
+        this.data.multilingual.forEach((item) => {
+          let trans_arr = item.translation.split('\n');
+          this.$set(this.titleTrans, item.type, trans_arr[0] ? trans_arr[0] : '');
+          let chunkSize = 7;
+          let chunkedArr = trans_arr.splice(1).reduce((acc, curr, index) => {
+            // 当索引是chunkSize的倍数时，开始一个新的子数组
+            if (index % chunkSize === 0) {
+              acc.push([curr]); // 开始新的子数组并添加当前元素
+            } else {
+              acc[acc.length - 1].push(curr); // 将当前元素添加到最后一个子数组中
+            }
+            return acc;
+          }, []);
+          this.$set(this.multilingualTextList, item.type, chunkedArr);
+        });
+      }
     },
     handleChangeTab() {
       this.wordShow = !this.wordShow;
@@ -635,7 +732,7 @@ export default {
   @include preview-base;
 
   .NPC-zhedie {
-    width: 1007px;
+    width: 900px;
 
     // width: 780px;
     // margin-bottom: 24px;