eep_page/src/views/book/courseware/preview/components/video_interaction/ExercisePreview.vue

<template>
  <div class="Exercise-preview" v-loading="loading">
    <div class="type-content">
      <div class="type-content-inner">
        <div class="rich-text" v-html="sanitizeHTML(title)"></div>
        <component :is="getViewCom" :content="content" ref="preview" />
      </div>
    </div>
    <footer style="text-align: right">
      <el-button @click="handleCancle">取 消</el-button>
      <el-button :loading="loading" type="primary" @click="submitAdd">确 定</el-button>
    </footer>
  </div>
</template>

<script>
import SelectPreview from '@/views/book/courseware/preview/components/select/SelectPreview.vue';
import JudgePreview from '@/views/book/courseware/preview/components/judge/JudgePreview.vue';
import { GetCoursewareExerciseView } from '@/api/book';
import { sanitizeHTML } from '@/utils/common';
export default {
  name: 'ExercisePreview',
  components: { SelectPreview, JudgePreview },
  props: ['exercise_id'],
  data() {
    return {
      sanitizeHTML,
      typeValue: '',
      title: '',
      content: null,
      loading: false,
    };
  },
  computed: {
    getViewCom() {
      switch (this.typeValue) {
        case 'select':
          return SelectPreview;
        case 'judge':
          return JudgePreview;
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.handleData();
  },
  methods: {
    componentMove() {},

    handleCancle() {
      this.$emit('handleCancle');
    },
    submitAdd() {
      this.$emit('submitAdd', this.exercise_id, this.$refs.preview.answer);
    },
    handleData() {
      this.loading = true;
      let data = {
        exercise_id: this.exercise_id,
        courseware_id: this.$route.params.id,
      };
      GetCoursewareExerciseView(data)
        .then((res) => {
          this.loading = false;
          if (res.status === 1) {
            this.content = res.content_exercise;
            this.title = res.content_title;
            this.typeValue = res.content_exercise ? JSON.parse(res.content_exercise).type : '';
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.type-content {
  margin: 5px 0;
}

.type-content-inner {
  width: 100%;
}
</style>