汉字校对拼音

src/views/book/courseware/create/components/question/character/Character.vue

@@ -5,7 +5,22 @@
       <div class="fill-wrapper">
         <el-input v-model="data.content" placeholder="输入" type="textarea" @change="handleChangeContent"></el-input>
         <span class="tips">输入字或词请一字一行</span>
+        <template v-if="data.content_list.length > 0">
+          <el-divider content-position="left">拼音效果</el-divider>
+          <div class="content-list">
+            <div
+              v-for="(item, index) in data.content_list"
+              :key="index"
+              title="点击校对拼音"
+              @click="correctPinyin1(item.con, index)"
+            >
+              <span>{{ item.pinyin }}</span>
+              <b>{{ item.con }}</b>
+            </div>
+          </div>
+        </template>
       </div>
+      <CorrectPinyin :visible.sync="visible" :select-content="selectContent" @fillTonePinyin="fillTonePinyin" />
     </template>
   </ModuleBase>
 </template>
@@ -18,17 +33,22 @@ import UploadAudio from '@/views/book/courseware/create/components/question/fill
 import { getCharacterData } from '@/views/book/courseware/data/character';
 import { GetStaticResources } from '@/api/app';
 import cnchar from 'cnchar';
+import CorrectPinyin from '@/views/book/courseware/create/components/base/common/CorrectPinyin.vue';
 
 export default {
   name: 'CharacterPage',
   components: {
     SoundRecord,
     UploadAudio,
+    CorrectPinyin,
   },
   mixins: [ModuleMixin],
   data() {
     return {
       data: getCharacterData(),
+      visible: false,
+      selectContent: '',
+      paragraph_index: 0,
     };
   },
   methods: {
@@ -87,6 +107,29 @@ export default {
         })
         .catch(() => {});
     },
+    // 校对拼音
+    correctPinyin1(text, i) {
+      if (text) {
+        this.visible = true;
+        this.selectContent = text;
+        this.paragraph_index = i;
+      }
+    },
+    // 回填校对后的拼音
+    fillTonePinyin(tonePinyin) {
+      this.data.content_list[this.paragraph_index].pinyin = tonePinyin;
+      let MethodName = 'tool-PinyinToVoiceFile';
+      let data = {
+        pinyin: tonePinyin.split(' ').join(','),
+      };
+      GetStaticResources(MethodName, data)
+        .then((res) => {
+          if (res.status === 1) {
+            this.data.content_list[this.paragraph_index].audio_file_id = res.file_id;
+          }
+        })
+        .catch(() => {});
+    },
   },
 };
 </script>
@@ -107,6 +150,27 @@ export default {
     color: #999;
   }
 
+  .content-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 8px;
+
+    div {
+      text-align: center;
+      cursor: pointer;
+
+      span {
+        font-family: 'League';
+      }
+
+      b {
+        display: block;
+        font-family: '楷体';
+        font-weight: normal;
+      }
+    }
+  }
+
   .auto-matic,
   .upload-audio-play {
     :deep .upload-wrapper {

src/views/book/courseware/preview/components/character_base/components/Strockplayredline.vue

@@ -116,7 +116,7 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 99;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;

src/views/book/courseware/preview/components/character_base/components/Strockred.vue

@@ -119,7 +119,7 @@ export default {
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 99;
+    z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -95,7 +95,7 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 99;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;