拼音展示

src/components/PinyinText.vue

@@ -90,6 +90,7 @@ export default {
         font-size: 24px;
 
         .pinyin {
+          font-family: 'League';
           font-size: 12px;
         }
 

src/views/book/courseware/create/components/base/common/CorrectPinyin.vue

@@ -75,6 +75,7 @@ export default {
     padding: 24px;
 
     .tone-pinyin {
+      font-family: 'League';
       font-size: 20px;
     }
 

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

@@ -86,6 +86,7 @@ export function getPinyinBaseData() {
     content_hz: '',
     audio_file_id: '',
     mark: getRandomNumber(),
+    record_list: [],
     answer: {
       answer_list: [],
     },

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

@@ -34,7 +34,7 @@ export function getRecordInputData() {
     is_enable_input: switchOption[0].value,
     answer: {
       answer_list: {
-        answerRecordList: [],
+        answer_record_list: [],
         input: '',
       },
     },

src/views/book/courseware/preview/components/pinyin_base/PinyinBasePreview.vue

@@ -101,9 +101,16 @@
             <SvgIcon :icon-class="img" />
           </span>
         </div>
-        <template
-          v-else-if="data.property.fun_type === 'show' && isEnable(data.property.is_enable_voice_answer)"
-        ></template>
+        <template v-else-if="data.property.fun_type === 'show' && isEnable(data.property.is_enable_voice_answer)">
+          <SoundRecord
+            ref="record"
+            type="normal"
+            class="record-box"
+            :answer-record-list="data.record_list"
+            :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
+            @handleWav="handleWav"
+          />
+        </template>
       </div>
     </div>
   </div>
@@ -139,6 +146,9 @@ export default {
       },
       immediate: true,
     },
+    'data.record_list'(val) {
+      this.data.record_list = val;
+    },
   },
   data() {
     return {
@@ -463,6 +473,9 @@ export default {
         this.show_preview = true;
       }, 100);
     },
+    handleWav(data) {
+      this.data.record_list = data;
+    },
   },
 };
 </script>
@@ -482,7 +495,8 @@ export default {
     }
 
     &-vertical {
-      .tone-box {
+      .tone-box,
+      .record-box {
         margin-top: 8px;
       }
     }
@@ -565,5 +579,11 @@ export default {
       border-radius: 16px;
     }
   }
+
+  .record-box {
+    padding: 7px 12px;
+    background: #f2f3f5;
+    border-radius: 2px;
+  }
 }
 </style>

src/views/book/courseware/preview/components/record_input/RecordInputPreview.vue

@@ -6,24 +6,31 @@
     <div class="main">
       <el-input
         v-if="isEnable(data.is_enable_input)"
-        v-model="answer.answer_list.input"
+        v-model="data.answer.answer_list.input"
         :class="['textarea']"
         type="textarea"
         placeholder=""
         maxlength="1000"
-        :readonly="false"
+        :readonly="isJudgingRightWrong"
         :rows="5"
-        @blur="answer.answer_list.input = answer.answer_list.input.trim()"
+        @blur="data.answer.answer_list.input = data.answer.answer_list.input.trim()"
       />
       <div class="voice-luyin">
-        <SoundRecord ref="record" :type="data.size" class="record-box" />
+        <SoundRecord
+          ref="record"
+          :type="data.size"
+          class="record-box"
+          :answer-record-list="data.answer.answer_list.answer_record_list"
+          :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
+          @handleWav="handleWav"
+        />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { getFillData } from '@/views/book/courseware/data/fill';
+import { getRecordInputData } from '@/views/book/courseware/data/recordInput';
 
 import PreviewMixin from '../common/PreviewMixin';
 import SoundRecord from '../../common/SoundRecord.vue';
@@ -34,20 +41,29 @@ export default {
     SoundRecord,
   },
   mixins: [PreviewMixin],
+  watch: {
+    'data.answer.answer_list.answer_record_list'(val) {
+      this.data.answer.answer_list.answer_record_list = val;
+    },
+  },
   data() {
     return {
-      data: getFillData(),
+      data: getRecordInputData(),
     };
   },
   computed: {},
   created() {
     // console.log(getConfig());
-    this.answer.answer_list = {
-      answerRecordList: [],
-      input: '',
-    };
+    // this.answer.answer_list = {
+    //   answerRecordList: [],
+    //   input: '',
+    // };
+  },
+  methods: {
+    handleWav(data) {
+      this.data.answer.answer_list.answer_record_list = data;
+    },
   },
-  methods: {},
 };
 </script>