参考答案与解析增加公用部分

src/views/book/courseware/create/components/common/ModuleMixin.js

@@ -3,6 +3,7 @@ import Vue from 'vue';
 import ModuleBase from './ModuleBase.vue';
 import RichText from '@/components/RichText.vue';
 import MultilingualFill from '@/views/book/components/MultilingualFill.vue';
+import AnswerAnalysisList from '@/views/book/courseware/create/components/common/AnswerAnalysisList.vue';
 
 import { displayList, viewMethodList, isEnable, analysisData, answerData } from '@/views/book/courseware/data/common';
 import {
@@ -71,6 +72,7 @@ const mixin = {
     ModuleBase,
     RichText,
     MultilingualFill,
+    AnswerAnalysisList,
   },
   provide() {
     return {

src/views/book/courseware/create/components/question/fill/Fill.vue

@@ -100,7 +100,6 @@ import ModuleMixin from '../../common/ModuleMixin';
 import SoundRecord from '@/views/book/courseware/create/components/question/fill/components/SoundRecord.vue';
 import UploadAudio from '@/views/book/courseware/create/components/question/fill/components/UploadAudio.vue';
 import PinyinText from '@/components/PinyinText.vue';
-import AnswerAnalysisList from '@/views/book/courseware/create/components/common/AnswerAnalysisList.vue';
 
 import { getFillData, arrangeTypeList, fillFontList, fillTypeList } from '@/views/book/courseware/data/fill';
 import { addTone, handleToneValue } from '@/views/book/courseware/data/common';
@@ -113,7 +112,6 @@ export default {
     SoundRecord,
     UploadAudio,
     PinyinText,
-    AnswerAnalysisList,
   },
   mixins: [ModuleMixin],
   data() {

src/views/book/courseware/preview/common/PreviewOperation.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="operation">
+    <div class="button retry"></div>
+    <div class="button correct"></div>
+    <div class="button answer" @click="showAnswerAnalysis()"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PreviewOperation',
+  data() {
+    return {};
+  },
+  methods: {
+    showAnswerAnalysis() {
+      this.$emit('showAnswerAnalysis');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.operation {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 8px;
+
+  .button {
+    width: 90px;
+    height: 40px;
+    cursor: pointer;
+    border-radius: 5px;
+
+    & + .button {
+      margin-left: 24px;
+    }
+
+    &.retry {
+      background: url('@/assets/component/component-retry.png') no-repeat center;
+    }
+
+    &.correct {
+      background: url('@/assets/component/component-correct.png') no-repeat center;
+    }
+
+    &.answer {
+      background: url('@/assets/component/component-answer.png') no-repeat center;
+    }
+  }
+}
+</style>

src/views/book/courseware/preview/components/common/PreviewMixin.js

@@ -1,5 +1,7 @@
 import SerialNumberPosition from './SerialNumberPosition.vue';
 import PinyinText from '@/components/PinyinText.vue';
+import AnswerAnalysis from '@/views/book/courseware/preview/common/AnswerAnalysis.vue';
+import PreviewOperation from '@/views/book/courseware/preview/common/PreviewOperation.vue';
 
 import { isEnable } from '@/views/book/courseware/data/common';
 import { ContentGetCoursewareComponentContent } from '@/api/book';
@@ -61,6 +63,8 @@ const mixin = {
   components: {
     SerialNumberPosition,
     PinyinText,
+    AnswerAnalysis,
+    PreviewOperation,
   },
   created() {
     // 这里分为 预览 和 编辑调整位置、视频互动组件 三种情况

src/views/book/courseware/preview/components/fill/FillPreview.vue

@@ -105,11 +105,7 @@
       </div>
     </div>
 
-    <div class="operation">
-      <div class="button retry"></div>
-      <div class="button correct"></div>
-      <div class="button answer" @click="showAnswerAnalysis"></div>
-    </div>
+    <PreviewOperation @showAnswerAnalysis="showAnswerAnalysis" />
 
     <WriteDialog :visible.sync="writeVisible" @confirm="handleWriteConfirm" />
     <AnswerAnalysis
@@ -134,7 +130,6 @@ import AudioFill from './components/AudioFillPlay.vue';
 import SoundRecord from '../../common/SoundRecord.vue';
 import SoundRecordBox from '@/views/book/courseware/preview/components/record_input/SoundRecord.vue';
 import WriteDialog from './components/WriteDialog.vue';
-import AnswerAnalysis from '../../common/AnswerAnalysis.vue';
 
 export default {
   name: 'FillPreview',
@@ -143,7 +138,6 @@ export default {
     SoundRecord,
     SoundRecordBox,
     WriteDialog,
-    AnswerAnalysis,
   },
   mixins: [PreviewMixin],
   data() {
@@ -483,35 +477,6 @@ export default {
       width: 100px;
     }
   }
-
-  .operation {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 8px;
-
-    .button {
-      width: 90px;
-      height: 40px;
-      cursor: pointer;
-      border-radius: 5px;
-
-      & + .button {
-        margin-left: 24px;
-      }
-
-      &.retry {
-        background: url('@/assets/component/component-retry.png') no-repeat center;
-      }
-
-      &.correct {
-        background: url('@/assets/component/component-correct.png') no-repeat center;
-      }
-
-      &.answer {
-        background: url('@/assets/component/component-answer.png') no-repeat center;
-      }
-    }
-  }
 }
 </style>