课文编辑处添加拼音预览

src/views/book/courseware/create/components/question/article/Article.vue

@@ -43,6 +43,38 @@
             @SubmitTranslation="handleMultilingualTranslation"
           />
         </div>
+        <template v-if="isEnable(data.property.view_pinyin)">
+          <el-divider content-position="left"
+            >拼音效果<el-button
+              v-show="isEnable(data.property.view_pinyin)"
+              type="text"
+              icon="el-icon-refresh"
+              title="刷新"
+              class="refresh-pinyin-btn"
+              @click.native="handleChangeContent"
+          /></el-divider>
+          <div v-for="(item, index) in data.detail" :key="index" class="text">
+            <template v-for="(witem, windex) in item.wordsList">
+              <div
+                v-for="(wItem, wIndex) in witem"
+                :key="windex + '-' + wIndex"
+                class="text-item"
+                :style="{
+                  textAlign: windex === 0 && wIndex === 0 ? 'left' : '',
+                }"
+              >
+                <span class="pinyin">{{
+                  windex === 0 &&
+                  wIndex === 0 &&
+                  data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                    ? wItem.pinyin_up
+                    : wItem.pinyin
+                }}</span>
+                <span class="word">{{ wItem.chs }}</span>
+              </div>
+            </template>
+          </div>
+        </template>
       </div>
       <el-dialog
         v-if="showArticleFlag"
@@ -137,6 +169,7 @@ import ResourcesOperate from '../../common/ResourcesOperate.vue';
 
 import { getArticleData } from '@/views/book/courseware/data/article';
 import { TextToAudioFile } from '@/api/app';
+import { isEnable } from '@/views/book/courseware/data/common';
 import {
   segSentences,
   BatchSegContent,
@@ -163,6 +196,7 @@ export default {
   mixins: [ModuleMixin],
   data() {
     return {
+      isEnable,
       data: getArticleData(),
       showArticleFlag: false, // 校对文章
       showPicArticleFlag: false, // 添加图片
@@ -859,4 +893,23 @@ export default {
     }
   }
 }
+
+.text {
+  display: flex;
+  flex-flow: wrap;
+
+  .text-item {
+    padding: 0 1px;
+    text-align: center;
+  }
+
+  .pinyin {
+    display: block;
+    font-family: 'PINYIN-B';
+  }
+
+  .word {
+    display: block;
+  }
+}
 </style>

src/views/book/courseware/create/components/question/dialogue_article/Article.vue

@@ -73,7 +73,32 @@
                   </span>
                 </div>
               </el-popover>
-              <div v-if="item.type === 'text'" class="text">{{ item.para }}</div>
+              <div v-if="item.type === 'text'" class="text">
+                <template v-if="item.wordsList.length > 0">
+                  <template v-for="(witem, windex) in item.wordsList">
+                    <div
+                      v-for="(wItem, wIndex) in witem"
+                      :key="windex + '-' + wIndex"
+                      class="text-item"
+                      :style="{
+                        textAlign: windex === 0 && wIndex === 0 ? 'left' : '',
+                      }"
+                    >
+                      <span class="pinyin">{{
+                        windex === 0 &&
+                        wIndex === 0 &&
+                        data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true'
+                          ? wItem.pinyin_up
+                          : wItem.pinyin
+                      }}</span>
+                      <span class="word">{{ wItem.chs }}</span>
+                    </div>
+                  </template>
+                </template>
+                <template v-else>
+                  {{ item.para }}
+                </template>
+              </div>
 
               <div v-else-if="item.type === 'image'" class="image">
                 <img :src="item.file_url_open" />
@@ -1214,10 +1239,26 @@ export default {
 }
 
 .text {
+  display: flex;
+  flex-flow: wrap;
   padding: 8px 12px;
   word-break: break-all;
   background-color: #fff;
   border-radius: 8px;
+
+  .text-item {
+    padding: 0 1px;
+    text-align: center;
+  }
+
+  .pinyin {
+    display: block;
+    font-family: 'PINYIN-B';
+  }
+
+  .word {
+    display: block;
+  }
 }
 
 .image img {