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

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="dialogue-preview">
    <div class="stem">
      <span class="question-number" :style="{ fontSize: data.property.stem_question_number_font_size }">
        {{ questionNumberEndIsBracket(data.property.question_number) }}
      </span>
      <span v-html="sanitizeHTML(data.stem)"></span>
    </div>
    <div
      v-if="isEnable(data.property.is_enable_description)"
      class="description rich-text"
      v-html="sanitizeHTML(data.description)"
    ></div>

    <div class="content">
      <div
        v-for="(item, i) in optionList"
        :key="i"
        class="option-list"
        :style="{ flexDirection: item.type === 'input' ? 'row-reverse' : 'row' }"
      >
        <span
          class="avatar"
          :style="{
            backgroundColor: data.property.role_list?.find(({ mark }) => mark === item.role).color,
          }"
        >
          {{ data.property.role_list?.find(({ mark }) => mark === item.role).name }}
        </span>

        <div v-if="item.type === 'text'" class="text-wrapper">
          <div class="text">{{ item.text }}</div>
        </div>

        <div v-else-if="item.type === 'image'" class="image">
          <img :src="file_map_list[item.file_id]" />
        </div>

        <div v-else-if="item.type === 'audio'" class="audio">
          <AudioPlay
            :file-id="item.file_id"
            :show-slider="true"
            :show-progress="false"
            :background-color="data.property.role_list?.find(({ mark }) => mark === item.role).color"
          />
        </div>

        <div v-else-if="item.type === 'input'">
          <SoundRecordPreview :wav-blob.sync="item.file_id" :disabled="disabled" type="small" />
        </div>
      </div>
    </div>

    <div v-if="isEnable(data.property.is_enable_reference_answer) && isShowRightAnswer" class="reference-box">
      <h5 class="reference-title">参考答案</h5>
      <span class="reference-answer rich-text" v-html="sanitizeHTML(data.reference_answer)"></span>
    </div>

    <div v-if="isEnable(data.property.is_enable_analysis) && isShowRightAnswer" class="analysis">
      <span class="analysis-title">解析</span>
      <div class="analysis-content" v-html="sanitizeHTML(data.analysis)"></div>
    </div>
  </div>
</template>

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

import { GetFileURLMap } from '@/api/app';

export default {
  name: 'DialoguePreview',
  components: {
    SoundRecordPreview,
  },
  mixins: [PreviewMixin],
  data() {
    return {
      optionList: [],
      file_map_list: [],
      inputFocus: false,
      focusPostion: {
        i: -1,
        j: -1,
      },
    };
  },
  watch: {
    'data.option_list': {
      handler(val) {
        let list = JSON.parse(JSON.stringify(val));
        let file_id_list = [];
        list.forEach(({ type, file_id }) => {
          if (type === 'image' || type === 'audio') {
            file_id_list.push(file_id);
          }
        });
        GetFileURLMap({ file_id_list }).then(({ url_map }) => {
          this.file_map_list = url_map;
        });
        this.optionList = list;
      },
      deep: true,
      immediate: true,
    },
    optionList: {
      handler(val) {
        this.answer.answer_list = [];
        val.forEach(({ type, mark, file_id }) => {
          if (type === 'input') {
            if (file_id.length <= 0) return;
            this.answer.answer_list.push({
              audio_file_id: file_id,
              mark,
            });
            return;
          }
        });
      },
      deep: true,
      immediate: true,
    },
    isJudgingRightWrong(val) {
      if (!val) return;
      this.answer.answer_list.forEach(({ mark, audio_file_id }) => {
        let findOption = this.optionList.find((item) => item.mark === mark);
        findOption.file_id = audio_file_id;
      });
    },
  },
  methods: {},
};
</script>

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

.dialogue-preview {
  @include preview;

  .description {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;

    &-item {
      padding: 4px 8px;
      cursor: pointer;
      background-color: #e9edf7;
      border-radius: 4px;

      &:hover,
      &:active {
        color: $light-main-color;
      }
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    padding: 24px;
    background-color: $fill-color;
    border-radius: 16px;

    .option-list {
      display: flex;
      column-gap: 8px;

      .avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        margin-right: 8px;
        font-size: 12px;
        color: #fff;
        border-radius: 50%;
      }

      .text-wrapper {
        display: flex;
        flex-direction: column;
        row-gap: 8px;
        align-items: flex-start;

        .text {
          padding: 8px 12px;
          font-size: 16px;
          word-break: break-all;
          background-color: #fff;
          border-radius: 8px;

          .el-input {
            display: inline-flex;
            align-items: center;
            width: 120px;
            margin: 0 2px;

            &.right {
              :deep input.el-input__inner {
                color: $right-color;
              }
            }

            &.wrong {
              :deep input.el-input__inner {
                color: $error-color;
              }
            }

            & + .right-answer {
              position: relative;
              left: -4px;
              display: inline-block;
              height: 32px;
              font-size: 16px;
              line-height: 28px;
              vertical-align: bottom;
              border-bottom: 1px solid $font-color;
            }

            :deep input.el-input__inner {
              padding: 0;
              font-size: 16px;
              color: $font-color;
              text-align: center;
              background-color: #fff;
              border-width: 0;
              border-bottom: 1px solid $font-color;
              border-radius: 0;
            }
          }
        }
      }

      .sound-record-preview {
        padding: 4px;
        background-color: #fff;
        border-radius: 40px;

        :deep .sound-item .sound-item-span {
          color: #1d1d1d;
          background-color: #fff;
        }

        :deep .sound-item-luyin .sound-item-span {
          color: #fff;
          background-color: $light-main-color;
        }
      }

      .image img {
        border-radius: 8px;
      }
    }
  }
}
</style>