GCLS_Page_Exercise/src/views/exercise_questions/preview/WritePreview.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="write-preview">
    <div class="stem">
      <span class="question-number">{{ data.property.question_number }}.</span>
      <span v-html="sanitizeHTML(data.stem)"></span>
    </div>
    <div class="article-content" v-html="sanitizeHTML(data.article)"></div>
    <div v-if="isEnable(data.property.is_enable_description)" class="description">{{ data.description }}</div>
    <el-input
      v-model="user_answer.text"
      rows="3"
      type="textarea"
      placeholder="请输入内容"
      :maxlength="data.property.word_num"
      show-word-limit
      @input="handleInput"
    />
    <template v-if="isEnable(data.property.is_enable_voice_answer)">
      <!-- 语音作答 -->
      <SoundRecordPreview :wav-blob.sync="user_answer.voice_file_id" />
    </template>
    <template v-if="isEnable(data.property.is_enable_upload_accessory)">
      <!-- 上传附件 -->
      <UploadFiles
        :fille-number="999"
        file-type-name="文件"
        :upload-type="'*'"
        :file-id-list="user_answer.accessory_file_id"
        upload-title="上传附件："
        @upload="handleUpload"
        @deleteFile="handleDelete"
      />
    </template>
    <template v-if="isEnable(data.property.is_enable_sample_text)">
      <el-divider content-position="center"
        ><span
          :class="['sample-text', show_sample_text ? 'sample-show' : 'sample-hide']"
          @click="show_sample_text = !show_sample_text"
          >{{ show_sample_text ? '隐藏范文' : '查看范文' }}</span
        ></el-divider
      >
      <div v-if="show_sample_text" class="article-content" v-html="sanitizeHTML(data.sample_text)"></div>
    </template>
  </div>
</template>

<script>
import SoundRecordPreview from './components/common/SoundRecordPreview.vue';
import PreviewMixin from './components/PreviewMixin';
import UploadFiles from './components/common/UploadFiles.vue';

export default {
  name: 'WritePreview',
  components: {
    SoundRecordPreview,
    UploadFiles,
  },
  mixins: [PreviewMixin],
  data() {
    return {
      show_sample_text: false,
      user_answer: {
        text: '', // 用户文章
        voice_file_id: '', // 录音内容
        accessory_file_id: [], // 上传文件列表
      },
    };
  },
  created() {},
  methods: {
    // 文件上传成功
    handleUpload(fileId) {
      this.user_answer.accessory_file_id.push(fileId);
    },
    // 删除文件
    handleDelete(fileId) {
      this.user_answer.accessory_file_id.splice(this.user_answer.accessory_file_id.indexOf(fileId), 1);
    },
    handleInput(value) {
      if (value.length >= this.data.property.word_num) {
        this.$message.warning(`字数达到${value.length}字！`);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.write-preview {
  @include preview;

  .el-divider--horizontal {
    margin: 12px 0;
  }

  .sample-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    color: #000;
    cursor: pointer;

    &.sample-show {
      color: #306eff;
    }
  }

  .article-content {
    :deep p {
      margin: 0;
    }
  }

  :deep .el-textarea .el-input__count {
    background-color: #f2f3f5;
  }
}
</style>